一文教會你如何在JavaScript中使用展開運算符
前言
在本教程中,您將了解在 JavaScript 中使用擴展運算符的不同方式,以及擴展運算符和剩余運算符之間的主要區(qū)別。
由三個點 ( ...
) 表示,JavaScript 擴展運算符是在 ES6 中引入的。它可用于將集合和數(shù)組中的元素擴展為單個單獨的元素。
擴展運算符可用于創(chuàng)建和克隆數(shù)組和對象、將數(shù)組作為函數(shù)參數(shù)傳遞、從數(shù)組中刪除重復(fù)項等等。
語法
擴展運算符只能用于可迭代對象。它必須在可迭代對象之前使用,沒有任何分隔。例如:
console.log(...arr);
功能以及參數(shù)
以Math.min()方法為例。此方法接受至少一個數(shù)字作為參數(shù),并返回傳遞的參數(shù)中最小的數(shù)字。
如果您有一個數(shù)字數(shù)組并且您想找到這些數(shù)字中的最小值,那么在沒有展開運算符的情況下,您需要使用它們的索引一個一個地傳遞元素,或者使用apply()方法來傳遞數(shù)組作為參數(shù)。例如:
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
請注意,第一個參數(shù)是null
,因為第一個參數(shù)用于更改this
調(diào)用函數(shù)的值。
擴展運算符是將數(shù)組元素作為參數(shù)傳遞給函數(shù)的更方便和可讀的解決方案。例如:
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(numbers); // 13
創(chuàng)建數(shù)組
擴展運算符可用于從現(xiàn)有數(shù)組或其他包含Symbol.iterator()方法的可迭代對象創(chuàng)建新數(shù)組。這些是可以使用for...of
循環(huán)迭代的對象。
例如,它可用于克隆數(shù)組。如果您只是將現(xiàn)有數(shù)組的值分配給新數(shù)組,則對新數(shù)組進行更改將更新現(xiàn)有數(shù)組:
const numbers = [15, 13, 100, 20]; const clonedNumbers = numbers; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20, 24]
通過使用擴展運算符,可以將現(xiàn)有數(shù)組克隆到一個新數(shù)組中,并且對新數(shù)組所做的任何更改都不會影響現(xiàn)有數(shù)組:
const numbers = [15, 13, 100, 20]; const clonedNumbers = [...numbers]; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20]
應(yīng)該注意的是,這只會克隆一維數(shù)組。它不適用于多維數(shù)組。
擴展運算符也可用于將多個數(shù)組連接為一個。例如:
const evenNumbers = [2, 4, 6, 8]; const oddNumbers = [1, 3, 5, 7]; const allNumbers = [...evenNumbers, ...oddNumbers]; console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]
您還可以在字符串上使用擴展運算符來創(chuàng)建一個數(shù)組,其中每個項目都是字符串中的一個字符:
const str = 'Hello, World!'; const strArr = [...str]; console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']
創(chuàng)建對象
擴展運算符可以以不同的方式用于創(chuàng)建對象。
它可用于淺克隆另一個對象。例如:
const obj = { name: 'Mark', age: 20}; const clonedObj = { ...obj }; console.log(clonedObj); // {name: 'Mark', age: 20}
它還可以用于將多個對象合并為一個。例如:
const obj1 = { name: 'Mark', age: 20}; const obj2 = { occupation: 'Student' }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}
需要注意的是,如果對象共享相同的屬性名稱,將使用最后一個對象展開的值。例如:
const obj1 = { name: 'Mark', age: 20}; const obj2 = { age: 30 }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 30}
擴展運算符可用于從數(shù)組創(chuàng)建對象,其中數(shù)組中的索引成為屬性,該索引處的值成為屬性的值。例如:
const numbers = [15, 13, 100, 20]; const obj = { ...numbers }; console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}
它還可以用于從字符串創(chuàng)建對象,其中,字符串中的索引成為屬性,該索引處的字符成為屬性的值。例如:
const str = 'Hello, World!'; const obj = { ...str }; console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}
將 NodeList 轉(zhuǎn)換為數(shù)組
NodeList是節(jié)點的集合,它們是文檔中的元素。元素通過集合中的方法訪問,例如item
or entries
,與數(shù)組不同。
您可以使用擴展運算符將 NodeList 轉(zhuǎn)換為 Array。例如:
const nodeList = document.querySelectorAll('div'); console.log(nodeList.item(0)); // <div>...</div> const nodeArray = [...nodeList]; console.log(nodeList[0]); // <div>...</div>
從數(shù)組中刪除重復(fù)項
Set對象是一個僅存儲唯一值的集合。與 NodeList 類似,可以使用擴展運算符將 Set 轉(zhuǎn)換為數(shù)組。
由于 Set 僅存儲唯一值,因此可以將其與擴展運算符配對以從數(shù)組中刪除重復(fù)項。例如:
const duplicatesArr = [1, 2, 3, 2, 1, 3]; const uniqueArr = [...new Set(duplicatesArr)]; console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3] console.log(uniqueArr); // [1, 2, 3]
擴展運算符與休息運算符
rest 運算符也是一個三點運算符 ( ...
),但它用于不同的目的。rest 運算符可以在函數(shù)的參數(shù)列表中使用,表示該函數(shù)接受未定義數(shù)量的參數(shù)。這些參數(shù)可以作為數(shù)組處理。
例如:
function calculateSum(...funcArgs) { let sum = 0; for (const arg of funcArgs) { sum += arg; } return sum; }
在此示例中,rest 運算符用作calculateSum
函數(shù)的參數(shù)。然后,您循環(huán)遍歷數(shù)組中的項目并將它們相加以計算它們的總和。
然后,您可以將變量一個一個地calculateSum
作為參數(shù)傳遞給函數(shù),或者使用擴展運算符將數(shù)組的元素作為參數(shù)傳遞:
console.log(calculateSum(1, 2, 3)); // 6 const numbers = [1, 2, 3]; console.log(calculateSum(...numbers)); // 6
結(jié)論
擴展運算符允許您用更少的代碼行做更多的事情,同時保持代碼的可讀性。它可以用于可迭代對象以將參數(shù)傳遞給函數(shù),或從其他可迭代對象創(chuàng)建數(shù)組和對象。
總結(jié)
到此這篇關(guān)于如何在JavaScript中使用展開運算符的文章就介紹到這了,更多相關(guān)JS使用展開運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js動態(tài)獲取子復(fù)選項并設(shè)計全選及提交的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動態(tài)獲取子復(fù)選項并設(shè)計全選及提交的實現(xiàn)方法。小編覺得挺不錯的, 現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06js窗口關(guān)閉提示信息(兼容IE和firefox)
這篇文章主要介紹了當(dāng)關(guān)閉窗口的時候,顯示窗口提示信息,友好的進行提示,防止丟失重要信息,需要的朋友可以參考一下2015-10-10javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼
這篇文章主要介紹了javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼,需要的朋友可以參考下2014-05-05如何實現(xiàn)修改密碼時密碼框顯示保存到cookie的密碼
修改密碼時密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可,感興趣的朋友可以了解下2013-12-12