es6數(shù)組可以用展開(kāi)符。展開(kāi)符“…”會(huì)將可迭代對(duì)象展開(kāi)到其單獨(dú)的元素中，而所謂的可迭代對(duì)象就是任何能用“for of”循環(huán)進(jìn)行遍歷的對(duì)象，例如數(shù)組、字符串、Map 、Set；當(dāng)展開(kāi)符用于數(shù)組，可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

展開(kāi)符（擴(kuò)展操作符） … 是ES6中引入的，將可迭代對(duì)象展開(kāi)到其單獨(dú)的元素中，所謂的可迭代對(duì)象就是任何能用for of循環(huán)進(jìn)行遍歷的對(duì)象，例如：數(shù)組、字符串、Map 、Set 、DOM節(jié)點(diǎn)等。

展開(kāi)運(yùn)算符（spread operator）允許一個(gè)表達(dá)式在某處展開(kāi)。展開(kāi)運(yùn)算符在多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或者多個(gè)變量（用于解構(gòu)賦值）的地方可以使用。

es6展開(kāi)符的使用（數(shù)組方面）

1、復(fù)制數(shù)組

給定一個(gè)數(shù)組，想要將一個(gè)數(shù)組的成員復(fù)制到另一個(gè)數(shù)組中，該怎么做？

const a = [1, 2]; const b = a; console.log(b); // [1, 2]

真有表面上這么簡(jiǎn)單嗎？試著修改一下a數(shù)組中的值

a[0] = 3; console.log(b); // [3, 2]

誒？怎么我修改了a數(shù)組中的值，結(jié)果b數(shù)組中的值也變了？這里涉及到的是堆棧的原理，就不具體展開(kāi)說(shuō)了，你只需要知道簡(jiǎn)單地使用兩邊相等的方式是不能完成數(shù)組的復(fù)制的，這里使用展開(kāi)運(yùn)算符就可以完成啦?

const a = [1, 2]; const c = [...a]; console.log(c); // [1, 2] a[0] = 3; console.log(c); // [1, 2]

2、合并數(shù)組

const a = [1, 2]; const b = [3]; const c = [4, 5];  console.log([...a, ...b, ...c]); // [1, 2, 3, 4, 5] console.log([...c, ...a, ...b]); // [4, 5, 1, 2, 3] console.log([99, ...a, 24, ...b, ...c]); // [99, 1, 2, 24, 3, 4, 5]

3、字符串轉(zhuǎn)為數(shù)組

前置知識(shí)：字符串可以按照數(shù)組的形式展開(kāi)?

const name = 'Jae'; console.log(...name); // J a e

字符串轉(zhuǎn)數(shù)組除了用 split() 方法，也可以用展開(kāi)運(yùn)算符?

const name = 'Jae'; const name_string = [...name]; console.log(name_string); // ["J", "a", "e"]

4、常見(jiàn)的類數(shù)組轉(zhuǎn)化為數(shù)組

為什么要將類數(shù)組轉(zhuǎn)化為數(shù)組呢？因?yàn)轭悢?shù)組不能使用數(shù)組的方法，將其轉(zhuǎn)化過(guò)來(lái)對(duì)于一些對(duì)數(shù)據(jù)進(jìn)行處理的需求就更加方便了 ~

• arguments

function func() { 	console.log(arguments); } func(1, 2); // Arguments(2) [1, 2, callee: ?, Symbol(Symbol.iterator): ?]  // 使用展開(kāi)遠(yuǎn)算符 function func() { 	console.log([...arguments]); } func(1, 2); // [1, 2]

• NodeList

<!--HTML代碼--> <p>1</p> <p>2</p> <p>3</p>

const a = document.querySelectAll("p"); console.log(a); // NodeList(3) [p, p, p] console.log([...a]); // [p, p, p]

【