「这是我参与11月更文挑战的第 2 天，活动详情查看：2021最后一次更文挑战」

数组的扩展

一、扩展运算符

扩展运算符（…）允许一个表达式在园地展开，当需要多个参数（比如函数调用时）或者多个值（比如字面量数组）。

• 扩展运算符还主要用于函数调用的参数（形参与实参）。

示例代码如下：

// 1.定义一个数组
var arr = [1,2,3,4,5];
// 要求：将数组的每一个元素打印到控制台
// 老方法--for循环
/*for (let i=0;i<arr.length;i++){
    console.log(arr[i]);
}*/
//利用扩展运算符
console.log(...arr)//1 2 3 4 5

// 2.定义一个函数
function fun(a,b){
    console.log(a + b);
}
var args = [1,2];
// 老方法
fun(args[0],args[1]);
//利用扩展运算符
fun(...args);

二、替代apply()方法

由于扩展运算符可以展开数组，所以不再需要apply()方法将数组转为函数的参数。

如下示例代码所示：

// 定义一个函数
function fun(a,b){
    console.log(a + b);
}
var args = [1,2];
// 1.老方法
fun(args[0],args[1]);
//2.利用扩展运算符
fun(...args);
//3.call()方法与apply()方法调用
fun.call(null,args[0],args[1]);
fun.apply(null,args)
/*
    call()与apply()方法的区别：
    * call(this,arg1,arg2,arg3,...)
        * 接收参数为多个参数
    * apply(this,arr)
        * 接收参数为一个数组
*/

三、扩展运算符的应用

• 复制数组

  // 扩展运算符复制数组 - 深复制
  // var arr2 = [...arr1];
  var [...arr2] = arr1;
  console.log(arr2);
  arr2[2] = 6;
  console.log(arr2,arr1);//[ 1, 2, 6, 4, 5 ] [ 1, 2, 3, 4, 5 ]
  

• 合并数组

arr1 = [1,2,3]
arr2 = [4,5,6]
// ES5合并数组的方法
console.log(arr1.concat(arr2));

// ES6合并数组的方法,利用扩展运算符
console.log([...arr1,...arr2]);

• 扩展运算符与解耦赋值结合

  var arr = [1,2,3,4,5];
  // ES5
  /*
  var v = arr[0];
  var list = arr.slice(1);
  console.log(v,list);//1 [ 2, 3, 4, 5 ]
  */
  
  // 利用扩展运算符
  var [v,...list] = arr;
  // SyntaxError: Rest element must be last element，扩展运算符元素必须是必须是最后一个元素
  // var [...v,list] = arr;----报错
  console.log(v,list);//1 [ 2, 3, 4, 5 ]
  

• 字符串转换为数组

  var str = '123';
  // ES5
  console.log(str.split(''));//[ '1', '2', '3' ]
  
  // ES6
  console.log([...str]);//[ '1', '2', '3' ]