站長資訊網
es6數組可以用展開符。展開符“…”會將可迭代對象展開到其單獨的元素中，而所謂的可迭代對象就是任何能用“for of”循環進行遍歷的對象，例如數組、字符串、Map 、Set；當展開符用于數組，可以將一個數組轉為用逗號分隔的參數序列。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
展開符（擴展操作符） … 是ES6中引入的，將可迭代對象展開到其單獨的元素中，所謂的可迭代對象就是任何能用for of循環進行遍歷的對象，例如：數組、字符串、Map 、Set 、DOM節點等。
展開運算符（spread operator）允許一個表達式在某處展開。展開運算符在多個參數（用于函數調用）或多個元素（用于數組字面量）或者多個變量（用于解構賦值）的地方可以使用。
es6展開符的使用（數組方面）
1、復制數組
給定一個數組，想要將一個數組的成員復制到另一個數組中，該怎么做？
const a = [1, 2]; const b = a; console.log(b); // [1, 2]
登錄后復制
真有表面上這么簡單嗎？試著修改一下a數組中的值
a[0] = 3; console.log(b); // [3, 2]
登錄后復制
誒？怎么我修改了a數組中的值，結果b數組中的值也變了？這里涉及到的是堆棧的原理，就不具體展開說了，你只需要知道簡單地使用兩邊相等的方式是不能完成數組的復制的，這里使用展開運算符就可以完成啦?
const a = [1, 2]; const c = [...a]; console.log(c); // [1, 2] a[0] = 3; console.log(c); // [1, 2]
登錄后復制
2、合并數組
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、字符串轉為數組
前置知識：字符串可以按照數組的形式展開?
const name = 'Jae'; console.log(...name); // J a e
登錄后復制
字符串轉數組除了用 split() 方法，也可以用展開運算符?
const name = 'Jae'; const name_string = [...name]; console.log(name_string); // ["J", "a", "e"]
登錄后復制
4、常見的類數組轉化為數組
為什么要將類數組轉化為數組呢？因為類數組不能使用數組的方法，將其轉化過來對于一些對數據進行處理的需求就更加方便了 ~
-
arguments
function func() { console.log(arguments); } func(1, 2); // Arguments(2) [1, 2, callee: ?, Symbol(Symbol.iterator): ?] // 使用展開遠算符 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]
登錄后復制
【
