JavaScript 的标准 ECMAScript6 到目前为止已经得到广泛使用并被绝大数浏览器所支持，相比 ES5 ，ES6 增加了许多新特性，帮助开发者简化了许多操作，下面一起来看看这些新特性。

箭头函数

ES6 新增了用 => 来表示函数，在这之前，定义一个加法函数是这样子的

1
2
3
function add (x,y) {
    return x + y;
}

而现在，可以省去 function 关键字，直接这样子写

1
let add = (x,y) => return x + y;

注意，如果箭头后面只有一句语句的话，可以省略 {}

let 与 const 关键字

也许你注意到了，上面这个 let 又是什么意思？它就是 ES6 新增的、用来替代 var 的关键字，let 与 var 的功能相同，都是定义声明变量，不同的是，let 声明的变量有一个块级作用域的概念，就是只有在当前的代码块下才能使用定义的这个变量;而 const 则是声明常量。

1
2
3
4
5
6
7
'use strict';
const x = 'hello world';
x = 'javascript';     // Assignment to constant variable.
for ( let i = 0; i < 5; i++) {
    console.log(i);        // 0 1 2 3 4
}
console.log(i);   //错误，因为 i 只在它所在的代码块有效

字符串表示

新的 ES6 提供了操作字符串的简单方法，在这之前，连接字符串通常用 + 来表示，例如

1
2
var a = 'hello world';
console.log('我写的第一句代码是 '+ a +' !');

ES6 提供了反引号 (英文状态下键盘 tab 键上方的符号键，！的左侧)来连接字符串，${variable}来表示变量。

1
2
let a = 'hello world';
console.log(`我写的第一句代码是 ${a} !`);     //注意空格，也是有作用的

类的支持

ES6 新增了 class 关键字，有了类的概念，如果你熟悉 Java ，对类应该不陌生。创建一个类并实例化它也非常简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Student {
    //构造函数
    constructor(name,grade) {
        this.name = name;
        this.grade = grade;
    }
    myGrade () {
        console.log(this.name+'的成绩是 '+this.grade);
    }
}
class Programmer extends Student {
  //调用 super 继承父类参数
   constructor(name,grade){
        super(name,grade);
    }
    key (){
        console.log('I am a key man!');
    }
}
var xiaoming = new Student('xiaoming',86);
var xiaohong = new Programmer()
xiaoming.myGrade();        // xiaoming的成绩是 86
xiaohong.key();           // I am a key man!

增强的对象

现在，定义对象字面量更加简单，可以直接定义原型，写方法不用使用 function 关键字

1
2
3
4
5
6
7
8
9
10
11
var bird = {
    fly() {
        console.log('I can fly !');
    }
}；
var smallBird = {
    _proto_: bird,   //设置原型为 bird，可以继承其方法
    sing() {
        console.log('I can sing a song');
    }
}

for…of 循环

相比 for…in ,ES6 新引入的 for…of 循环可以只循环集合本身的元素。

1
2
3
4
5
6
7
8
9
var fruit = ['apple','orange','pear'];
// for...of
for(var i of fruit) {
    console.log(i);    // apple orange pear
}
// for...in
for(var i in fruit) {
    console.log(i);    // 0 1 2
}

解构

可以快速解析对应变量的对应参数,其中一个应用是可以快速交换变量

1
2
3
4
5
6
7
var [x,y,z] = [1,2,6];
console.log('x='+x+',y='+y+',z='+z);    // x=1,y=2,z=6
//交换变量
var x = 1;
var y = 2;
[x,y] = [y,x];
console.log(x,y);  // 2 1

关键字 argument

ES6 引入了 rest 参数来获得除定义外的参数

1
2
3
4
function foo(a,b,...rest) {
    console.log(rest);
}
foo(5,6,7,8,9,10,15);     // (5) [7, 8, 9, 10, 15]

generator(生成器)

新引入的数据类型，与函数的使用类似，可以通过yield返回多次。通过function*定义，调用的时候不像普通函数那样调用，而是要通过对象的next()方法，执行到yield语句的时候，就返回一个对象{value: x,done: false},直到done: true时结束程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function* odd(num) {
    var n = 0;
    while(n < num) {
        if(n % 2 !=0){
            yield n;
        }
        n++;
    }
}
var f = odd(10);     //找 10 以内的奇数
f.next();   // {value: 1, done: false}
f.next();   // {value: 3, done: false}
f.next();   // {value: 5, done: false}
f.next();   // {value: 7, done: false}
f.next();   // {value: 9, done: false}
f.next();  // {value: undefined, done: true}

Iterable

新的数据类型，Array、Map 和 Set 都属于 iterable 类型，iterable 内置的forEach方法可以更加方便地遍历数组。

1
2
var arr = ['apple','pear','orange'];
arr.forEach( i => console.log(i) );    // apple pear orange

Promise 对象

Promise 对象是为了解决回调函数代码冗杂问题，它支持链式操作，可在实现同样操作的情况下让代码更加得简洁

1
2
3
4
5
6
7
8
9
10
11
12
//声明一个 Promise 对象
let promise = new Promise( (resolve,reject) => {
    if(success){
        resolve('success');
    }else{
        reject(error);
    }
} ).then( data => {             // then方法成功后的回调
    console.log(data);
} ).catch( err => {             // catch方法统一捕获错误在进行处理
    console.log(err);
} )