解构小结

基本概念

作用

解构是有组织的从对象或数组中提取信息片段

条件

• 明确从哪提取信息片段，即信息来源于哪个对象或数组
• 明确提取什么信息片段，即对象的哪个属性或数组的第几个元素

其他

解构除了提取信息片段之外，还有一些辅助的功能

• 为可能提取不到的信息设置默认值
• 为提取到的信息重新命名

场景

解构的使用场景不仅在声明变量赋值阶段，也可以单纯地给以有的变量重新赋值

在函数参数中使用解构

举例

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

let {
    type, // 获得node的type信息
    name: myname, // 获得node的name信息，并重命名为myname
    text, // 获得node的text信息，若不存在且不设置默认值，则为undefined
    value: myvalue = 'gaga', // 获得node的value信息，并重命名为myvalue，若不存在，则为'gaga'
    subNode: { // 获得node的subNode中的name信息，并重命名为subName，嵌套解构
        name: subName
    }
} = node // 从node中获得信息来源

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)

数组解构

与对象解构的不同之处

• 对象通过属性名来标示信息片段，数组通过位置来标示信息
• 对象解构默认将提取到的信息赋给与属性名相同的变量中，数组需要给提取出的信息命名
• 可用于交换变量

举例

let colors = ["red", "green", "blue"]
let [,,thirdColor] = colors // 从colors数组中提取下标为2的元素
let [firstColor] = colors // 从colors数组中提取下标为0的元素
let [,secondColor,,fourthColor] = colors 
// 从colors数组中提取下标为1和3的元素，若元素不存在则为undefined
let [,secondColor,,fourthColor = "yellow"] = colors // 设置默认值
// 嵌套解构
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]