扩展操作符

四种原生集合类型兼容扩展操作符：

  1.   - Array
  2.   - 所有定型数组
  3.   - Map
  4.   - Set

上面的这些类型都支持多种构建方法，比如 Array.of()和 Array.from()静态方法。在与扩展操作符一起使用时，可以非常方便地实现互操作

  1. let arr1 = [1, 2, 3]; 
  2. // 把数组复制到定型数组
  3. let typedArr1 = Int16Array.of(...arr1); 
  4. let typedArr2 = Int16Array.from(arr1); 
  5. console.log(typedArr1); // Int16Array [1, 2, 3] 
  6. console.log(typedArr2); // Int16Array [1, 2, 3] 
  7. // 把数组复制到映射
  8. let map = new Map(arr1.map((x) => [x, 'val' + x])); 
  9. console.log(map); // Map {1 => 'val 1', 2 => 'val 2', 3 => 'val 3'} 
  10. // 把数组复制到集合
  11. let set = new Set(typedArr2); 
  12. console.log(set); // Set {1, 2, 3} 
  13. // 把集合复制回数组
  14. let arr2 = [...set]; 
  15. console.log(arr2); // [1, 2, 3]

浅复制

扩展操作符在对可迭代对象执行浅复制时特别有用， 只需简单的语法就可以复制整个对象：

  1. let arr1=[1,2,3];
  2. let arr2=[...arr1];   //扩展操作符以...arr的形式
  3. //输出结果为
  4. console.log(arr1); // [1, 2, 3] 
  5. console.log(arr2); // [1, 2, 3] 
  6. console.log(arr1 === arr2); // false  虽然是浅复制，但两者在存储地址的变量不占据同一块内存

浅复制也意味着只会复制对象的引用：

  1. let arr1 = [{}]; 
  2. let arr2 = [...arr1]; 
  3. arr1[0].foo = 'bar'; 
  4. console.log(arr2[0]); // { foo: 'bar' }

数组合并

  1. let arr1=[1,2,3];
  2. let arr2=[4,5,6];
  3. let arr3=[...ary1,...ary2]
  4. console.log(arr3) //[1,2,3,4,5,6]

将伪数组转换为真正的数组

  1. let lis=doucument.querySelectorAll('li');  //获得一个伪数组
  2. var ary=[...lis] //将伪数组转换为真数组

剩余参数

剩余参数允许我们不需要太过准确的表示一个数组，例如[first,...age]，这种参数能很方便的声明不知道参数情况下的函数

  1. function sum(first,...args){
  2.       console.log(first);  //10
  3.       console.log(args);//[20,30,40]
  4. }
  5. sum(10,20,30,40)

剩余参数配合数组解构使用

  1. let person = ['yuanmou','yuequn','changsheng'];
  2. let [nam1,...nam2] = person;
  3. console.log(nam1);  //'yuanmou'
  4. console.log(nam2);  //['yuequn','changsheng']