解构赋值

181 阅读1分钟

数组的解构赋值:

let arr = [0,1,2]
let [a,b,c] = arr
console.log(a) // 0
console.log(b) // 1
console.log(c) // 2

对象的解构赋值,对象的属性没有次序,变量必须与属性同名,才能取到正确的值:

let {name,age} = {name:"zx",age:18}
console.log(name) // 'zx'
console.log(age) // 18

下面这段代码使用了解构赋值来声明变量localType和localName,这两个变量分别包含node.type和node.name属性的值。type:localType语法的含义是读取名为type的属性并将其值存储在变量localType中,也就是取别名

let node = {
    type: "Identifier",
    name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"

对象的嵌套结构,在解构模式中使用了花括号,其含义为在找到node对象中的loc属性后,应当深入一层继续查找start属性。

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
    end: {
        line: 1,
        column: 4
    }
}
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1
-------------------------------------------------------
//   let { loc: { start: localStart }} = node;
//   console.log(localStart.line); // 1
//   console.log(localStart.column); // 1
//   node.loc.start被存储在了新的局部变量localStart中。解构模式可以应用于任意层级深度的对象,且每一层都具备同等的功能