JavaScript Spread Syntax (…）的十種使用方法

Posted on by

前言

擴展語法—Spread Syntax(…) 是 ES6 中引入的一個新特性，它允許我們從可迭代對象中快速提取元素。使用這種語法，我們可以避免使用大量復雜的 API，編寫更簡潔的代碼。看完這篇文章，相信你會喜歡這個功能的。

1、復制一個數組

復制數組的傳統方法是使用數組的切片方法。

let arr = [1, 2, 3, [4, 5]];
let copy = arr.slice()
console.log(copy)
// [1, 2, 3, [4, 5]];;

但是， slice 方法最初是為瞭捕獲數組的片段，而不是復制它們。這個 API 很容易忘記，但是使用擴展語法非常簡單明瞭：

2、復制一個對象

要復制對象，您可以使用 Object.assign() ：

let user = { name: 'bytefish', url: 'https://bytefish.medium.com'}
let copy = Object.assign({}, user)
console.log(copy);

輸出：

Object {name: "bytefish", url: "https://bytefish.medium.com"}

使用擴展語法：

let user = { name: 'bytefish', url: 'https://bytefish.medium.com'}
let copy = {...user}
console.log(copy);

輸出:

Object {name: "bytefish", url: "https://bytefish.medium.com"}

使用擴展語法，您可以提取對象的所有可枚舉屬性並將它們添加到新對象中。

3、將元素添加到數組的開頭或結尾

在數組的開頭和結尾添加元素是一項頻繁的任務，數組提供瞭 push 和 unshift 方法：

let arr = [3]
arr.unshift(1, 2)
arr.push(4, 5)
console.log(arr);

輸出：

[1, 2, 3, 4, 5]

如果我們使用擴展語法，代碼會更加簡潔易懂：

let arr = [3]
let copy = [1, 2, ...arr, 4, 5]
console.log(copy);

輸出：

[1, 2, 3, 4, 5]

註意：arr.push 和 arr.unshift 修改當前數組，而擴展語法創建一個新數組。你應該根據自己的需求選擇合適的方法。

4、合並數組

傳統方式：

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr1.concat( arr2 )
console.log(arr3);

使用擴展語法：

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3);

輸出:

[1, 2, 3, 4, 5, 6]

5、合並對象

傳統方式：

let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = Object.assign({}, p1, p2)
console.log(p3) ;

輸出:

Object {name: "bytefish", tag: "JavaScript"}

使用擴展語法：

let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = {...p1, ...p2}
console.log(p3) ;

輸出:

Object {name: "bytefish", tag: "JavaScript"}

6、 將字符串轉換為數組

傳統方式：

let str = 'bytefish'
let arr = str.split('')
console.log(arr) ;

‍輸出:

["b", "y", "t", "e", "f", "i", "s", "h"]

使用擴展語法：

let str = 'bytefish'
let arr = [...str]
console.log(arr) ;

輸出:

["b", "y", "t", "e", "f", "i", "s", "h"]

7、 將類數組對象轉換為數組

JavaScript 中的一些數據結構看起來像數組但不是數組，例如 NodeList、函數的參數對象等。

與數組一樣，它們是順序結構，其中的元素可以通過索引訪問。但是它們沒有普通數組的一些屬性和方法。

function sum(){
 console.log(arguments)
 console.log(arguments instanceof Array)
}
sum(1, 2, 3);

輸出:

Arguments {0: 1, 1: 2, 2: 3}
false

為瞭使用這些類似數組的對象，我們有時需要將它們轉換為數組。

傳統方式：

function foo(){
 let argArray = Array.from(arguments)
 console.log(argArray instanceof Array)
}
foo();

輸出：

true

使用擴展語法：

function sum(){
 console.log(arguments)
 let argArray = [...arguments]
 console.log(argArray instanceof Array)
}
sum(1, 2, 3);
Arguments {0: 1, 1: 2, 2: 3}
true

在 JavaScript 中，Rest Syntax 和 Spread Syntax 的表示法是相同的，都是用三個點（…）表示。

但它們也有一些微妙的區別：

  • Rest 語法將所有剩餘元素收集到一個數組或對象中。
  • 擴展語法將收集的元素（例如數組）解壓縮為單個元素。

這裡還有幾個同樣使用Spread Syntax （…）的例子，理論上應該屬於 Rest Syntax。雖然Spread語法和Rest語法相似，但我認為沒有必要關心這些概念上的細微差別。所以我也會在這裡放幾個 Rest Syntax 用法的例子。

8、提取對象

假設有一個對象：

let httpOptions = {
 method: 'POST',
 url: 'https://api.github.com',
 returnType: 'json',
 timeout: 2000,
 data: {
   name: 'bytefish'
 }
}

我們想拿到這個對象的method和url，把其他字段放在一起，怎麼辦呢？

使用擴展語法，我們可以這樣寫：

提取這個對象的屬性隻需要一行代碼，幾乎找不到更簡潔的寫法。

9、無限參數的函數

假設我們需要編寫一個求和函數，它可以接受任意數量的參數並將它們相加。我們如何編寫這樣的函數？

新手程序員可能想知道一個函數如何可以接受無限數量的參數。他可能會使用一個數組作為參數並編寫如下內容：

function sum(arr){
 return arr.reduce((acc, cur) => acc + cur)
}
console.log(sum([1, 2, 3, 4]));

不過這種寫法需要我們把參數組合成一個數組來傳遞，不是很優雅。一個更好的想法是使用函數的參數對象來動態讀取參數。

function sum() {
    let argsArray = Array.from(arguments)
   return argsArray.reduce((acc, cur) => acc + cur)
}
console.log( sum(1, 2, 3, 4) ) // 10
console.log( sum(1, 3, 5, 7) ) // 16;

如果我們使用擴展語法，我們可以直接將所有參數組合在一起：

function sum(...arr) {
   return arr.reduce((acc, cur) => acc + cur)
}
console.log( sum(1, 2, 3, 4) ) // 10
console.log( sum(1, 3, 5, 7) ) // 16;

這樣，無論我們傳遞多少個參數，它們都會被放在 arr 中。這顯然比第一個更優雅，也比第二個更方便。

Math.max

許多 JavaScript 內置函數都使用這種技術，例如 Math.max。

如您所見，Math.max 可以接受任意數量的參數。

如果我們想獲得數組中的最大或最小數字，我們可以這樣寫：

let arr = [23, 34, 53, 3]
console.log(Math.max(...arr))
console.log(Math.min(...arr));

輸出:

53
3

10、Rest Parameters

除瞭上面的用法，我們還可以使用rest參數。假設我們有一個函數，它的前兩個參數是固定的，其餘參數是不確定的，所以我們可以這樣寫：

function team(leader, viceLeader, ...members){
 console.log('leader: ' + leader)
 console.log('vice leader: ' + viceLeader)
 members.forEach(member => console.log('member: ' + member))
}
team('Jon', 'Jack', 'Bob', 'Alice');

輸出:

function team(leader, viceLeader, …members){
 console.log('leader: ' + leader)
 console.log('vice leader: ' + viceLeader)
 members.forEach(member => console.log('member: ' + member))
}
team('Jon', 'Jack', 'Bob', 'Alice');

結論

我們終於學會瞭它，在 JavaScript 中使用擴展語法的 10 種方法。我希望你發現它對你很有用。如果是這樣，請務必在評論中告訴我。

到此這篇關於JavaScript Spread Syntax (…）的十種使用方法的文章就介紹到這瞭,更多相關JS 擴展語法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：