JavaScript展開操作符(Spread operator)詳解
你可以通過展開操作符(Spread operator)...擴(kuò)展一個數(shù)組對象和字符串。展開運(yùn)算符(spread)是三個點(diǎn)(…),可以將可迭代對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。如同rest參數(shù)的逆運(yùn)算。
用于數(shù)組
以數(shù)組為例,首先創(chuàng)建一個數(shù)組,
const a = [1, 2, 3], b = [4,5,6];
你可以輕松賦值一個數(shù)組:
const c = [...a] // [1,2,3]
你還可以輕松拼接兩個數(shù)組:
const d = [...a,...b] // [1,2,3,4,5,6]
也可以如下拼接
const d = [...a,4, 5, 6] // [1,2,3,4,5,6]
如果要把一個數(shù)組b的元素全部插入到數(shù)組a的后面(不生成新數(shù)組),可以這樣操作:
const a = [1,2,3]; a.push(...b);
如果要把一個數(shù)組b的元素全部插入到數(shù)組a的前面(不生成新數(shù)組),可以這樣操作:
const a = [1,2,3]; a. unshift(...b);
類數(shù)組對象變成數(shù)組
可以通過展開運(yùn)算符把類數(shù)組對象變成真正的數(shù)組:
var list=document.getElementsByTagName('a'); var arr=[..list];
用于對象
展開操作符同樣可以用于對象??梢酝ㄟ^以下方式clone一個對象:
const newObj = { ...oldObj }
注意: 如果屬性值是一個對象,那么只會生成一個指向該對象的引用,而不會深度拷貝。也就是說,展開運(yùn)算符不會遞歸地深度拷貝所有屬性。并且,只有可枚舉屬性會被拷貝,原型鏈不會被拷貝。
還可以用于merge兩個對象。
const obj1 = { a: 111, b: 222 }; const obj2 = { c: 333, d: 444 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }
當(dāng)然也可以適用于以下的情況:
const others = {third: 3, fourth: 4, fifth: 5} const items = { first:1, second:1, ...others } items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
如果merge的多個對象有相同屬性,則后面的對象的會覆蓋前面對象的屬性,比如
const obj1 = { a: 111, b: 222 }; const obj2 = { b: 333, d: 444 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // -> { a: 111, b: 333, d: 444 } const obj1 = {a:111,b:222} const merged = {a:222,...obj1}; console.log(merged); // -> { a: 111, b: 333 } const obj1 = {a:111,b:222} const merged = {...obj1,a:222}; console.log(merged); // -> { a: 222, b: 333 }
用于字符串
通過展開操作符,可以把一個字符串分解成一個字符數(shù)組,相當(dāng)于
const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y']
以上代碼相當(dāng)于:
const hey = 'hey' const arrayized = hey.split('') // ['h', 'e', 'y']
用于函數(shù)傳參
通過展開操作符,可以通過數(shù)組給函數(shù)傳參:
const f = (foo, bar) => {} const a = [1, 2] f(...a) const numbers = [1, 2, 3, 4, 5] const sum = (a, b, c, d, e) => a + b + c + d + e const sum = sum(...numbers)
用于具有 Iterator 接口的對象
具有 Iterator 接口的對象Map 和 Set 結(jié)構(gòu),Generator 函數(shù),可以使用展開操作符,比如:
var s = new Set(); s.add(1); s.add(2); var arr = [...s]// [1,2] function * gen() { yield 1; yield 2; yield 3; } var arr = [...gen()] // 1,2,3
如果是map,會把每個key 和 value 轉(zhuǎn)成一個數(shù)組:
var m = new Map(); m.set(1,1) m.set(2,2) var arr = [...m] // [[1,1],[2,2]]
注意以下代碼會報錯,因?yàn)閛bj不是一個Iterator對象:
var obj = {'key1': 'value1'}; var array = [...obj]; // TypeError: obj is not iterable
以上就是全部相關(guān)知識點(diǎn),感謝大家的閱讀和對腳本之家的支持。
相關(guān)文章
JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法小結(jié)
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-10-10Javascript基礎(chǔ)教程之函數(shù)對象和屬性
這篇文章主要介紹了Javascript基礎(chǔ)教程之函數(shù)對象和屬性,需要的朋友可以參考下2015-01-01淺析JavaScript 箭頭函數(shù) generator Date JSON
下面小編就為大家?guī)硪黄獪\析JavaScript 箭頭函數(shù) generator Date JSON。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05分享我學(xué)習(xí)js的過程 作者aircy javascript學(xué)習(xí)教程
分享我學(xué)習(xí)js的過程 作者aircy javascript學(xué)習(xí)教程...2007-02-02總結(jié)javascript三元運(yùn)算符知識點(diǎn)
這是一篇關(guān)于javascript三元運(yùn)算符的相關(guān)基礎(chǔ)知識點(diǎn)內(nèi)容,大家可以學(xué)習(xí)一下鞏固基礎(chǔ)知識。2018-09-09javaScript中的this示例學(xué)習(xí)詳解及工作原理
這篇文章主要介紹了javaScript中的this示例學(xué)習(xí)詳解及工作原理,大家參考使用吧2014-01-01IE不支持getElementsByClassName最終完美解決方案
目前可以這么解決,判斷瀏覽器支不支持這個方法,如果支持就不管;如果不支持,就在document對象里加入getElementsByClassName這個方法,按興趣的朋友可以了解下2012-12-12