es6基礎(chǔ)0x007：展開(kāi)

RyanQ 發(fā)布于2019-08-23 13:02 / 2750人閱讀

摘要：概述展開(kāi)符號(hào)真的是一個(gè)非常好用的東西，我常用于字符串分割數(shù)組合并數(shù)組拷貝對(duì)象合并對(duì)象拷貝。

0x000 概述

展開(kāi)符號(hào)真的是一個(gè)非常好用的東西，我常用于字符串分割、數(shù)組合并、數(shù)組拷貝、對(duì)象合并、對(duì)象拷貝。

0x001 語(yǔ)法

...iterableObj

0x002 函數(shù)調(diào)用的時(shí)候參數(shù)展開(kāi)

這是在函數(shù)調(diào)用的時(shí)候，將參數(shù)展開(kāi)，和剩余參數(shù)有區(qū)別，剩余參數(shù)是在函數(shù)聲明中使用

myFunction(...iterableObj);

案例

function add(a, b){
    return a + b
}
add(...[1,2]) // 相當(dāng)于 add(1,2) -> 3

0x003 數(shù)組聲明展開(kāi)

可用于數(shù)組合并

[...[1,2,3],4] // 相當(dāng)于[1,2,3].push(4) -> [1,2,3,4]
[..."1234"] // 相當(dāng)于 "1234".split("")

0x004 對(duì)象展開(kāi)

可用于對(duì)象合并、對(duì)象拷貝

{...{name:1},age:2} // 相當(dāng)于 Objeact.assign({},{name:1},{age:2}) -> {name:1,age:2}
{...{name:1}} // 相當(dāng)于 Object.assign({},{name:1}) -> {name:1}

0x005 babel 翻譯

字符串/數(shù)組展開(kāi)

源碼

[..."1234"]

翻譯后

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

[].concat(_toConsumableArray("1234"));

對(duì)象展開(kāi)

源碼

let a={...{name:1}}

翻譯后

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var a = _extends({ name: 1 });

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99170.html

相關(guān)文章

es6基礎(chǔ)0x015：for...of

摘要：概述是一個(gè)迭代可迭代對(duì)象的方式，可迭代對(duì)象包括對(duì)象等等語(yǔ)法迭代數(shù)組迭代字符串迭代迭代迭代迭代集合總結(jié)只能迭代可迭代對(duì)象 0x000 概述 for...of是一個(gè)迭代可迭代對(duì)象的方式，可迭代對(duì)象包括Array、Map、Set、String、TypedArray、arguments 對(duì)象等等 0x001 語(yǔ)法 for(variable of iterable){ // statem...

luxixing 2019-08-23 13:12 評(píng)論0 收藏0
es6基礎(chǔ)0x012：Map

摘要：概述也是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，在中其實(shí)也經(jīng)常用到，比如下面的栗子，我們經(jīng)常這么使用一個(gè)對(duì)象，與其說(shuō)他是對(duì)象，其實(shí)他更像一個(gè)，但是比起真正的，這個(gè)還是有點(diǎn)弱了，初始化初始化一個(gè)有一個(gè)可選的參數(shù)，該參數(shù)必須是一個(gè)可迭代對(duì)象，可迭代對(duì)象包括和用戶(hù)定 0x000 概述 Map也是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，在js中其實(shí)也經(jīng)常用到，比如下面的栗子，我們經(jīng)常這么使用一個(gè)對(duì)象，與其說(shuō)他是對(duì)象，其實(shí)他更像一個(gè)Map...

DesGemini 2019-08-23 13:09 評(píng)論0 收藏0
es6基礎(chǔ)0x021：反射

摘要：概述反射說(shuō)起來(lái)和上一章節(jié)的代理基本一樣，只是使用的方式不同，設(shè)計(jì)理念也不同。 0x000 概述反射說(shuō)起來(lái)和上一章節(jié)的代理基本一樣，只是使用的方式不同，設(shè)計(jì)理念也不同。反射提供了一系列的靜態(tài)函數(shù)，可以使用Reflect.function_name(...prams)調(diào)用，這一系列的方法和代理的處理器對(duì)象方法一致 0x001 apply 語(yǔ)法 Reflect.apply(targ...

booster 2019-08-26 13:21 評(píng)論0 收藏0
es6基礎(chǔ)0x009：模板字符串

摘要：概述模板字符串出來(lái)以后，單引號(hào)雙引號(hào)哪個(gè)好的爭(zhēng)論可以退出歷史舞臺(tái)的，模板字符串的最好語(yǔ)法單行文本多行文本內(nèi)嵌表達(dá)式標(biāo)簽語(yǔ)法不太喜歡單行文本完全不單引號(hào)和雙引號(hào)，當(dāng)然，轉(zhuǎn)義是不可避免的，有所得必有所失去嘛多行文本，也不用關(guān)系換行的編碼轉(zhuǎn)化問(wèn)題 0x000 概述模板字符串出來(lái)以后，單引號(hào)、雙引號(hào)哪個(gè)好的爭(zhēng)論可以退出歷史舞臺(tái)的，模板字符串的`最好！ 0x001 語(yǔ)法單行文本 `str...

zhaochunqi 2019-08-23 13:07 評(píng)論0 收藏0
es6基礎(chǔ)0x011：Set

摘要：概述是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語(yǔ)言的特性差不多，當(dāng)然，作為中的，他還是有一些屬于的特點(diǎn)。 0x000 概述 Set是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語(yǔ)言的特性差不多，當(dāng)然，作為js中的Set，他還是有一些屬于js的特點(diǎn)。 0x001 初始化 new Set([iterable]); 初始化一個(gè)Set有一個(gè)可選的參數(shù)，這個(gè)參數(shù)必須是一個(gè)可迭代的對(duì)象，可迭代對(duì)象包括String、Array、Arr...

jsyzchen 2019-08-23 13:09 評(píng)論0 收藏0