成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

擴(kuò)展運(yùn)算符「spread」的交談

awesome23 / 2296人閱讀

摘要：原文鏈接航洋無聲擴(kuò)展運(yùn)算符，看起來和參數(shù)外觀相似，也是三個(gè)點(diǎn)，不過和參數(shù)功能可是不一樣呢?cái)U(kuò)展運(yùn)算符號，分二種情況一般情況為數(shù)組一般情況為對象在標(biāo)準(zhǔn)的中，只有針對數(shù)據(jù)實(shí)現(xiàn)了擴(kuò)展運(yùn)算符它把數(shù)據(jù)的數(shù)據(jù)序列轉(zhuǎn)換為用逗號分割的參數(shù)序列比如此行代碼

原文鏈接 - 航洋無聲 - Github

擴(kuò)展運(yùn)算符，看起來和 rest 參數(shù) 外觀相似，也是三個(gè)點(diǎn)「...」，
不過和 rest 參數(shù)功能可是不一樣呢

擴(kuò)展運(yùn)算符號，分二種情況

iterable「一般情況為數(shù)組」

enumerable「一般情況為對象」

在標(biāo)準(zhǔn)的 ES2015 中，只有針對 iterable 數(shù)據(jù)實(shí)現(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 個(gè)列子，
應(yīng)該能更好的理解「擴(kuò)展運(yùn)算符的結(jié)果是 逗號分隔的參數(shù)序列」的含義

不過有個(gè)需要注意的點(diǎn)：
非 iterable 數(shù)據(jù)執(zhí)行擴(kuò)展運(yùn)算符，會報(bào)錯(cuò)

在 ES7 的 某個(gè)提案 中，
講擴(kuò)展運(yùn)算符引入 enumerable 數(shù)據(jù)

比如：

let obj = {name: "hangyangws"}
let objCopy = {...obj}
console.log(objCopy) // 輸出：{name: "hangyangws"}

其實(shí) enumerable 數(shù)據(jù)的擴(kuò)展運(yùn)算符底層實(shí)現(xiàn)是利用了 Object.assign

Object.assign(target, ...sources) 我們比較熟悉，有 2 個(gè)特點(diǎn)：

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"}
// 所以有個(gè)點(diǎn)可以注意一下：
// 只有字符串的包裝對象才可能有自身可枚舉屬性
// 對于「數(shù)字」，結(jié)果和 null、undefined 類似

既然擴(kuò)展運(yùn)算符有 2 種情況，那么 JS 解釋器怎么知道使用哪一種？
所以擴(kuò)展運(yùn)算符會根據(jù)代碼的具體的 執(zhí)行上下文 判斷

比如：

let test = [...null]
// 報(bào)錯(cuò)：null is not iterable

let test = {...null}
// test ===> {}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92462.html

相關(guān)文章

  • es6 -- 默認(rèn)參數(shù)Default，不定參數(shù)Rest，擴(kuò)展運(yùn)算符Spread詳解

    摘要：將數(shù)組中的每個(gè)元素展開為函數(shù)參數(shù)擴(kuò)展運(yùn)算符取代方法的一個(gè)實(shí)際的例子，應(yīng)用方法，簡化求出一個(gè)數(shù)組最大元素的寫法。 歡迎訪問我的個(gè)人博客：http://www.xiaolongwu.cn 前言 記錄一下在實(shí)際開發(fā)中，很有用的三個(gè)es6的新方法 用法詳解 默認(rèn)參數(shù) function f(x, y=13) { // 如果沒有傳入y或傳入了undefined，y的默認(rèn)值為13 retur...

    Betta 評論0 收藏0

  • [譯]使用 JavaScript 對象 Rest 和 Spread 的7個(gè)技巧

    摘要：下面針對對象時(shí)使用和時(shí)的個(gè)鮮為人知的技巧。對屬性進(jìn)行排序有時(shí)性質(zhì)并不按照我們需要的順序排列。若要將移到最后一個(gè)屬性，請從對象中解構(gòu)。默認(rèn)屬性默認(rèn)屬性是僅當(dāng)它們不包含在原始對象中時(shí)才設(shè)置的值。 showImg(https://segmentfault.com/img/remote/1460000018610267?w=800&h=530); [譯]使用 JavaScript 對象 Res...

    alexnevsky 評論0 收藏0

  • JavaScript展開操作符(Spread operator)介紹

    摘要：本文介紹的展開操作符。你可以通過展開操作符擴(kuò)展一個(gè)數(shù)組對象和字符串。展開運(yùn)算符是三個(gè)點(diǎn)可以將可迭代對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。也就是說，展開運(yùn)算符不會遞歸地深度拷貝所有屬性。在計(jì)算機(jī)圖形學(xué)前端可視化方面有深入研究。 本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學(xué)者。 你可以通過展開操作符(Spread operator)...擴(kuò)展...

    ningwang 評論0 收藏0

  • JavaScript展開操作符(Spread operator)介紹

    摘要：本文介紹的展開操作符。你可以通過展開操作符擴(kuò)展一個(gè)數(shù)組對象和字符串。展開運(yùn)算符是三個(gè)點(diǎn)可以將可迭代對象轉(zhuǎn)為用逗號分隔的參數(shù)序列。也就是說，展開運(yùn)算符不會遞歸地深度拷貝所有屬性。在計(jì)算機(jī)圖形學(xué)前端可視化方面有深入研究。 本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學(xué)者。 你可以通過展開操作符(Spread operator)...擴(kuò)展...

    codergarden 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<