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

資訊專欄INFORMATION COLUMN

ES6解構(gòu) - 數(shù)組解構(gòu)

李增田 / 1914人閱讀

摘要：對(duì)象的解構(gòu)是利用對(duì)象的屬性名，而數(shù)組的解構(gòu)是利用位置坐標(biāo)的一一對(duì)應(yīng)。本篇我們依然來(lái)看一下數(shù)組解構(gòu)的基本用法一數(shù)組解構(gòu)的使用場(chǎng)景數(shù)組解構(gòu)用于變量聲明后面跟上一對(duì)用中括號(hào)包裹的變量列表，變量的值為對(duì)應(yīng)位置上的素組元素的值。

解構(gòu)不僅可以用于對(duì)象類型，還可以用于數(shù)組。對(duì)象的解構(gòu)是利用對(duì)象的屬性名，而數(shù)組的解構(gòu)是利用位置（坐標(biāo)）的一一對(duì)應(yīng)。本篇我們依然來(lái)看一下數(shù)組解構(gòu)的基本用法：
一：數(shù)組解構(gòu)的使用場(chǎng)景
1: 數(shù)組解構(gòu)用于變量聲明

let color = ["red", "green", "blue"];
let [firstColor, secondColor] = color;
console.log(firstColor); //red
console.log(secondColor); //green

let/const/var 后面跟上一對(duì)用中括號(hào)[]包裹的變量列表，變量的值為對(duì)應(yīng)位置上的素組元素的值。
假如我們不想數(shù)組前面坐標(biāo)的數(shù)據(jù)，而是想要中間位置，或者最后位置的，那么前面位置上的每一個(gè)元素留空，用逗號(hào)相隔就行了：

let color = ["red", "green", "blue"];
let [, , thirdColor] = color;
console.log(thirdColor); // blue

2: 數(shù)組解構(gòu)用于變量賦值

let color = ["red", "green", "blue"];
firstColor = "white";
secondColor = "black";

[firstColor, secondColor] = color;

console.log(firstColor); //red
console.log(secondColor); //green

已經(jīng)被初始化了的變量firstColor和secondColor通過(guò)數(shù)組解構(gòu)重新被賦值。數(shù)組解構(gòu)賦值的語(yǔ)法和用于變量聲明很像，只是不再需要let/const/var， 整個(gè)解構(gòu)賦值語(yǔ)句也不需要用()包裹，這一點(diǎn)和對(duì)象的解構(gòu)賦值不一樣。

二：嵌套數(shù)組（多維數(shù)組）的解構(gòu)
前面的例子都是一維數(shù)組，我們來(lái)看看嵌套數(shù)組（多維數(shù)組）的解構(gòu)：

let color = ["red", ["white", "black"],"green", "blue"];

let [firstColor, secondColor] = color;
let [, [firstChildColor]] = color;

console.log(secondColor); //["white", "black"]
console.log(firstChildColor); //white

color變量是一個(gè)嵌套數(shù)組，它的第二個(gè)元素又是一個(gè)一維數(shù)組，所以代碼的第二行我們解構(gòu)出secondColor變量，它是一個(gè)一位數(shù)組（倒數(shù)第二行代碼打印結(jié)果）。

而當(dāng)我們?cè)赾olor變量的第二個(gè)元素位置先用一層中括號(hào)包裹一個(gè)變量（這里的firstChildColor），那就說(shuō)明我們解構(gòu)的是"white"這個(gè)值了。其實(shí)這語(yǔ)法大家用邏輯去想就是恨自然而簡(jiǎn)單的。
三：不定元素（剩余元素）
函數(shù)有不定參數(shù)，在數(shù)組解構(gòu)這里有個(gè)類似的概念：不定元素（或者叫剩余元素）。它就是用...展開(kāi)運(yùn)算符把數(shù)組的多個(gè)元素一起賦值給一個(gè)變量：

let color = ["red", "green", "blue"];
let [firstColor, ...secondColor] = color;
console.log(firstColor); //red
console.log(secondColor); //["green", "blue"]

這里需要特別注意的是不定元素變量（剩余元素變量）必須是解構(gòu)的最后一個(gè)變量，其后面不能再有別的變量，否則會(huì)拋出語(yǔ)法錯(cuò)誤，例如：

let color = ["red", "green", "blue"];
let [firstColor, ...secondColor, error] = color; // Uncaught SyntaxError: Rest element must be last element

既然剩余元素可以是數(shù)組的最后幾個(gè)元素，那它當(dāng)然也可以是數(shù)組的全部元素。我們可以利用這點(diǎn)來(lái)實(shí)現(xiàn)數(shù)組的copy：

let color = ["red", "green", "blue"];
let [...copiedColor] = color;
console.log(copiedColor);// ["red", "green", "blue"]
console.log(color.toString() === copiedColor.toString()); // true
console.log(color == copiedColor); // false
console.log(color === copiedColor); // fasle

這里也要特別注意，剩余元素變量只是把數(shù)組元素copy到另一個(gè)數(shù)組，所以它們包含的元素相等，但是這2個(gè)數(shù)組是沒(méi)有關(guān)系的，是不相等的。

四：對(duì)象和數(shù)組的混合解構(gòu)
解構(gòu)可以用在對(duì)象和數(shù)組，前面我們所有的例子都是多帶帶的對(duì)象和數(shù)組，接下來(lái)我們來(lái)看看在一個(gè)混合和數(shù)組和對(duì)象的例子：

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: "mike",
                lastName: "deep"
            },
        }
    },
    levelRange: [1, 3]
};
let {
    personalInfo: {basicInfo: {name}},
    levelRange: [lowLevel]
} = node;

console.log(name.firstName); // mike
console.log(lowLevel); // 1

其實(shí)混合解構(gòu)和多帶帶的對(duì)象解構(gòu)和數(shù)組解構(gòu)是一樣的，對(duì)象的地方就用對(duì)象解構(gòu)的語(yǔ)法，數(shù)組的地方就用數(shù)組解構(gòu)的語(yǔ)法就對(duì)了。

以上，就是數(shù)組解構(gòu)的所有內(nèi)容。

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

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

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

    摘要：另外對(duì)于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時(shí)，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。 let和const let和const是es6新增的兩個(gè)變量聲明關(guān)鍵字，與var的不同點(diǎn)在于： （1）let和const都是塊級(jí)作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...

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

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...

    番茄西紅柿 評(píng)論0 收藏2637

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...

    番茄西紅柿 評(píng)論0 收藏2637

  • ES6-變量的解構(gòu)賦值(3)

    摘要：數(shù)組的解構(gòu)賦值特點(diǎn)根據(jù)數(shù)據(jù)的下標(biāo)來(lái)賦值的，有次序。模式能夠匹配起來(lái)，如長(zhǎng)度為數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則是只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。布爾值解構(gòu)賦值為字符串的一種。在很多獨(dú)立細(xì)小的方面，解構(gòu)賦值都非常有用。 1、解構(gòu)賦值簡(jiǎn)介 官方解釋：按照一定的模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。 舉個(gè)例子，想獲取數(shù)組中...

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

  • 《深入理解ES6》筆記——解構(gòu)：使數(shù)據(jù)訪問(wèn)更便捷（5）

    摘要：解構(gòu)，一種黑魔法解構(gòu)是從對(duì)象中提取出更小元素的過(guò)程。賦值是對(duì)解構(gòu)出來(lái)的元素進(jìn)行重新賦值?？偨Y(jié)本章講解了對(duì)象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對(duì)象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個(gè)知識(shí)點(diǎn)是解構(gòu)函數(shù)的參數(shù)。 解構(gòu)，一種黑魔法 解構(gòu)是從對(duì)象中提取出更小元素的過(guò)程。賦值是對(duì)解構(gòu)出來(lái)的元素進(jìn)行重新賦值。 下面的代碼你可能無(wú)法在瀏覽器上實(shí)時(shí)測(cè)試，推薦在babel官網(wǎng)在線測(cè)試代碼：在線測(cè)試ES6代碼...

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

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

0條評(píng)論

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