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

資訊專欄INFORMATION COLUMN

ES6解構 - 數組解構

李增田 / 1908人閱讀

摘要：對象的解構是利用對象的屬性名，而數組的解構是利用位置坐標的一一對應。本篇我們依然來看一下數組解構的基本用法一數組解構的使用場景數組解構用于變量聲明后面跟上一對用中括號包裹的變量列表，變量的值為對應位置上的素組元素的值。

解構不僅可以用于對象類型，還可以用于數組。對象的解構是利用對象的屬性名，而數組的解構是利用位置（坐標）的一一對應。本篇我們依然來看一下數組解構的基本用法：
一：數組解構的使用場景
1: 數組解構用于變量聲明

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

let/const/var 后面跟上一對用中括號[]包裹的變量列表，變量的值為對應位置上的素組元素的值。
假如我們不想數組前面坐標的數據，而是想要中間位置，或者最后位置的，那么前面位置上的每一個元素留空，用逗號相隔就行了：

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

2: 數組解構用于變量賦值

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

[firstColor, secondColor] = color;

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

已經被初始化了的變量firstColor和secondColor通過數組解構重新被賦值。數組解構賦值的語法和用于變量聲明很像，只是不再需要let/const/var， 整個解構賦值語句也不需要用()包裹，這一點和對象的解構賦值不一樣。

二：嵌套數組（多維數組）的解構
前面的例子都是一維數組，我們來看看嵌套數組（多維數組）的解構：

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

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

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

color變量是一個嵌套數組，它的第二個元素又是一個一維數組，所以代碼的第二行我們解構出secondColor變量，它是一個一位數組（倒數第二行代碼打印結果）。

而當我們在color變量的第二個元素位置先用一層中括號包裹一個變量（這里的firstChildColor），那就說明我們解構的是"white"這個值了。其實這語法大家用邏輯去想就是恨自然而簡單的。
三：不定元素（剩余元素）
函數有不定參數，在數組解構這里有個類似的概念：不定元素（或者叫剩余元素）。它就是用...展開運算符把數組的多個元素一起賦值給一個變量：

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

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

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

既然剩余元素可以是數組的最后幾個元素，那它當然也可以是數組的全部元素。我們可以利用這點來實現數組的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

這里也要特別注意，剩余元素變量只是把數組元素copy到另一個數組，所以它們包含的元素相等，但是這2個數組是沒有關系的，是不相等的。

四：對象和數組的混合解構
解構可以用在對象和數組，前面我們所有的例子都是多帶帶的對象和數組，接下來我們來看看在一個混合和數組和對象的例子：

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

其實混合解構和多帶帶的對象解構和數組解構是一樣的，對象的地方就用對象解構的語法，數組的地方就用數組解構的語法就對了。

以上，就是數組解構的所有內容。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106235.html

相關文章

  • ES6 學習筆記（一）let，const和解構賦值

    摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于： （1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。 （2）使用let和con...

    iOS122 評論0 收藏0

  • ES6學習 第二章 變量的解構賦值

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

    番茄西紅柿 評論0 收藏2637

  • ES6學習 第二章 變量的解構賦值

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

    番茄西紅柿 評論0 收藏2637

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

    摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介 官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。 舉個例子，想獲取數組中...

    Jason_Geng 評論0 收藏0

  • 《深入理解ES6》筆記——解構：使數據訪問更便捷（5）

    摘要：解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值?？偨Y本章講解了對象解構賦值和數組解構賦值，以及對象和數組混合情況下的解構賦值操作，最后一個知識點是解構函數的參數。 解構，一種黑魔法 解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。 下面的代碼你可能無法在瀏覽器上實時測試，推薦在babel官網在線測試代碼：在線測試ES6代碼...

    Drinkey 評論0 收藏0

發表評論

0條評論

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