ES6 解构赋值/剩余参数与展开运算符 学习笔记

1、解构赋值

解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或者常量；

（1）数组的解构赋值

原理：

• 模式（结构）匹配；
• 索引值相同的完成赋值（不取的可以直接逗号跳过）；

默认值：

• const [a=1,b=3] = [];
• 默认值生效条件：严格等于undefined时，对应的默认值才会生效；
• 注意：如果默认值时表达式：const [x=func()] = [1];如果默认值没有使用，则func()不会执行；

应用：

• 常见的类数组的解构赋值：arguments、NodeList
• 函数参数的解构赋值
• 交换变量的值

（2）对象的解构赋值

原理：

• 模式（结构）匹配；
• 属性名相同的完成赋值；

对象解构赋值的注意事项：

• 对象解构赋值的默认值

• 将一个已经声明的变量用于解构赋值，整个赋值需要在圆括号中进行，浏览器会把花括号

  当成代码块；

  let x = 1;
  ({x} = {x:1});
  

• 可以取到继承的属性

应用：

• 函数参数的解构赋值
• 复杂类型的嵌套

（3）其他数据类型的解构赋值

• 字符串的解构赋值：既可以使用数组的形式解构赋值，也可以使用对象的形式解构赋值；

  // 以数组的形式解构
  const str = "hello";
  const [a,b,c] = str;
  console.log(a,b,c)  // h e l 
  
  // 以对象的形式解构
  const str = "hello";
  const {0:a,1:b,2:c} = str;
  console.log(a,b,c)  // h e l 
  

• 数值和布尔值的解构赋值:会自动先把等号右边的值转为对象；

• 对undefined和null的解构赋值会报错；

2、剩余参数与展开运算符

（1）剩余参数

• 剩余参数永远是个数组（作为函数参数的时候，与解构赋值结合使用的时候不是这样），即使没有值，也是空数组；

• 注意事项：

  箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号；

  可以使用剩余参数替代arguments获取实际参数（使用箭头函数的时候）；

  剩余参数必须是最后一个参数，之后不能再有其他参数，否则会报错;

• 剩余参数的应用

  与解构赋值结合使用（与解构赋值一起使用的时候叫做剩余元素）：剩余参数不一定非要作为函数参数使用(必须是最后一个）；

  const [num, ...args] = [1,2,3,4];
  

  剩余参数和剩余元素的书写格式都是使用“…变量名”的方式，不同的是：剩余参数是直接作为函数参数使用的。剩 余元素是在解构赋值时，用来接收剩下的元素。

（2）展开运算符

数组展开运算符的应用：

• 复制数组
• 合并数组
• 字符串转数组（[…“hello”]）
• 常见的类数组转化为数组

区分剩余参数和展开运算符（我理解” 收纳“和”散开“的区别）

对象展开运算符的应用：

• 对象不能直接展开，必须在{}中展开；
• 对象的展开：把属性罗列出来，用逗号分隔，放到一个{}中，构成新对象；
• 对象的合并：新对象拥有全部属性，相同属性，后者覆盖前者；

对象展开运算符的注意事项：

• 空对象的展开：如果展开一个空对象，则没有任何效果；

• 非对象的展开：如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来；

  如果是数值、null、undefine d、布尔值返回还是空对象；

  如果展开运算符后面是字符串，它会自动转为一个类似数组的对象，因此返回的不是空对象；

  （字符串既可以再数组中展开，也可以在对象中展开，也可以直接展开）

  不会展开对象中的对象属性；

对象展开运算符的应用：

• 复制对象
• 用户参数和默认参数