建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
擴(kuò)展語(yǔ)法—Spread Syntax(…) 是 ES6 中引入的一個(gè)新特性，它允許我們從可迭代對(duì)象中快速提取元素。使用這種語(yǔ)法，我們可以避免使用大量復(fù)雜的 API，編寫(xiě)更簡(jiǎn)潔的代碼。看完這篇文章，相信你會(huì)喜歡這個(gè)功能的。
創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供沿河網(wǎng)站建設(shè)、沿河做網(wǎng)站、沿河網(wǎng)站設(shè)計(jì)、沿河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、沿河企業(yè)網(wǎng)站模板建站服務(wù)，十多年沿河做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
1、復(fù)制一個(gè)數(shù)組
復(fù)制數(shù)組的傳統(tǒng)方法是使用數(shù)組的切片方法。
let arr = [1, 2, 3, [4, 5]];
let copy = arr.slice()
console.log(copy)
// [1, 2, 3, [4, 5]];;
但是， slice 方法最初是為了捕獲數(shù)組的片段，而不是復(fù)制它們。這個(gè) API 很容易忘記，但是使用擴(kuò)展語(yǔ)法非常簡(jiǎn)單明了：
2、復(fù)制一個(gè)對(duì)象
要復(fù)制對(duì)象，您可以使用 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"}使用擴(kuò)展語(yǔ)法
let user = { name: 'bytefish', url: 'https://bytefish.medium.com'}
let copy = {...user}
console.log(copy);輸出：
Object {name: "bytefish", url: "https://bytefish.medium.com"}使用擴(kuò)展語(yǔ)法，您可以提取對(duì)象的所有可枚舉屬性并將它們添加到新對(duì)象中。
3、將元素添加到數(shù)組的開(kāi)頭或結(jié)尾
在數(shù)組的開(kāi)頭和結(jié)尾添加元素是一項(xiàng)頻繁的任務(wù)，數(shù)組提供了 push 和 unshift 方法：
let arr = [3]
arr.unshift(1, 2)
arr.push(4, 5)
console.log(arr);
輸出：
[1, 2, 3, 4, 5]
如果我們使用擴(kuò)展語(yǔ)法，代碼會(huì)更加簡(jiǎn)潔易懂：
let arr = [3]
let copy = [1, 2, ...arr, 4, 5]
console.log(copy);
輸出：
[1, 2, 3, 4, 5]
注意：arr.push 和 arr.unshift 修改當(dāng)前數(shù)組，而擴(kuò)展語(yǔ)法創(chuàng)建一個(gè)新數(shù)組。你應(yīng)該根據(jù)自己的需求選擇合適的方法。
4、合并數(shù)組
傳統(tǒng)方式：
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr1.concat( arr2 )
console.log(arr3);
使用擴(kuò)展語(yǔ)法：
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3);
輸出
[1, 2, 3, 4, 5, 6]
5、合并對(duì)象
傳統(tǒng)方式：
let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = Object.assign({}, p1, p2)
console.log(p3) ;輸出
Object {name: "bytefish", tag: "JavaScript"}使用擴(kuò)展語(yǔ)法：
let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = {...p1, ...p2}
console.log(p3) ;輸出
Object {name: "bytefish", tag: "JavaScript"}
6、 將字符串轉(zhuǎn)換為數(shù)組
傳統(tǒng)方式：
let str = 'bytefish'
let arr = str.split('')
console.log(arr) ;
?輸出
["b", "y", "t", "e", "f", "i", "s", "h"]
使用擴(kuò)展語(yǔ)法：
let str = 'bytefish'
let arr = [...str]
console.log(arr) ;
輸出
["b", "y", "t", "e", "f", "i", "s", "h"]
7、 將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組
JavaScript 中的一些數(shù)據(jù)結(jié)構(gòu)看起來(lái)像數(shù)組但不是數(shù)組，例如 NodeList、函數(shù)的參數(shù)對(duì)象等。
與數(shù)組一樣，它們是順序結(jié)構(gòu)，其中的元素可以通過(guò)索引訪問(wèn)。但是它們沒(méi)有普通數(shù)組的一些屬性和方法。
function sum(){
console.log(arguments)
console.log(arguments instanceof Array)
}
sum(1, 2, 3);輸出
Arguments {0: 1, 1: 2, 2: 3}
false為了使用這些類(lèi)似數(shù)組的對(duì)象，我們有時(shí)需要將它們轉(zhuǎn)換為數(shù)組。
傳統(tǒng)方式：
function foo(){
let argArray = Array.from(arguments)
console.log(argArray instanceof Array)
}
foo();輸出：
true
使用擴(kuò)展語(yǔ)法：
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 的表示法是相同的，都是用三個(gè)點(diǎn)（…）表示。但它們也有一些微妙的區(qū)別：
- Rest 語(yǔ)法將所有剩余元素收集到一個(gè)數(shù)組或?qū)ο笾小?/li>
- 擴(kuò)展語(yǔ)法將收集的元素（例如數(shù)組）解壓縮為單個(gè)元素。
這里還有幾個(gè)同樣使用Spread Syntax （…）的例子，理論上應(yīng)該屬于 Rest Syntax。雖然Spread語(yǔ)法和Rest語(yǔ)法相似，但我認(rèn)為沒(méi)有必要關(guān)心這些概念上的細(xì)微差別。所以我也會(huì)在這里放幾個(gè) Rest Syntax 用法的例子。
8、提取對(duì)象
假設(shè)有一個(gè)對(duì)象：
let httpOptions = {
method: 'POST',
url: 'https://api.github.com',
returnType: 'json',
timeout: 2000,
data: {
name: 'bytefish'
}
}我們想拿到這個(gè)對(duì)象的method和url，把其他字段放在一起，怎么辦呢？
使用擴(kuò)展語(yǔ)法，我們可以這樣寫(xiě)：
提取這個(gè)對(duì)象的屬性只需要一行代碼，幾乎找不到更簡(jiǎn)潔的寫(xiě)法。
9、無(wú)限參數(shù)的函數(shù)
假設(shè)我們需要編寫(xiě)一個(gè)求和函數(shù)，它可以接受任意數(shù)量的參數(shù)并將它們相加。我們?nèi)绾尉帉?xiě)這樣的函數(shù)？
新手程序員可能想知道一個(gè)函數(shù)如何可以接受無(wú)限數(shù)量的參數(shù)。他可能會(huì)使用一個(gè)數(shù)組作為參數(shù)并編寫(xiě)如下內(nèi)容：
function sum(arr){
return arr.reduce((acc, cur) => acc + cur)
}
console.log(sum([1, 2, 3, 4]));不過(guò)這種寫(xiě)法需要我們把參數(shù)組合成一個(gè)數(shù)組來(lái)傳遞，不是很優(yōu)雅。一個(gè)更好的想法是使用函數(shù)的參數(shù)對(duì)象來(lái)動(dòng)態(tài)讀取參數(shù)。
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;如果我們使用擴(kuò)展語(yǔ)法，我們可以直接將所有參數(shù)組合在一起：
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;這樣，無(wú)論我們傳遞多少個(gè)參數(shù)，它們都會(huì)被放在 arr 中。這顯然比第一個(gè)更優(yōu)雅，也比第二個(gè)更方便。
Math.max
許多 JavaScript 內(nèi)置函數(shù)都使用這種技術(shù)，例如 Math.max。
如您所見(jiàn)，Math.max 可以接受任意數(shù)量的參數(shù)。
如果我們想獲得數(shù)組中的最大或最小數(shù)字，我們可以這樣寫(xiě)：
let arr = [23, 34, 53, 3]
console.log(Math.max(...arr))
console.log(Math.min(...arr));
輸出
53
3
10、Rest Parameters
除了上面的用法，我們還可以使用rest參數(shù)。假設(shè)我們有一個(gè)函數(shù)，它的前兩個(gè)參數(shù)是固定的，其余參數(shù)是不確定的，所以我們可以這樣寫(xiě)：
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');
結(jié)論
我們終于學(xué)會(huì)了它，在 JavaScript 中使用擴(kuò)展語(yǔ)法的 10 種方法。我希望你發(fā)現(xiàn)它對(duì)你很有用。如果是這樣，請(qǐng)務(wù)必在評(píng)論中告訴我。
當(dāng)前題目：十個(gè)關(guān)于JavaScriptSpreadSyntax(...)的強(qiáng)大用途
文章地址：http://m.fisionsoft.com.cn/article/ccesdei.html
