参考文档：https://book.douban.com/subject/26864806/ （英文版+中文版）
解构目的：为了使代码更简单、简洁
解构对象：object 和 array
【注意】
- 针对对象和数组，使用语法不同。
- 一定要注意同样的符号出现在 = 左边和右边是不同的含义！！
- 解构时必须初始化（let, var, const），否则会报语法错误。
- object通过属性名访问对象，所以解构时用属性名作为新变量名；数组通过索引访问，所以解构时也只和索引位置有关。
- 解构对象时：
- 原有属性可设置别名，但不可设置默认值（设置了不报错也不启用默认值）
- 嵌套解构只新建最内层{ }中的属性名
- 冒号后面有{ } 是内层解构，冒号后面直接是变量名字则是别名
- 解构数组时：
- 设置的默认值只有指定位置的变量不存在或其值未定义时才起效
- 嵌套解构时 = 左边 [ ] 中的变量都存在，但都是单个的值
- 用扩展运算符... 可以把剩余的值都放到一个变量中，但这个变量在解构中必须是最后一个变量
一、 对象解构
1.1 基础用法
= 左边用 var, let 或 const 声明，然后一个 { } 包裹要新建的局部变量； = 右边是原始的对象。
左边用 { } 括起来是解构对象的语法，可以简单理解为右边是对象，所以左边也要是对象。
let node = {
type: "Identifier",
name: "foo"
};
//因为右边是对象，所以左边也要是对象，所以用{}括起来，里面的type、name是原始变量的属性
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
单独的属性变量已经被定义后，想修改为原始对象的初始值：
type and name are initialized with values when declared, and then two variables with the same names are initialized with different values.
圆括号（）让代码块变成表达式，表达式的值是 = 右侧的值。对象解构重新赋值时一定要加圆括号（），数组解构重新赋值不用加圆括号（）
let node = {
type: "Identifier",
name: "foo"
},
// change the values of variables after they’re defined,
type = "Literal",
name = 5;
// assign different values using destructuring
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
1.2 解构设置默认值（原有属性不可设置默认值，只有新属性才变量会使用默认值，因为新属性变量时原始对象中不存在的属性）
如果 = 左边有原始对象没有的属性名，则默认赋 undefined ，设置了默认值则为默认值。
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value } = node;//value不设置默认值就是 undefined
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined
-- 给新属性赋值和设置默认值
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
【注意】原有属性可设置别名，但不可设置默认值。（设置了不会报错，但也不会使用默认值，而是使用从解构获取的对象中的值）
When you use a destructuring assignment statement and you specify a local variable with a property name that doesn’t exist on the object, that local variable is assigned a value of undefined.
You can optionally define a default value to use when a specified property doesn’t exist.
let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
let node = {
type: "Identifier",
name: "foo"
};
// 给原有属性设置默认值无效，因为其值不是 null 或 undefined
let { type, name="new name" } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
1.3 给原对象中属性起别名
let node = {
type: "Identifier"
};
// {原属性：别名}
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"
1.4 嵌套解构
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
针对上面这个嵌套的对象，可以使用嵌套解构，但要注意：最后新建的本地变量只有最内层解构，外侧的loc变量并不存在！！
冒号后面有{ } 是内层解构，冒号后面直接是变量名字则是别名。
// 此时loc变量不存在，存在的是start变量（解构出的变量是最内层{}）
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(loc); // 报错 Uncaught ReferenceError: loc is not defined
嵌套解构使用别名：
// 冒号后面有{}是内层解构，冒号后面直接是变量名字则是别名
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1
二、数组解构
2.1 基础用法
= 左边用 var, let 或 const 声明，然后一个 [ ] 包裹要新建的局部变量； = 右边是原始数组。
左边用 [ ] 括起来是解构数组的语法，可以简单理解为右边是数组，所以左边也要是数组。
let colors = [ "red", "green", "blue" ];
// Those values are chosen because of their position in the array;
// the actual variable names could be anything.
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
// 只要第三个位置的元素值
let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"
单独的变量已经被定义后，想修改为原始数组的初始值：
// 通过解构获得原始数组的值（无需圆括号（））
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
// The only difference is that firstColor and secondColor have already been defined.
[ firstColor, secondColor ] = colors; // 数组解构时无需圆括号，对象解构时需要圆括号
console.log(firstColor); // "red"
console.log(secondColor); // "green"
2.2 数组解构的妙用：交换变量值
// swapping variables in ECMAScript 6
let a = 1,
b = 2;
// [] 在等号左边是解构，[]在等号右边是数组
// 一定要注意同样的符号出现在 = 左边和右边是不同的含义！！
// 解构，第一位置的变量值等于右边数组中索引为0的值，即 已定义的变量a被赋值为[b,a]数组i=0的值，也就是b
// 同理，变量b被重新赋值为i=1的数组值a
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1
2.3 解构时设置默认值
只有当指定位置的属性不存在或其值未定义时，才会使用默认值。
let colors = [ "red" ];
// Array destructuring assignment allows you to specify a default value for any position in the array, too.
// The default value is used when the property at the given position either doesn’t exist or has the value undefined .
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
2.4 嵌套解构
外层解构的新变量也存在，但只会按照索引位置取一个值而不是数组，如果想让最后一个变量是数组，需要使用扩展运算符...
Rest items use the ... syntax to assign the remaining items in an array to a particular variable.
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// later
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
使用扩展运算符... 必须是最后一个变量，且后面不能有逗号
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;//restColors 是数组
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
三、混合解构
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(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
我觉得这样太复杂了，不过书上写这样十分有效，因为不用遍历整个json结构了。。
标签：es6,console,log,解构,let,array,type,name From： https://www.cnblogs.com/sunshine233/p/18380272This approach is particularly useful for pulling values out of JSON configuration structures without navigating the entire structure.