es6常用知识总结

es6已经出了2年左右的时间了，虽然部分浏览器没有支持es6，不过在babel等帮助下，我们依然可以使用es6相关的内容，现在对es6常用内容的总结。

一、变量解构

变量结构是按照一堆的规则从数组或者对象中提取值并赋予给变量。

    数组解构:    let [x, y, z] = [1, 2, 3];    console.log(x); //1    console.log(y); //2    console.log(z); //3    解构默认值:    let [a = 1] = [];    console.log(a); //1    let [b = 2] = [undefined];    console.log(b); //2    let [c = 3] = [4];    console.log(c); //4    解构变量赋值:    let [d = 1, e = d] = [5];    console.log(d); //5    console.log(e); //5    对象解构:    let {football, basketball} = {basketball: "dunk", football: "shoot"};    console.log(football); //"shoot"    console.log(basketball); //"dunk"    结构失败:    let {baseball} = {basketball: "dunk", football: "shoot"};    console.log(baseball); //undefined    对象解构完整写法:    let {football: pingpong} = {basketball: "dunk", football: "shoot"};    console.log(pingpong); //"shoot"    复合解构:    let {f: {g, h}} = {f: {g: 1, h: 2}};    console.log(g); //1    console.log(h); //2    字符串解构:    const [i, j, k] = 'abc';    console.log(i); //'a'    console.log(j); //'b'    console.log(k); //'c'    let {length: len} = 'kkkkk';    console.log(len); //5    函数内解构应用:    function arrayTest([a, b, c]) {        console.log(a + b + c);     }    arrayTest([1, 2, 3]); //6    function objTest({a, b}) {        console.log(a + b);     }    objTest({a: 1, b: 3}); //4

二、字符串拓展

常用的字符串拓展:

• for-of循环
• 模板字符串

    for-of循环:    let a = 'abcde';    for(let i of a){        console.log(i); //a b c d e    }    模板字符串:    let dd = 'amazing';    document.body.innerHTML = `<div>        <p>           string template test ${dd}        </p>    </div>`;    //<div><p>string template test amazing</p></div>

三、数组拓展

常用的数组拓展:

• 拓展运算符(…)
• Array.from

    拓展运算符:    console.log(...['x', 'y', 'z']); //'x' 'y' 'z'    let a = [];    a.push(...[1, 2, 3]);    console.log(a); //[1,2,3]    function test(x, y) {        console.log(x + y);     }    test(...[1, 2, 3]); //3    let b = [1,2,3];    let c = [...b];    console.log(c); //[1,2,3]    console.log([...[1,2],...[3,4],...[5,6]]); //[1,2,3,4,5,6]    Array.from方法（将类数组转换为数组）:    function fromTest() {        console.log(Array.from(arguments));     }    fromTest('a','b','c'); //['a','b','c']

四、对象拓展

常用的对象拓展:

• 对象简洁表达式
• Object.assign

    对象简洁表达式:    let a = 'simple';    let b = {a};    console.log(b); //{a:"simple"}    let obj = {        a,        fun(){            console.log('simple');        }    }    obj.fun(); //'simple'    let obj1 = {        ['a' + 'bc']: 1,        d: 2,        ['f' + 'un'](){            console.log('amazing'); //'amazing'        }    }    console.log(obj1.abc); //1    obj1.fun();    Object.assign:    let target = {a: 1, b: 2, c: 3};    let source1 = {b: 3, d: 4};    let source2 = {c: 4, e: 5};    Object.assign(target, source1, source2);    console.log(target); //{a: 1, b: 3, c: 4, d: 4,e: 5}    Object.assign为浅拷贝:    let obj2 = {a: 1, b: {c: 2}};    let obj3 = Object.assign({}, obj2);    obj2.a = 2;    obj2.b.c = 3;    console.log(obj3); //{a:1,b:{c:3}}

五、函数拓展

常用的函数拓展:

• 参数默认值
• rest参数
• 箭头函数

    函数默认值:    function defaultValue(x = 0, y = 0) {        console.log(x + y);    }    defaultValue(); //0    defaultValue(1); //1    defaultValue(1, 2); //3    rest参数:    function restTest(...values) {        console.log(values);    }    restTest(1, 2, 3, 4); //[1,2,3,4]    箭头函数:    var arrow = (x, y) => x + y;    console.log(arrow(1, 2)); //3    var arrow2 = () => {a:1};    console.log(arrow2()); //undefined    var arrow3 = () => ({a: 1});    console.log(arrow3()); //{a: 1}    //箭头函数返回对象需要加圆括号    //箭头函数的this会保持不变    var a = 1;    function fun() {        setTimeout(() => {            console.log(this.a); //2        }, 100);        setTimeout(function () {            console.log(this.a); //1        },100);    }    fun.call({a: 2});

六、Set和Map

Set和和Map是新的数据结构，常用的情景是数组去重。

    数组去重:    let a = new Set();    [1, 2, 3, 3, 4, 5, 6, 1].forEach(i => a.add(i));    console.log(Array.from(a)); //[1,2,3,4,5,6]    let b = new Map();    b.set('a', 1);    b.set('b', 2);    console.log(b); //Map(2) {"a" => 1, "b" => 2}    let c = {a: 1};    b.set(c, 3);    console.log(b.get(c)); //3

七、class

新增了类的支持，统一了继承的写法。

    类的基本结构:    class A {        constructor(x, y) {            this.x = x;            this.y = y;        }        getValue() {            console.log(this.x + this.y);        }    }    let a = new A(1, 2);    a.getValue(); //3    let aa = new A(2, 2);    aa.getValue(); //4    a.x = 5;    a.getValue(); //7    aa.getValue(); //4    类的继承:    class B extends A {        constructor(x, y) {            super(x, y);        }        getOtherValue(){            console.log(this.x - this.y);        }    }    let b = new B(1,2);    b.getValue(); //3    b.getOtherValue(); //-1

好了，es6常用的一些方法已经总结完了，不过还有一些遗漏的:比如let和const，这个比较简单；还有es6模块化机制，这个放在模块化的文章中来说；当然还有最重要的异步操作Promise、Generator、async函数，这个也会单独开一篇文章来说。

over…