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