本文例項講述了es6陣列之擴充套件運算子操作。分享給大家供大家參考，具體如下：

擴充套件運算子(spread)是三個點(…)。它好比rest引數的逆運算，將一個數組轉為用逗號分隔的引數序列。

console.log(...[1,2,3])
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]

該運算子主要用於函式呼叫。

function push(array,...items) {
 array.push(...items)
}
function add(x,y) {
 return x + y
}

const numbers = [4,38]
add(...numbers) // 42

上面程式碼中，array.push(…items)和add(…numbers)這兩行，都是函式的呼叫，它們的都使用了擴充套件運算子。該運算子將一個數組，變為引數序列。

擴充套件運算子與正常的函式引數可以結合使用，非常靈活。

function f(v,w,x,y,z) {}
const args = [0,1]
f(-1,...args,...[3])

擴充套件運算子後面還可以放置表示式。

const arr = [
 ...(x > 0 ? ['a'] : []),'b'
]

如果擴充套件運算子後面是一個空陣列，則不產生任何效果。

[...[],1]

注意，擴充套件運算子如果放在括號中，javaScript引擎就會認為這是函式呼叫。如果這時不是函式呼叫，就會報錯。

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

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

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

上面前兩種情況都會報錯，因為擴充套件運算子所在的括號不是函式呼叫，而第三種情況console.log(…[1,2])就不會報錯，因為這時是函式呼叫。

下面是擴充套件運算子取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。

// ES5的寫法
Math.max.apply(null,[14,77])

// ES6的寫法
Math.max(...[14,77])

// 等同於
Math.max(14,77)

上面程式碼中，由於javaScript不提供求陣列最大元素的函式，所以只能套用Math.max函式，將陣列轉為一個引數序列，然後求最大值。有了擴充套件運算子以後，就可以直接用Math.max了。

另一個例子是通過push函式，將一個數組新增到另一個數組的尾部。

// ES5 的寫法
var arr1 = [0,1,2]
var arr2 = [3,4,5]
Array.prototype.push.apply(arr1,arr2)
// ES6的寫法
let arr1 = [0,2]
let arr2 = [3,5]
arr1.push(...arr2)

上面程式碼的ES5寫法中，push方法的引數不能是陣列，所以只好通過apply方法變通使用push方法。有了擴充套件運算子，就可以直接將陣列傳push方法。

下面是另外一個例子。

// ES5
new (Date.bind.appy(Date,[null,2015,1]))
// ES6
new Date(...[2015,1])

擴充套件運算子的應用

1）複製陣列

陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是克隆一個全新的陣列。

const a1 = [1,2]
const a2 = a1 
a2[0] = 2
a1 // [2,2]

上面程式碼中，a2並不是a1的克隆，而是指向同一份資料的另一個指標，修改a2，會直接導致a1的變化。

ES5只能用變通方法來複制陣列。

const a1 = [1,2]
const a2 = a1.concat()

a2[0] = 2 
a1 //[1,2]

ES6寫法

const a1 = [1,2]
// 寫法1
const a2 = [...a1]
// 寫法2
const [...a2] = a1

2)合併陣列

擴充套件運算子提供了數組合並的新寫法。

const arr1 = ['a','b']
const arr2 = ['c']
const arr3 = ['d','e']
// ES5的合併陣列
arr1.concat(arr2,arr3)
// ES6的合併陣列
[...arr1,...arr2,...arr3]

不過，這兩種方法都是淺拷貝，使用的時候需要注意。

const a1 = [{foo: 1}]
const a2 = [{bar: 2}]
const a3 = a1.concat(a2)
const a4 = [...a1,...a2]

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面程式碼中，a3和a4是用兩種不同方法合併而成的新陣列，但是它們的成員都是對原陣列成員的引用，這就是淺拷貝，如果修改了原陣列的成員，會同步反映到新陣列。

3）與解構賦值結合

擴充套件運算子可以與解構賦值結合起來，用於生成陣列。

// ES5 
a = list[0],rest = list.slice(1)
// ES6
[a,...rest] = list

下面是另外一些例子。

const [first,...rest] = [1,5]
first // 1
rest // [2,5]

const [first,...rest] = []
first // undefined
rest // []

如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。

const [...butLast,last] = [1,5];
// 報錯

const [first,...middle,5];
// 報錯

（4）字串

擴充套件運算子還可以將字串轉為真正的陣列。

[...'hello']
// [ "h","e","l","o" ]

對於那些沒有部署Iterator介面的類似陣列的物件，擴充套件運算子就無法將其轉為真正的陣列。

let arrayLike = {
 '0': 'a','1': 'b',length:２
}

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面程式碼中，arrayLike是一個類似陣列的物件，但是沒有部署 Iterator 介面，擴充套件運算子就會報錯。這時，可以改為使用Array.from方法將arrayLike轉為真正的陣列。

擴充套件運算子內部呼叫的是資料結構的 Iterator 介面，因此只要具有 Iterator 介面的物件，都可以使用擴充套件運算子，比如 Map 結構。

let map = new Map([
 [1,'one'],[2,'two'],[3,'three'],]);

let arr = [...map.keys()]; // [1,3]

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。