一天轻松搞定ECMAScript 6.0（简称 ES6）入门

序

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

由于es6越来越重要，已经成为了web前端开发者必备知识。为了能够快速的入门，这里总结了一些基本方法作为参考学习，希望有所帮助。如果想了解更多，还要靠慢慢的积累。

弄明白以下10点，入门完全够了，至于深层次的东西就看个人造化了。

1. let , const 和 块级作用域

let

最简单粗暴的做法就是：以前用“var”声明的变量，现在用“let”替代就是了。

例一：

    var a = 123; //es2015写法
    let a = 123; //es6写法

例二：

    //es2015
    var fn = function () {
        //handle
    };

    //es6写法
    let fn = function () {
        //handle
    };
    //或者
    let fn = () => {
        //handle
    }

const

这是常量的声明，比如PI=3.1415这类不希望被人更改的东西用const。

例如：

const PI = 3.141592563

块级作用域 == “{}”

最简单粗暴的区分es6块级作用域的方法就是：“每一个{}就是一个块级作用域，包括for循环后面的大括号也是块级作用域”。

例如：

{
    let a = 'apple';
    console.log(a); //apple
    {
        let a = 'aaa';
        console.log(a); //aaa
    }
    {
        console.log(a); //apple
    }
    {
        let a = 'AAA'
        console.log(a); //AAA
    }
    console.log(a); //apple
}

2. 变量解构赋值

解构赋值本质上属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

数组解构赋值

例一：

    let [a, b, o] = ['apple', 'banana', 'orange'];
    console.log(a, b, o); //apple banana orange

例二：

    let [a, [b, c], d] = ['aa', ['bb', 'cc']];
    console.log(a, b, c, d); //aa bb cc undefined

例三：

    let [a, b, ...other] = [1, 2, 3, 4, 5, 6, 7];
    console.log(a, b, other); //1 2 [3, 4, 5, 6, 7]

有人就想这个”...“是什么东西，不要着急，先往下看。

对象解构赋值

例一：

    let { a, b } = { a: 'apple', b: 'banana' };
    console.log(a,b); //apple banana

例二：

    let { a, b } = { a: 'apple', c:'hehehehehe', xx: 'xxxxxx', b: 'banana' };
    console.log(a,b); //apple banana

例三：

    let { a, xx:{ b } } = { a: 'apple', xx: { b: 'boy'}, b: 'banana' };
    console.log(a,b); //apple boy

混合解构赋值（这个概念是我自己编的）

从上面的“栗子”我们可以知道，es6的解构赋值其实讲究的就是“匹配模式”，即等号两面模式一致，就会赋予相应的值，未匹配的则为undefined。那么，下面的例子就顺理成章了。
例一：

    let [a, b, {x: {c}, d}, e] = ['aa', 'bb', {o: 'oo', x: {v: 'vv', c: 'cc'}, d: 'dd'}];
    console.log(a, b, c, d, e); //aa bb cc dd undefined

例二：

    let [arr, [obj]] = [[1, 2, 3], [{ a:'aa', b:'bb' }]];
    console.log(arr, obj); //[1, 2, 3] {a: "aa", b: "bb"}

函数参数解构赋值

函数参数的解构赋值其实也是一样的，本质都是“匹配模式”，只不过这里是形参与实参之间的匹配。
例如：

{
    //es6环境下的es5+es6写法
    function fun([a, b]) {
        return a + b;
    }
    console.log(fun([100, 150])); //250
}
{
    //es6写法
    let fun = ([a, b]) => a + b;
    console.log(fun([150, 100])); //250
}

再例如：

    let fun = ([a, b], { o }) => [a, b, o];
    let fruits = fun(['apple', 'banana'], {g: 'grap', o: 'orange'});
    console.log(fruits); //["apple", "banana", "orange"]

作为入门，学会以上解构赋值就够用了，需要深入了解请自行百科。

3.字符串扩展

es6对字符串进行了大量API的扩展，不过对于菜鸟的我而言，最喜欢的莫过于模板字符串功能

模板字符串

例如：

es5写法

    var name = 'loushengyue',
        age = 30,
        sex = 'man';
    var tpl =
        '<div>' +
        '<span>name: ' + name + '</span>' +
        '<span>age: ' + age + '</span>' +
        '<span>sex: ' + sex + '</span>' +
        '</div>'

    console.log(tpl); //<div><span>name: loushengyue</span><span>age: 30</span><span>sex: man</span></div>

es6写法

    let name = 'loushengyue',
        age = 30,
        sex = 'man';
    let tpl = `<div><span>name: ${name}</span><span>age: ${age}</span><span>sex: ${sex}</span></div>`

    console.log(tpl); //<div><span>name: loushengyue</span><span>age: 30</span><span>sex: man</span></div>

其他扩展

• codePointAt()
• String.fromCodePoint()
• normalize()
• includes(), startsWith(), endsWith()
• repeat()
• padStart()，padEnd()
• matchAll()
• …

其中，我对includes(), startsWith(), endsWith() 方法还是蛮感兴趣的，下面是他们的简单说明：

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

4.正则扩展

es6加强了RegExp构造函数的功能，拓展了u 、y修饰符，新增sticky，flags 属性等。
对于菜鸟的我呢，我还是建议先用好这几个方法再去研究es6的新增功能吧。

• test() 返回boolean
• exec() 返回类似数组的集合
• match() 返回类似数组的集合
• replace() 返回替换后的字符串
• search() 返回下标，未匹配上返回-1
• split() 返回数组

es6正则学习参考网站：http://es6.ruanyifeng.com/#docs/regex

5.数值的扩展

数值的二进制，八进制，十六进制表示法

• 0b 开头后面接0-1 的数值构成二进制
• 0o开头后面接0-7 的数值构成八进制
• 0x开头后面接0-9的数值或者abcdef 字符构成八进制

例如：

console.log(0b1001); //9
console.log(0o17); //15
console.log(0x2f); //47

指数运算符

ES2016 新增了一个指数运算符（**）。
例如：

console.log(2 ** 3); //8
console.log(2 ** 4); //16
//还可以**=
let num = 2;
num **= 3;
console.log(num); //8

其他扩展

• Number.isFinite() 判断数值是否为有限的（finite），返回boolean
• Number.isNaN() 判断是否为NaN
• Number.parseInt() 转为整型
• Number.parseFloat() 转为浮点型
• Number.isInteger() 判断一个数值是否为整数，返回boolean
• Number.EPSILON 极小常量，即js的最小精度
• Number.isSafeInteger() 判断一个整数是否在-2^53到2^53之间
• Math.trunc() 除一个数的小数部分，返回整数部分
• …

6.函数扩展

这一节的内容是重点，需要完全掌握！！！

箭头函数

例一：

let fn = item => item * 2;
console.log(fn(8)); //8
//等价于es5的
var fn = function(item){
    return item * 2;
}

例二：

let fn = item => { console.log(item * 2); }
fn(4); //8
//等价于es5的
var fn = function(item) {
    console.log(item * 2);
}

例三：

let fn = () => 10;
//等价于es5的
var fn = function() { return 10; }

例四：

let fn = (a, b) => a + b;
//等价于es5的
var fn = function(a, b) { return a + b; }

函数参数默认值

例如：

let fn = (a, b, c =5, d = 'abcd') => [a, b, c, d];
console.log(fn(1, 3)); //[1, 3, 5, 'abcd']
console.log(fn(2, 4, 6)); //[2, 4, 6, 'abcd']

rest参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

例如：

let sum = (...items) => {
    let total = 0;
    for (let index in items) {
        total += items[index];
    }
    return total;
};
console.log(sum(1, 3, 5)); //9
console.log(sum(1, 3, 5, 4, 6)); //19

当然函数的扩展还有不少，但是就我看来上面这几个比较重要。

未完待续