国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

ES6指北【5】——展開(kāi)語(yǔ)法(spread syntax)

ZoomQuiet / 1457人閱讀

摘要：我們先來(lái)看一看的官方定義展開(kāi)語(yǔ)法可以在函數(shù)調(diào)用數(shù)組構(gòu)造時(shí)將數(shù)組表達(dá)式或者在語(yǔ)法層面展開(kāi)還可以在構(gòu)造字面量對(duì)象時(shí)將對(duì)象表達(dá)式按的方式展開(kāi)。

我們先來(lái)看一看MDN的官方定義

展開(kāi)語(yǔ)法(Spread syntax), 可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí), 將數(shù)組表達(dá)式或者string在語(yǔ)法層面展開(kāi)；
還可以在構(gòu)造字面量對(duì)象時(shí), 將對(duì)象表達(dá)式按key-value的方式展開(kāi)。(譯者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 這種簡(jiǎn)潔的構(gòu)造方式)

從定義我們可以了解到展開(kāi)語(yǔ)法的使用場(chǎng)景如下

函數(shù)調(diào)用

數(shù)組構(gòu)造

構(gòu)造字面量對(duì)象(ES2018)

作用如下

展開(kāi)數(shù)組

展開(kāi)字符串

展開(kāi)對(duì)象（只能用于構(gòu)造字面量對(duì)象）

1. 在函數(shù)調(diào)用時(shí)使用 
// 展開(kāi)數(shù)組
console.log(...[1,2,3]) // 1 2 3

// 展開(kāi)字符串
console.log(..."hello world") // h e l l o   w o r l d

// 展開(kāi)對(duì)象【無(wú)法使用，會(huì)報(bào)錯(cuò)】
console.log(...{a:1}) // Uncaught TypeError
1.1 與rest參數(shù)對(duì)比

在函數(shù)調(diào)用時(shí)使用展開(kāi)語(yǔ)法時(shí)，需要特別注意數(shù)組、字符串其實(shí)是被展開(kāi)成了參數(shù)序列。
還記得rest參數(shù)是將參數(shù)都都收集為數(shù)組嗎？
展開(kāi)語(yǔ)法正好是它的逆運(yùn)算——將數(shù)組展開(kāi)為參數(shù)
還有注意的是rest參數(shù)在函數(shù)定義時(shí)使用【處理形參】，展開(kāi)語(yǔ)法在函數(shù)調(diào)用時(shí)使用【處理實(shí)參】，可能有些拗口，下面看個(gè)例子大家就明白了

function test(x, y, ...params) {
  // 定義一個(gè)函數(shù)時(shí)，使用的是rest參數(shù)
  console.log(...params) // 調(diào)用一個(gè)函數(shù)時(shí)，使用的是rest參數(shù)
}
1.2 作為apply的語(yǔ)法糖 
let numArr = [1, 10, 2, 234]
Math.max.apply(null, numArr)
// 完全等價(jià)于
Math.max(...numArr) // 將numArr展開(kāi)為參數(shù)序列
1.3 在new的時(shí)候使用

因?yàn)閚ew的時(shí)候是無(wú)法調(diào)用apply的，所以展開(kāi)語(yǔ)法這個(gè)時(shí)候起到了很牛X的作用

function Person(name, age, weight) {
  this.name = name
  this.age = age
  this.weight = weight
}

let blues = new Person("blueswong", "16", "60")
// 完全等價(jià)于
let blues = new Person(...["blueswong", "16", "60"])

這在需要生產(chǎn)很多個(gè)實(shí)例時(shí)，非常有用

function Person(name, age, weight) {
  this.name = name
  this.age = age
  this.weight = weight
}

let persons = [["blues1", "16", "60"], ["blues2", "16", "60"], ["blues3", "16", "60"]]
let createdPersons = {}
persons.forEach(e => {
  console.log(e[0])
  createdPersons[e[0]] = new Person(...e)
})
2. 在數(shù)組構(gòu)造時(shí)使用 
// 展開(kāi)數(shù)組
let arr1 = [1, 2, 3]
let arr2 = [0, ...arr1, 4] // [0, 1, 2, 3, 4]

// 展開(kāi)字符串
let arr1 = [1, 2, 3, ..."456"] // [1, 2, 3, "4", "5", "6"]
2.1 代替將已有數(shù)組元素插入到新數(shù)組重的所有API 
以往我們將已有數(shù)組的元素插入到新數(shù)組的中，需要借用一些API例如push/unshift/splice/concat，現(xiàn)在我們使用展開(kāi)語(yǔ)法可以對(duì)上述api進(jìn)行替換。
需要特別強(qiáng)調(diào)的是，這在創(chuàng)建新數(shù)組的時(shí)候才比較方便


let arr = [4, 5]
let arr2 = [6, 7, 8]
// 在數(shù)組任意位置增加元素
let newArr1 = [1, 2, 3, ...arr] // [1, 2, 3, 4, 5]
let newArr2 = [...arr, 1, 2, 3] // [4, 5, 1, 2, 3]
let newArr3 = [1, ...arr, 2, 3] // [1, 4, 5, 2, 3]
let newArr4 = [1, 2, ...arr, 3] // [1, 2, 4, 5, 3]
// 連接兩個(gè)數(shù)組
let newArr5 = [...arr, ...arr2] // [4, 5, 6, 7, 8]

如果是對(duì)原有的數(shù)組進(jìn)行操作，原有API+在函數(shù)調(diào)用中使用展開(kāi)語(yǔ)法比較方便

2.2 實(shí)現(xiàn)對(duì)數(shù)組的淺拷貝 
let obj = {a: 1}
let arr = [2, 1, "的", obj]
// 在數(shù)組任意位置增加元素
let newarr = [...arr] // [2, 1, "的", {a: 1}]

// 但僅僅是淺拷貝，新數(shù)組中的{a:1}與obj還是指向了相同的內(nèi)存
newarr[3].a = 2
console.log(obj) // {a: 2}
3. 在構(gòu)造字面量對(duì)象時(shí)使用 3.1 實(shí)現(xiàn)對(duì)象的淺拷貝 
常見(jiàn)的實(shí)現(xiàn)對(duì)象淺拷貝的方法
let obj = {a: "10", b: {c: 10}, d: [1, 2, 3]}

// 1. 遍歷
let newObj = {}
for (let key in obj) {
  newObj[key] = obj[key]
}
console.log(newObj)

// 2.使用assign
let newObj1 = Object.assign({}, obj)
console.log(newObj1)
使用展開(kāi)語(yǔ)法實(shí)現(xiàn)
let newObj2 = {...obj}
由于這是ES2018的語(yǔ)法，現(xiàn)在瀏覽器支持的并不到位，因此筆者就不做過(guò)多介紹了。大家可以去mdn上查看

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

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

相關(guān)文章

  • ES6指北【4】——ES6的函數(shù)參數(shù)處理，超乎你想象

    摘要：參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。從上面的概念中，我們至少可以知道如下三個(gè)信息語(yǔ)法變量。 一、函數(shù)的默認(rèn)參數(shù)值 1. ES6之前，我們?nèi)绾螌?shí)現(xiàn)函數(shù)默認(rèn)參數(shù) 1.1 方式一：使用邏輯運(yùn)算符【||】 function test(x) { x = x || 默認(rèn)值 // 使用||設(shè)置默認(rèn)值 console.log(x) } test() // 默認(rèn)值 但這樣...

    Pandaaa 評(píng)論0 收藏0

  • ES6：spread syntax —— JavaScript 將元素應(yīng)用于數(shù)組和函數(shù)的優(yōu)雅方法

    摘要：也就是說(shuō)如果一個(gè)數(shù)組中的元素發(fā)生改變，那么另一個(gè)數(shù)組中的元素也相應(yīng)地發(fā)生改變。依照函數(shù)定義，可以使用把數(shù)組元素應(yīng)用于函數(shù)。應(yīng)用于對(duì)象字面值這個(gè)特征是基于的附加特征。 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7 英文連接：ES6: The spread sy...

    xuweijian 評(píng)論0 收藏0

  • babel使用方法總結(jié)

    摘要：在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件，注意這是個(gè)配置文件，以點(diǎn)號(hào)開(kāi)頭，沒(méi)有后綴。提供了一種可以在瀏覽器中使用的方法，只需兩步就能一勞永逸。 1.在命令行中使用 Babel Babel 官方推薦將 Babel 安裝在本地，因?yàn)?Babel 的不同版本以及不同轉(zhuǎn)碼規(guī)則會(huì)起到不同的效果，全局安裝會(huì)帶來(lái)不必要的麻煩。在命令提示符中轉(zhuǎn)到自己的項(xiàng)目目錄下： npm install --save-dev ba...

    沈儉 評(píng)論0 收藏0

  • es6必會(huì)之let && const

    摘要：副作用，無(wú)副作用可執(zhí)行和關(guān)鍵詞。和不能像一樣同一個(gè)下聲明多次和不會(huì)像一樣變量聲明提升原因是，存在因此不能，賦值前使用變量。 showImg(https://segmentfault.com/img/bVbhPlD?w=1271&h=715); 關(guān)鍵詞： let ，const， blocking scope ，temporal dead zone，redeclaration，reassi...

    ygyooo 評(píng)論0 收藏0

  • ES6 ...操作符

    摘要：在語(yǔ)法中，操作符有兩種意義剩余語(yǔ)法，參數(shù)和展開(kāi)語(yǔ)法，展開(kāi)數(shù)組對(duì)象，作為函數(shù)數(shù)組對(duì)象的擴(kuò)展運(yùn)算符。使用和參數(shù)進(jìn)行操作其余參數(shù)傳給原始函數(shù)展開(kāi)語(yǔ)法運(yùn)算則可以看作是參數(shù)的逆運(yùn)算。 在ES6語(yǔ)法中，...操作符有兩種意義：rest(剩余語(yǔ)法，rest參數(shù)) 和 spread(展開(kāi)語(yǔ)法，展開(kāi)數(shù)組/對(duì)象)，作為函數(shù)、數(shù)組、對(duì)象的擴(kuò)展運(yùn)算符。 從某種意義上說(shuō)，剩余語(yǔ)法與展開(kāi)語(yǔ)法是相反的：剩余語(yǔ)法將多...

    MorePainMoreGain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<