ES6新特性参考
这里收集和整理了ES6常用和重大的新特性。
1. 箭头操作符(=>)
简化了函数代码,类似于匿名函数、lambda表达式和Objective-C里面的blocks。
单行
var evens = [2, 4, 6, 8, 10, 12, 14];
var odds = evens.map((n) => n + 1);
log(odds);
// odds = [3, 5, 7, 9, 11, 13, 15];
// map的第二个回调参数是循环序号,如0, 1, 2 ...
var nums = evens.map((v, i) => v + i);
log(nums);
// nums = [2, 5, 8, 11, 14, 17, 20];
多行
var fives = [];
// 单个参数的小括号可省略
nums.forEach(v => {
if (v % 5 === 0) {
fives.push(v);
}
});
log(fives);
// fives = [5, 20];
外部this对象
// Lexical this
var bob = {
_name: 'Bob',
_friends: ['Tom', 'Jerry', 'Ted'],
printFriends() {
this._friends.forEach(f => {
log(this._name + ' knows ' + f);
});
}
}
bob.printFriends();
相关说明
2. 类(class)
对于熟悉c++、java和c#的人来说,类(class)的概念非常熟悉了。ES6里面的类依然是基于prototype的OO模式,和上面的类的概念还是有些细微的差别。这里,可以只把ES6里面类的语法看做是一种语法糖。(ES2015 classes are a simple sugar over the prototype-based OO pattern.)
简单的类
class Student {
// 构造函数
// 只能声明一个,否则会报以下错误(Safari 10.0):
// SyntaxError: Cannot declare multiple constructors in a single class.
constructor(name, age) {
// 类成员变量不用事先声明
this.name = name;
this.age = age;
if (age === undefined) {
log('没有传age参数');
}
}
// 方法
sayHello(message) {
// this不能省略
log("Hello " + this.name + ": " + message);
}
sayHelloEx(message) {
log("Hello " + this.name + '[' + this.age + ']: ' + message);
}
}
// js里面,函数的参数可以不传全,缺省为undefined
var studentTom = new Student('Tom');
studentTom.sayHello("Welcome!");
var studentJerry = new Student('Jerry', 11);
studentJerry.sayHelloEx("Great!");
以上的输出是:
没有传age参数
Hello Tom: Welcome!
Hello Jerry[11]: Great!
3. 对象语法增强
4. 字符串模版
5. 常量
6. 遍历
7. 协程相关(coroutine)
8. 模块系统(module)
9. 反射(Reflect)
其他
- 没有找到一个合适的在线编辑和执行的网站,是个遗憾,看看是否可以以后弥补。
- 先用JSFiddle,也不错。
参考资料
更新历史
- 2016/09/18 补充了简单的类的定义
- 2016/09/17 创建