前面的一些文章,猪猪侠写了一些比较零散最新的ecma规范,想了想,是时候整理一下了,前的债总是要还的,本文会长期更新,收集我们开发中常用到的最新cma规范,由于猪猪侠的各能力有限,所以大家有什么好的提议,可以提出来,我会修改更新,大家有需要的可以收藏起来,以便不时之需。
今天来主要说一下es6最经常用的一下规范吧!
在讲es6的一下新特性之前,我们先来讲一下ecmascript吧。
es全称ecmascript,ecmascript是ecma制定的标准化脚本语言。目前javascript使用的ecmascript版本为ecma-417。关于ecma的最新资讯可以浏览 ecma news查看。
ecma规范最终由tc39敲定。tc39由包括浏览器厂商在内的各方组成,他们开会推动javascript提案沿着一条严格的发展道路前进。 从提案到入选ecma规范主要有以下几个阶段:
stage 0: strawman——最初想法的提交。stage 1: proposal(提案)——由tc39至少一名成员倡导的正式提案文件,该文件包括api事例stage 2: draft(草案)——功能规范的初始版本,该版本包含功能规范的两个实验实现stage 3: candidate(候选)——提案规范通过审查并从厂商那里收集反馈stage 4: finished(完成)——提案准备加入ecmascript,但是到浏览器或者nodejs中可能需要更长的时间。基本上就这五个阶段啦。
下面就进入我们的正题,和大家一起学习下最常用的一些es6的新特性。
es6新特性(2015)es6的特性比较多,在 es5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大,所以es6中的特性比较多。 在这里列举几个常用的:
类模块化箭头函数函数参数默认值解构赋值延展操作符对象属性的简写promiselet与const1.类(class)
对熟悉java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。es6 引入了class(类),让javascript的面向对象编程变得更加简单和易于理解。
2.模块化(module)
es5不支持原生的模块化,在es6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)
es6允许在一个模块中使用export来导出多个变量或函数。
导出变量
export var name = 灵魂诗人猪猪侠
es6不仅支持变量的导出,也支持常量的导出。 export const sqrt = math.sqrt;//导出常量
es6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
var name = 灵魂诗人猪猪侠;
var age = 26;
export {name, age};
导出函数
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import { fn } from module;
import { name, age } from test;
一条import 语句可以同时导入默认函数和其它变量。
import defaultmethod, { othermethod } from xxx.js;
3.箭头(arrow)函数
这是es6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的javascript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
不论是箭头函数还是bind,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。
4.函数参数默认值
es6支持在定义函数的时候为其设置默认值
function foo(height = 50, color = red){}
不使用默认值:
这样写一般没问题,但当参数的布尔值为false时,就会有问题了。比如,我们这样调用foo函数:
foo(0, )
因为0的布尔值为false,这样height的取值将是50。同理color的取值为‘red’。
所以说,函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。
5.模板字符串
es6支持模板字符串,使得字符串的拼接更加的简洁、直观。
不使用模板字符串:
var name = your name is + first + + last + .
使用模板字符串
var name = `your name is ${first} ${last}.`
在es6中通过${}就可以完成字符串的拼接,只需要将变量放在大括号之中。
6.解构赋值
解构赋值语法是javascript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。
如果没有从数组中的获取到值,你可以为变量设置一个默认值。
通过解构赋值可以方便的交换两个变量的值。
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
获取对象中的值
今天先写这么多吧,来日方长!
(内容收集于网络,如有侵权,请联系猪猪侠)
希望生活善待我们每一个人!— 灵魂诗人猪猪侠