解构　将数据结构分解为更小的部分的过程

对象解构

语法

在赋值语句左侧使用对象字面量

let node={
    type:"Identifier",
    name:"foo"
}
let {type,name} = node;

node.type的值被存储到type本地变量中。

node.name的值被存储到name本地变量中。

解构赋值

也可以在赋值时使用解构

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

必须使用圆括号包裹解构赋值语句。因为暴露的花括号会被解析为代码块语句，而块语句不允许在赋值操作符左边出现。圆括号标志了里面的花括号并不是块语句，而应该被解释为表达式。

使用结构表达式进行赋值时，整个表达式的返回值是赋值操作符右边的值。

赋值表达式的右边是null或undefined时会导致一个错误。

默认值

如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为undefined

在属性名后添加一个等号并指定默认值可以定义一个默认值

let {type,name,value="1"};

当指定了默认值的属性缺失或为undefined的情况下就会使用默认值。

赋值给不同的本地变量名

let node={
    type:"Identifier",
    name:"foo"
}
let {type:localType,name:localName}=node;

这种写法表示取得名为type和name的属性并分别存储到名为localType和localName的变量

添加默认值的方法不变

嵌套的对象解构

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
let {loc:{start}}=node;

每当有一个冒号在解构模式中出现，就意味着冒号之前的标识符代表要检查的位置，冒号右侧的则是赋值的目标。当冒号右侧存在花括号时，表示目标嵌套在更深一层中。

使用不同名称的方法相同。

数组解构

语法

使用数组字面量语法

let colors = ["red", "green", "blue"];
let [firstColor,secondColor]=colors;

数组中被选择的值由它们在数组中的位置决定，与变量的名称无关。没有在解构模式中明确指明的项都会被忽略。数组本身不会有任何变化。

可以使用占位符来获得特定的项。

let colors = ["red", "green", "blue"];
let [,,thirdColor]=colors;

解构赋值

与对象解构赋值类似，但不需要加圆括号。

使用解构赋值互换变量的值

let a=1;let b=2;
[a,b]=[b,a];//a=2,b=1

默认值

默认值的设定与对象解构相同。

嵌套的解构

与对象的嵌套结构类似

let a = [1, [2, 3], 4];
let [,b]=a;
let [,[,c]]=a;
console.log(b)；//[2,3]
console.log(c);//3

剩余项

使用 ... 语法可以将数组的剩余的项目赋值给一个指定的变量

let a = [1, [2, 3], 4,5];
let [,[b],...left]=a;
console.log(left)//[4,5]

剩余项只能位于最后，否则会报错。

混合解构

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    },
    range: [0, 3]
};
let {loc:{start},range:[startIndex]}=node;
console.log(startIndex)//0

参数解构

语法

function setCookie(name, value, { secure, path, domain, expires }) {

// 设置 cookie 的代码
}

setCookie("type", "js", {
secure: true,
expires: 60000
});

解构的参数是必须的

可以给参数默认值来使解构的参数变为可选参数

function setCookie(name, value, { secure, path, domain, expires }={}) {

// 设置 cookie 的代码
}

此时若没有传入第三个参数则name等值全部为 undefined。不会有错误发生。

参数解构的默认值

设置默认值的方法与上面相同。