解構(gòu)小結(jié)

denson 發(fā)布于2019-08-22 13:53 / 2571人閱讀

摘要：基本概念作用解構(gòu)是有組織的從對(duì)象或數(shù)組中提取信息片段條件明確從哪提取信息片段，即信息來(lái)源于哪個(gè)對(duì)象或數(shù)組明確提取什么信息片段，即對(duì)象的哪個(gè)屬性或數(shù)組的第幾個(gè)元素其他解構(gòu)除了提取信息片段之外，還有一些輔助的功能為可能提取不到的信息設(shè)置默認(rèn)值為

基本概念 作用

解構(gòu)是有組織的從對(duì)象或數(shù)組中提取信息片段

條件

明確從哪提取信息片段，即信息來(lái)源于哪個(gè)對(duì)象或數(shù)組

明確提取什么信息片段，即對(duì)象的哪個(gè)屬性或數(shù)組的第幾個(gè)元素

其他

解構(gòu)除了提取信息片段之外，還有一些輔助的功能

為可能提取不到的信息設(shè)置默認(rèn)值

為提取到的信息重新命名

場(chǎng)景

解構(gòu)的使用場(chǎng)景不僅在聲明變量賦值階段，也可以單純地給以有的變量重新賦值

在函數(shù)參數(shù)中使用解構(gòu)

舉例

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let {
    type, // 獲得node的type信息
    name: myname, // 獲得node的name信息，并重命名為myname
    text, // 獲得node的text信息，若不存在且不設(shè)置默認(rèn)值，則為undefined
    value: myvalue = "gaga", // 獲得node的value信息，并重命名為myvalue，若不存在，則為"gaga"
    subNode: { // 獲得node的subNode中的name信息，并重命名為subName，嵌套解構(gòu)
        name: subName
    }
} = node // 從node中獲得信息來(lái)源

type // "Identify"
text // undefined
value // ReferenceError
myvalue // "gaga"
subName // "subFoo"

上面的代碼與下面的代碼輸出相同

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let type,
    myname,
    text,
    myvalue = "hehe",
    subName

({
    type,
    name: myname,
    text,
    value: myvalue = "gaga",
    subNode: {
        name: subName
    }
} = node)

數(shù)組解構(gòu) 與對(duì)象解構(gòu)的不同之處

對(duì)象通過(guò)屬性名來(lái)標(biāo)示信息片段，數(shù)組通過(guò)位置來(lái)標(biāo)示信息

對(duì)象解構(gòu)默認(rèn)將提取到的信息賦給與屬性名相同的變量中，數(shù)組需要給提取出的信息命名

可用于交換變量

舉例

let colors = ["red", "green", "blue"]
let [,,thirdColor] = colors // 從colors數(shù)組中提取下標(biāo)為2的元素
let [firstColor] = colors // 從colors數(shù)組中提取下標(biāo)為0的元素
let [,secondColor,,fourthColor] = colors 
// 從colors數(shù)組中提取下標(biāo)為1和3的元素，若元素不存在則為undefined
let [,secondColor,,fourthColor = "yellow"] = colors // 設(shè)置默認(rèn)值
// 嵌套解構(gòu)
let colors = ["red", ["green", "lightgreen"], "blue"]
let [, [,subColor],] = colors
// 不定元素
let colors = ["red", "green", "lightgreen", "blue"]
let [first, ...others] = colors
others // ["green", "lightgreen", "blue"]
// 交換變量
let a = 1,
    b = 2;
[a, b] = [b, a]