JavaScript中使用Spread運算符的八種方法總結(jié)
Spread運算符
允許從 iterable 表達(dá)式（如另一個數(shù)組文本）初始化部分?jǐn)?shù)組文本，或允許表達(dá)式擴(kuò)展到多個參數(shù)（在函數(shù)調(diào)用中）。
語法
var array = [[arg0ToN ,] ...iterable [, arg0ToN]]
func([args ,] ...iterable [, args | ...iterable])
參數(shù)
iterable
必需。 迭代對象。
arg0ToN
可選。 數(shù)組文本的一個或多個元素。
args
可選。 函數(shù)的一個或多個參數(shù)。
本文將帶大家了解如何在JavaScript中使用Spread（延展操作）運算符。
ES6中引入了延展操作運算符（...）。
延展操作運算符將可迭代的對象擴(kuò)展為其單獨的元素，可迭代對象是可以使用 for 循環(huán)進(jìn)行循環(huán)的任何對象。
可迭代的示例：Array，String，Map，Set，DOM節(jié)點。
1.在log中使用延展操作運算符
你可以在 console.log 中對可迭代對象使用延展操作操作符
let fruits = ['🍈', '🍉', '🍋', '🍌']; console.log(...fruits); //🍈 🍉 🍋 🍌
2.用延展操作運算符復(fù)制數(shù)組
let fruits = ['🍈', '🍉', '🍋', '🍌']; let fruitsCopy = [ ...fruits ]; console.log(...fruitsCopy); //🍈 🍉 🍋 🍌
復(fù)制對象
let user = {name : "John", age : 20 }
let userCopy = {...user}
延展操作運算符不執(zhí)行深度復(fù)制。
3.延展操作運算符合并
let fruits = ['🍈', '🍉', '🍋', '🍌']; let vegetables = ['🍅', '🍆', '🥒']; let fruitsAndVeg = [...fruits, ...vegetables]
合并對象
合并對象時，如果已經(jīng)存在某個鍵，則將其替換為具有相同鍵的最后一個對象。
let user1 = {name : "John", age : 20 };
let user2 = {name : "Ram", salary: '20K' };
let userCopy = {...user1, ...user2};
userCopy ; // {name : "Ram", age :20 , salary : '20K'};
4.延展操作運算符作為參數(shù)傳遞
function sum(a, b) {
return a+b;
}
let num = [1,2];
sum(...num); // 3
與 math 函數(shù)一起使用
let num = [5,9,3,5,7]; Math.min(...num); Math.max(...num);
5.延展操作運算符在解構(gòu)變量中
let [melon, ...fruits ] = ['🍉', '🍋', '🍌', '🍊']; melon; //🍉 fruits; // [ '🍋', '🍌', '🍊']
解構(gòu)對象
let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" };
let { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};
6.將NodeList對象轉(zhuǎn)換為數(shù)組
NodeList類似于數(shù)組，但是沒有 Array 的所有方法，例如 forEach，map，filter 等。
let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]
7.將字符串轉(zhuǎn)換為字符
字符串也是可迭代的對象，因此我們也可以使用 ... 來字符串。
let name = "Ram"; let chars = [...name]; // ["R", "a", "m"]
8.從數(shù)組中刪除重復(fù)項
let num = [1, 3, 1, 3, 3, 1]; let uniqueNum = [...new Set(num)]; uniqueNum; //[ 1, 3 ]
總結(jié)
到此這篇關(guān)于JavaScript中使用Spread運算符的八種方法就介紹到這了,更多相關(guān)JavaScript使用Spread運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js倒計時代碼，可以精確到天和精確到秒2013-11-11
純js代碼實現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
本章節(jié)介紹一下如何實現(xiàn)未知寬高的元素在指定元素下實現(xiàn)垂直水平居中效果，代碼簡單易懂，需要的朋友可以參考下本文2015-09-09
游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理，并對音效組件進(jìn)行封裝，方便以后使用，同學(xué)們看完之后，一定要親手實驗一下2021-04-04
這篇文章主要介紹了js實現(xiàn)簡單的日歷顯示效果函數(shù),結(jié)合完整實例形式分析了JavaScript實現(xiàn)的日歷功能相關(guān)原理與具體操作技巧,需要的朋友可以參考下2019-11-11
this,this,再次討論javascript中的this,超全面(經(jīng)典)
在JavaScript中，this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?，this 還是隨處可用的。這篇文章介紹了javascript中的this相關(guān)知識，對javascript this相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
在JavaScript中使用嚴(yán)格模式(Strict Mode)
這篇文章主要介紹了在JavaScript中使用嚴(yán)格模式(Strict Mode),除了正常運行模式，ECMAscript 5添加了第二種運行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運行。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了JS調(diào)用安卓手機(jī)攝像頭掃描二維碼，并用JS解析二維碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
webpack 是一個模塊打包器,這篇文章主要介紹了webpack5 常用插件使用問題小結(jié),每次打包完都需要手動刪除掉dist文件目錄,使用CleanWebpackPlugin就可自動清除dist目錄,感興趣的朋友跟隨小編一起看看吧2024-02-02
微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本文分享了js倒計時顯示的實例，需要的朋友可以參考借鑒，下面就跟小編一起來看看吧2016-12-12