JavaScript--解构赋值 & 剩余参数

Posted 2021-08-10 Z && Y

1. 解构

ES6中允许从数组中提取值，按照对应位置，对变量赋值。
对象也可以实现解构。
如果解构不成功,变量的值为undefined(即没有对应的数据给解构的数据赋值)

数组解构

    //数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量
    var arr = [1, 2, 3];
    var [a, b, c, d] = arr;
    console.log(a);// 1
    console.log(b);// 2
    console.log(c);// 3
    console.log(d);// undefined

对象解构

    //对象解构允许我们使用变量的名字匹配对象的属性
    //匹配成功将对象属性的值赋值给变量
    let person = { name: "zhangsan", age: 18 };
    // 注意这里的name,age是和对象的属性名一致的
    let { name, age } = person;
    console.log(name);// zhangsan
    console.log(age);// 18

起别名的操作

    let person = { name: "zhangsan", age: 18 };
    //myName,myAge分别是name和age的别名
    let { name: myName, age: myAge } = person;
    console.log(myName); // zhangsan
    console.log(myAge); // 18

---

2. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

    const add = (...args) => {
      var sum = 0;
      for (let i = 0; i < args.length; i++) {
        sum += args[i];
      }
      return sum;
    };
    console.log(add(1, 2, 3, 4, 5, 6)); // 21

---

剩余参数可以和解构配合使用

    let arr = ["漳卅", "李斯", "长安"];
    let [s1, ...s2 ] = arr;
    console.log(s1);// 漳卅
    console.log(s2);// 李斯, 长安

---

---