数组的扩展

数组的扩展

扩展运算符

扩展运算符（spread）用三个点表示(...)，作用是将一个数组转为用逗号分隔的参数列表，是函数rest参数的逆向操作。

var array = [1,2];
console.log(...array);

上面的代码使用扩展运算符逐个输出数组中的元素。console.log(...array)相当于console.log(array[0],array[1])

var array = [1,2];
function add(x,y){
   
    return x+y;
}
add(...array);//3

add(...array)相当于add(array[0],array[1])

扩展运算符也可以与函数的正确参数一起使用

var array = [1,2];
function add(unit,x,y,z){
   
    return x+y+z+(unit);
}
add('元',...array,3);//6元

扩展运算符后面也可以放表达式

var flag=-1;
var array = [0,...(flag>=0?[1,2]:[-1,-2])];
console.log(...array);//0 -1 -2

上面的代码通过flag决定array后两位元素内容，在使用扩展运算符转换为参数列表传递给log函数

如果扩展运算符作用于一个空数组，则不产生任何效果

var array=[1,...[]];
console.log(array);//[1]

注意：只有在调用函数，将数组转为参数列表时，扩展运算符才能放在圆括号里，其他情况下不能放在圆括号里。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

上面三种情况，都是将扩展运算符放在圆括号里，但是前两种会报错，因为扩展运算符所在的圆括号不是函数调用。

用途

1. 代替函数的apply方法

es5中如果想找出数字类型数组中最大元素，想将一个数组追加到另一个数组中，我们会使用函数的apply方法这样写

//es5写法：找出数组中最大的元素
var array = [2,7,4,3];
var result = Math.max.apply(null,array);
console.log(result);

//es5写法：将一个数组追加到另一个数组中
var array = [2,7,4,3];
var tailArray = [11,22];
Array.prototype.push.apply(array,tailArray);
console.log(array);//[2, 7, 4, 3, 11, 22]

apply()有两个参数，第一个是当前作用域，即this对象；第二个参数是一个数组，数组中的元素会作为函数实例的入参，数组元素的位置与函数实例参数列表一一对应

es6使用扩展运算符的写法

var array = [2,7,4,3];
var result = Math.max(...array);
console.log(result);//7

var array = [2,7,4,3];
var tailArray = [11,22];
array.push(...tailArray);
console.log(array);//[2, 7, 4, 3, 11, 22]

2. 复制数组

数组是复合类型数据结构，把一个数组变量赋值给另一个数组变量，只不过是复制了指针，两个数组都指向一个内容，并没有达到克隆数组的目的
es5可通过使用数组concat()方法变通实现

var a1 = [1,2];
var a2 = a1.concat();
console.log(a2);//false

es5中的扩展运算符实现

//方式一
var a1 = [1,2];
var a2 =