个人博客迁移到biubu.cn,此处停更.请移步。
一. 解构
1. 对象解构
1.1 同名变量解构
代码如下：
let node = {
type: 'DOM',
name: 'document object model'
};
let {type, name} = node;
console.log(type) // 'DOM';
console.log(name) // 'document object model'
这样,就把 node.type 中的值（ 'DOM' ）存储到了变量 type 中,把 node.name 中的值（'document object model'）存储到了变量 name 中。
在使用结构赋值表达式时,如果指定的变量名称不存在于被解构的对象中,这个变量就会被赋值为 undefined,就像这样:
let node = {
type: 'DOM',
name: 'document object model'
};
let {type, name, value} = node;
console.log(type) // 'DOM';
console.log(name) // 'document object model'
console.log(value) // undefined // 因为 node 对象中没有 value 的值
1.2 非同名变变量解构
let node = {
type: 'DOM',
name: 'document object model'
};
let {type: localType,name: localName} = node;
console.log(localType) ; // 'DOM'
console.log(localName); // 'document object model'
这样,就把node.type 和 node.name 的值分别存储到了变量 localType 和 localName 中。其中，tyoe:localType 语法的含义是读取名为 type 的属性并将其值存储在变量 localType中。就相当于
let node = {
type: 'DOM',
name: 'document object model'
};
let {type, name} = node;
let localType = type;
2 . 数组解构
let colors = [ 'red', 'green', 'blue' ];
let [ firstColor, secondColor ] = colors ;
console.log(firstColor); // 'red'
console.log(secondColor); // 'green'
如上,我们从 colors 中解构出了 'red' 和 'green' 这两个值并粉饼存储在变量firstColor 和 secondColor 中。
二. 解构赋值
1 对象的解构赋值
如果我们需要在定义变量之后想要修改它们的值,就需要用到解构赋值
let node = {
type: 'DOM',
name: 'document object model'
},
type = 'BOM',
name = 'Browser Object Model';
// 以上,我们初始化了三个变量,现在我们需要用对象 node 中 type 和 name 的值分别修改变量 type 和 name 的值,这里就需要使用对象的解构赋值方法 :
({type, name} = node);
console.log(type) // 'DOM'
console.log(name) // 'Browser Object Model'
注意点: 在对象的解构赋值中,一定要用一堆小括号包裹解构赋值语句,因为 Javascript 引擎会将一对开放的花括号视为一个代码块,而语法规定,代码块不允许出现在赋值语句的左侧,添加小括号后可以将块语句转化成为一个表达式,从而实现整个解构赋值的过程.
2数组解构赋值
数组的解构也可用于赋值上下文,但不需要用小括号包裹表达式,
let colors = ['red','green'],
firstColor = 'black',
lastColor = 'purple';
[firstColor,lastColor] = colors;
console.log(firstColor); // 'red'
console.log(lastColor); // 'green'
数组解构赋值还有一个独特的用法:交换两个变量,如果用 ES5 交换两个变量的值,则必须要引入第三个临时变量,在ES6中可以这样做:
let a = 1,
b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
