常用的es6语法简析2

展开操作符

1.将数组或对象传播到新的数组或对象中

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

        let obja = { name: "xiatian" };
        let objb = { ...obja, age: 12 };
        console.log(obja); // {name:"xiatian"}
        console.log(objb); // {name:"xiatian",age:12}
　　　　　//展开操作符,将对象传播到新的对象中,现在只有在高版本的浏览器支持，将在es2018推出

2.展开操作符,将数组元素当做一组变量传递给函数非常有用

 function testArr(a, b, c) {
            console.log(`a=${a},b=${b},c=${c}`);  //a=aa,b=bb,c=cc
        }

        let arrSend = ["aa", "bb", "cc"];
        testArr(...arrSend);

3.展开操作符创建一个新的数组或对象

        let createObja = [1, 2, 3];
        let createObjb = [...createObja];
        let createObjc = createObja;
        createObjb.push(4);
        console.log(createObja); //1,2,3
        console.log(createObjb); //1,2,3,4
        console.log(createObja == createObjb) //false
        createObjc.push(4);
        console.log(createObja); //1,2,3,4
        console.log(createObjc); //1,2,3,4
        console.log(createObja == createObjc) //true

4.展开操作符将变量收集到一个数组中,当你不知道有多少变量传递给函数的时候，这个特别有用

function foo(...args) {
            console.log(args); //"car", 54, "tree"

} foo("car", 54, "tree");

2.默认参数

1.默认参数缺少或未定义的值将使用默认值进行初始化

2.需要特别注意的是:null 和false会被强制转换成0

       function defaultParam(a = 5, b = 10) {
            console.log(a + b);
        }
        defaultParam(); //15
        defaultParam(1, 2) //3
        defaultParam(undefined, 20); //25
        defaultParam(8) //18
        defaultParam(null); //10

3.解构

解构是拆分等号左侧的数组或对象的过程

 let [jiegoua, jiegoub, jiegouc] = [1, 2, 3];
        console.log(`jiegoua=${jiegoua},jiegoub=${jiegoub},jiegouc=${jiegouc}`);
        //jiegoua=1,jiegoub=2,jiegouc=3
        function jiegou1() {
            return ["car", "dog", 6];
        }
        let [jiegoux, jiegouy, jiegouz] = jiegou1();
        console.log(`jiegoux=${jiegoux},jiegouy=${jiegouy},jiegouz=${jiegouz}`);
        //jiegoux=car,jiegouy=dog,jiegouz

通过对象解构，可以在大括号内列出对象的键以提取该键值对

 function jiegouBar() {
            return {
                jiegouBara: 1,
                jiegouBarb: 2,
                jiegouBarc: 3
            }
        }
        let { jiegouBara, jiegouBarc } = jiegouBar();
        console.log(jiegouBara);//1
        console.log(jiegouBarc);//3
        //console.log(jiegouBarb); //报错,jiegouBarb is not defined

有时，你想提取值，但将它们分配给一个新的变量。这是通过在等号左边的 ‘key: variable’ 配对完成的

  function jiegouTest() {
            return {
                jiegouf: "car",
                jiegoug: "londong",
                jiegouh: {
                    name: "benben",
                    age: 21
                }
            }
        }

        let { jiegouf: x1, jiegoug: y1, jiegouh: { name: driver } } = jiegouTest();
        console.log(`I'm going to ${y1} with ${driver} in their ${x1}.`) //I'm going to londong with benben in their car.

注意：对象解构允许为多个变量赋值。

    let { x: first, x: sencond } = { x: 4 };
        console.log(first, sencond); //(4,4)

4.箭头函数

箭头函数(Arrow Functions),结构和 this 绑定

它们可以具有比传统函数更简单的结构，因为它们不需要 function 关键字，并且它们会自动返回箭头之后的任何内容。

       let jiatonBar = (a, b) => a + b;
        console.log(jiatonBar(1, 2)); //3

5.for … of 循环

ES6 增加了一种迭代数组中每个值的方法。这与现有的 for ... in 循环不同，for ... in 循环使用 key/index(键/索引) 循环,用 key/index(键/索引) 循环。

 let forofTest = ['a', 'b', 'c', 'd'];
        for (var param of forofTest) {
            console.log(param); //a,b,c,d
        }

        for (var key in forofTest) {
            console.log(key); //0,1,2,3
        }

常用的es6语法简析2

猜你喜欢