展開語法

Billy Chu in Kaohsiung

2020-03-06

將陣列組合在一起時，有許多不同的方式，還記得剛接觸 JavaScript 時，我使用的是以下的方法，但往往在過了幾天後回頭看，都要看一下子才意會的過來。

let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', 'e', 'f'];

let arr3 = arr1.concat(arr2);

console.log(arr3); // ["a", "b", "c", "d", "e", "f"]

# Spread Syntax

直到看到了 ES6 中的展開語法，就像發現新大陸一樣，也比以往更容易閱讀。

let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', 'e', 'f'];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // ["a", "b", "c", "d", "e", "f"]

當遇到要將一個陣列Ａ賦值給到陣列 B 時，會因為陣列及物件是傳參考的特性，在變更陣列 B 的同時陣列 A 也會隨之改變，這時候也適合使用展開語句。

let arr1 = ['a', 'b', 'c'];
let arr2 = arr1;

arr2.push('d');

console.log(arr1); // ["a", "b", "c", "d"]
console.log(arr2); // ["a", "b", "c", "d"]

let arr1 = ['a', 'b', 'c'];
let arr2 = [...arr1];

arr2.push('d');

console.log(arr1); // ["a", "b", "c"]
console.log(arr2); // ["a", "b", "c", "d"]

類陣列是指以數值索引的值所成的群集，它可能是串列但並非真正的陣列，例如：DOM 物件操作後所得到的串列。為了能操作這些類陣列的元素，就必須將類陣列轉為真正的陣列，這樣就能進行 indexOf、concat、forEach 等的操作了。

在獲取 DO Ｍ元素時，也會得到一個類陣列。

let list = document.getElementsByTagName('li');

console.log(list); // HTMLCollection(9) [li, li, li, li, li, li, li, li, li]

透過使用展開語句的方式，即可將類陣列轉為真正的陣列摟。

let list = document.getElementsByTagName('li');

list = [...list];

console.log(list); // [li, li, li, li, li, li, li, li, li]

當傳入函式的值沒有宣告時，所有傳入的值都會變成類陣列，這時候也可以使用這個方法獲得真正的陣列。

function test() {
  let args = [...arguments];

  console.log(args);
}

test(1, 2, 3, 4, 5, 6, 7, 8); // [1, 2, 3, 4, 5, 6, 7, 8]

傳入函式的值，如果要將沒有被宣告的部分組成一個陣列，也可以使用。

function test(a, b, ...group) {
  console.log(group);
}

test(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // [3, 4, 5, 6, 7, 8, 9, 10]