ES6數組的擴展運算符

1、基本使用

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

 

2、取代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 方法例子:

// 一、取出一個數字數組中的最大值

// 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

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

// 二、將一個數組添加到一個數組裏

// 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 ]

 

3、其餘運用的地方

一、複製數組

在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 ]

 

二、合併數組

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

緣由仍是這些對象成員拷貝的是地址。