摘要:原文鏈接航洋無聲擴(kuò)展運(yùn)算符,看起來和參數(shù)外觀相似,也是三個點,不過和參數(shù)功能可是不一樣呢擴(kuò)展運(yùn)算符號,分二種情況一般情況為數(shù)組一般情況為對象在標(biāo)準(zhǔn)的中,只有針對數(shù)據(jù)實現(xiàn)了擴(kuò)展運(yùn)算符它把數(shù)據(jù)的數(shù)據(jù)序列轉(zhuǎn)換為用逗號分割的參數(shù)序列比如此行代碼
原文鏈接 - 航洋無聲 - Github
擴(kuò)展運(yùn)算符,看起來和 rest 參數(shù) 外觀相似,也是三個點「...」,
不過和 rest 參數(shù)功能可是不一樣呢
擴(kuò)展運(yùn)算符號,分二種情況
iterable「一般情況為數(shù)組」
enumerable「一般情況為對象」
在標(biāo)準(zhǔn)的 ES2015 中,只有針對 iterable 數(shù)據(jù)實現(xiàn)了擴(kuò)展運(yùn)算符
它把 iterable 數(shù)據(jù)的數(shù)據(jù)序列轉(zhuǎn)換為用 逗號分割的參數(shù)序列
比如:
let array = [5, 12] let arrayCopy = [11, ...array] // 此行代碼類似于:let arrayCopy = [11, 5, 12] // arrayCopy ==> [11, 5, 12] console.log(...[5, 12]) console.log(5, 12) // 上面 2 行代碼意義一樣 // 輸出結(jié)果都是是:5 12
經(jīng)過上面的 2 個列子,
應(yīng)該能更好的理解「擴(kuò)展運(yùn)算符的結(jié)果是 逗號分隔的參數(shù)序列」的含義
不過有個需要注意的點:
非 iterable 數(shù)據(jù)執(zhí)行擴(kuò)展運(yùn)算符,會報錯
在 ES7 的 某個提案 中,
講擴(kuò)展運(yùn)算符引入 enumerable 數(shù)據(jù)
比如:
let obj = {name: "hangyangws"} let objCopy = {...obj} console.log(objCopy) // 輸出:{name: "hangyangws"}
其實 enumerable 數(shù)據(jù)的擴(kuò)展運(yùn)算符底層實現(xiàn)是利用了 Object.assign
Object.assign(target, ...sources) 我們比較熟悉,有 2 個特點:
sources 參數(shù)如果是「原始類型」會被包裝為「對象」
sources 參數(shù)如果是 null 和 undefined 會被忽略
比如:
Object.assign({}, null) // 結(jié)果為:{} Object.assign({}, undefined) // 結(jié)果為:{} Object.assign({}, 0) // 結(jié)果為:{} Object.assign({}, "FJ") // 結(jié)果為:{0: "F", 1: "J"} // 所以有個點可以注意一下: // 只有字符串的包裝對象才可能有自身可枚舉屬性 // 對于「數(shù)字」,結(jié)果和 null、undefined 類似
既然擴(kuò)展運(yùn)算符有 2 種情況,那么 JS 解釋器怎么知道使用哪一種?
所以擴(kuò)展運(yùn)算符會根據(jù)代碼的具體的 執(zhí)行上下文 判斷
比如:
let test = [...null] // 報錯:null is not iterable let test = {...null} // test ===> {}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92462.html
摘要:將數(shù)組中的每個元素展開為函數(shù)參數(shù)擴(kuò)展運(yùn)算符取代方法的一個實際的例子,應(yīng)用方法,簡化求出一個數(shù)組最大元素的寫法。 歡迎訪問我的個人博客:http://www.xiaolongwu.cn 前言 記錄一下在實際開發(fā)中,很有用的三個es6的新方法 用法詳解 默認(rèn)參數(shù) function f(x, y=13) { // 如果沒有傳入y或傳入了undefined,y的默認(rèn)值為13 retur...
摘要:下面針對對象時使用和時的個鮮為人知的技巧。對屬性進(jìn)行排序有時性質(zhì)并不按照我們需要的順序排列。若要將移到最后一個屬性,請從對象中解構(gòu)。默認(rèn)屬性默認(rèn)屬性是僅當(dāng)它們不包含在原始對象中時才設(shè)置的值。 showImg(https://segmentfault.com/img/remote/1460000018610267?w=800&h=530); [譯]使用 JavaScript 對象 Res...
摘要:本文介紹的展開操作符。你可以通過展開操作符擴(kuò)展一個數(shù)組對象和字符串。展開運(yùn)算符是三個點可以將可迭代對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。也就是說,展開運(yùn)算符不會遞歸地深度拷貝所有屬性。在計算機(jī)圖形學(xué)前端可視化方面有深入研究。 本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學(xué)者。 你可以通過展開操作符(Spread operator)...擴(kuò)展...
摘要:本文介紹的展開操作符。你可以通過展開操作符擴(kuò)展一個數(shù)組對象和字符串。展開運(yùn)算符是三個點可以將可迭代對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。也就是說,展開運(yùn)算符不會遞歸地深度拷貝所有屬性。在計算機(jī)圖形學(xué)前端可視化方面有深入研究。 本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學(xué)者。 你可以通過展開操作符(Spread operator)...擴(kuò)展...
閱讀 2299·2021-09-30 09:47
閱讀 2218·2021-09-26 09:55
閱讀 2945·2021-09-24 10:27
閱讀 1539·2019-08-27 10:54
閱讀 966·2019-08-26 13:40
閱讀 2493·2019-08-26 13:24
閱讀 2418·2019-08-26 13:22
閱讀 1726·2019-08-23 18:38