Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前,他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为,ES6的新特性将极大地改变JavaScript的编写方式。
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。
技术虽然发展太快,但是我们不停下学习的步伐,就不会被新技术淘汰,下面我们一起来学习es6的新特征吧。
箭头操作符
如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。
我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子:
var array = [1,2,3]; // 传统写法写法 array.forEach(function(v) { console.log(v); }); // ES6写法 array.forEach(v => console.log(v));
类的支持
ES6中添加了对类的支持,引入了class关 键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象 的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方 法和构造函数等概念都更加形象化。
下面代码展示了类在ES6中的使用:
// 类的定义 class Animal { // ES6中新型构造器 constructor(name) { this.name = name; } // 实例方法 sayName() { console.log('My name is ' + this.name); } } // 类的继承 class Programmer extends Animal { constructor(name) { // 直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } } // 测试我们的类 var animal = new Animal('dummy'), wayou = new Programmer('wayou'); animal.sayName(); // 输出 'My name is dummy' wayou.sayName(); // 输出 'My name is wayou' wayou.program(); // 输出 'I'm coding...'
增强的对象字面量
对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:
1.可以在对象字面量里面定义原型
2.定义方法可以不用function关键字
3.直接调用父类方法
这样一来,对象字面量与前面提到的类概念更加吻合,在编写面向对象的JavaScript时更加轻松方便了。
// 通过对象字面量创建对象 var human = { breathe() { console.log('breathing...'); } }; var worker = { __proto__: human, // 设置此对象的原型为human, 相当于继承human company: 'freelancer', work() { console.log('working...'); } }; human.breathe(); // 输出 'breathing...' // 调用继承来的breathe方法 worker.breathe(); // 输出 'breathing...'
字符串模板
字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量 ${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。
// 产生一个随机数 var num = Math.random(); // 将这个数字输出到console console.log(`your num is ${num}`);
解构
自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
function getVal() { return[1,2]; } var [x,y] = getVal(), // 函数返回值的解构 console.log('x:' + x + ', y:' + y); // 输出:x:1, y:2 [name,,age] = ['wayou','male','secrect']; // 数组解构 console.log('name:' + name + ', age:' + age); //输出:name:wayou, age:secrect
参数默认值,不定参数,拓展参数
默认参数值
现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name) { // 传统的指定默认参数的方式 var name = name || 'dude'; console.log('Hello ' + name); } sayHello(); // 输出:Hello dude sayHello('Wayou'); // 输出:Hello Wayou // 运用ES6的默认参数 function sayHello2(name = 'dude') { console.log(`Hello${name}`); } sayHello2(); // 输出:Hello dude sayHello2('Wayou'); // 输出:Hello Wayou
不定参数