数组的扩展运算符

Posted 2021-02-07 xlj-code

一、基本使用

ES6中函数可以使用 rest参数 接收函数的多余参数，组成一个数组，放在形参的最后面。

let fn = (a, ...value) => {
    console.log(a);
    console.log(value[0], value[1]);
};
add(10, 20, 30);
// 10
// 20 30

数组中的扩展运算符就好比 rest参数 的逆运算，将一个数组转为用逗号分隔的参数序列(也就是展开数组)，在语法上，用三个点表示（...）。

var fruits = [‘apple‘, ‘banana‘, ‘orange‘];
console.log(...fruits);   // apple banana orange

 

二、取代apply

扩展运算符主要应用于函数的调用，比如下面这种情况给俩个数求和,在ES5中可以使用 apply 方法实现:

let add = (a, b) => a + b;
let arr = [10, 20];
let result = add.apply(null, arr);
console.log(result);   // 30

现在不必了，直接使用扩展运算符即可:

let add = (a, b) => a + b;
let arr = [10, 20];
console.log(add(...arr));   // 30

而且可以放置于形参中的任意位置，这点和 rest参数 不同:

let add = (a, b, c, d) => a + b + c + d;
let arr = [20, 30];
console.log(add(10, ...arr, 40));   // 100

下面是俩个比较实用的取代 apply 方法例子:

// 1、取出一个数字数组中的最大值

// ES5
let arr = [10, 15, 5, 20, 10];
alert(Math.max.apply(null, arr));   // 20

// ES6
let arr = [10, 15, 5, 20, 10];
alert(Math.max(...arr));   // 20

----------------------------------------------

// 2、将一个数组添加到一个数组里

// ES5
let arr1 = [10, 20];
let arr2 = [30, 40];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);   // [ 10, 20, 30, 40 ]
console.log(arr2);   // [ 30, 40 ]

// ES6
let arr1 = [10, 20];
let arr2 = [30, 40];
arr1.push(...arr2);
console.log(arr1);   // [ 10, 20, 30, 40 ]
console.log(arr2);   // [ 30, 40 ]

 

三、其他运用的地方

1、复制数组

在ES5中如果你这样复制数组式其实是不对的:

let arr1 = [10, 20];
let arr2 = arr1;
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20, 30 ]

因为数组式复合类型的数据，复制的仅仅是指针，其中一个数组发生变化，另一个数组当然随之变化。

因此需要这样做:

let arr1 = [10, 20];
let arr2 = arr1.concat();
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20 ]

现在ES6使用扩展运算符更加方便:

let arr1 = [10, 20];
let arr2 = [...arr1];
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20 ]

 

2、合并数组

ES5中合并数组可以这样做:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = arr1.concat(arr2);
arr1.push(50);
console.log(arr1);   // [ 10, 20, 50 ]
console.log(arr2);   // [ 30, 40 ]
console.log(arr3);   // [ 10, 20, 30, 40 ]

ES6中又有了新写法:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = [...arr1, ...arr2];
arr1.push(50);
console.log(arr1);   // [ 10, 20, 50 ]
console.log(arr2);   // [ 30, 40 ]
console.log(arr3);   // [ 10, 20, 30, 40 ]

注意：

以上俩种写法都是浅拷贝，合并成员是复合类型的数据就要注意了:

let arr1 = [{user: ‘tom‘}];
let arr2 = [{user: ‘jack‘}];
let arr3 = arr1.concat(arr2);
let arr4 = [...arr1, ...arr2];
alert(arr1[0] === arr3[0]);   // true
alert(arr1[0] === arr4[0]);   // true

原因还是这些对象成员拷贝的是地址。