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…