深入理解ES6之解构
变量赋值的痛
- 对象
let o = {a:23,b:34};
let a = o.a;
let b = o.b;
如上文代码，我们经常会遇到在各种场合需要获取对象中的值的场景，舒服一点的是获取单个属性，很多时候，要获取的是接口中的各个对象，在ES5中，我们不得不如上文一样，将同一行代码复制多遍
- 数组
let s = [1,2,3,4];
let a = s[0];
let b = s[2];
如上文，所以ES6提供了处理这些场景的方法：解构赋值
解构
destructuring：百度百科的意思是结构分解，ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
- 作用
这是一种将数据结构分解为更小的部分的过程，从而达到简化提取信息的目的。
对象解构
- 形式
对象解构语法是在赋值对象的左侧使用了对象字面量，如：
同名变量解构赋值
let node = {
type : 'identifier',
name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'
不同变量解构赋值
let node = {
type : 'identifier',
name : 'foo'
};
let {type:localType,name:localName} = node;
console.log(localType);//'identifier'
console.log(localName);//'foo'
- 注意点
- 使用var、let、const对对象进行解构时，必须提供初始化器（即等号右边的值）
- 不使用var、let、const赋值时，需要将解构语句使用（）进行包裹
（{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错 - 默认值
当你使用解构赋值语句时，如果指定的本地变量没有同名属性，那么该变量会被赋值为undefined，可以对其进行指定默认值let node = { type : 'identifier', name : 'foo' }; let {type,name,val} = node; console.log(val);//undefined ({type,name,val = '234'} = node) console.log(val);//'234' - 嵌套的对象解构
使用类似于对象字面量的语法，可以深入到嵌套的对象结构中去提取你想要的数据
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
这种方法使得本地变量start被赋值node中的loc的start对象，值得注意的是这种操作与直接node.loc.start的赋值是一致的，所以要注意值类型与引用类型的区别
- 注意点:此语句中并没有任何变量被绑定
// 没有变量被声明！
let { loc: {} } = node;
数组解构
- 形式
数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具名属性上
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
所以，对于数组解构，最主要在于位置的固定，当然，如果不想赋值某些值，可以直接略过，如：
var s = [1,2,3,4,5];
let [,,T] = s;
console,log(T);//3
- 注意点
- 使用var、let、const对对象进行解构时，必须提供初始化器（即等号右边的值）
- 不使用var、let、const赋值时，需要将解构语句使用（）进行包裹，因为数组的[]，与{}是不同的
- 对互换两个变量的值很有用，如排序算法中使用的，可以直接用
let a = 3; let b = 4; [b,a] = [a,b]; console.log(a);//4 console.log(b);//3 - 默认值
数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ，那么该默认值就会被使用let colors = [ "red" ]; let [ firstColor, secondColor = "green" ] = colors; console.log(firstColor); // "red" console.log(secondColor); // "green" - 嵌套的数组结构
与对象类似，只是仍使用的是数组字面量
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
console.log(secondColor); // "green"
- 剩余项
数组解构有个与函数的剩余参数类似的、名为剩余项（ rest items ）的概
念，它使用" ..." 语法来将剩余的项目赋值给一个指定的变量
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
混合解构
既有函数的解构，也有数组的解构，也只需要对象的创建出字面量来赋值即可，如：
let node = {
type: "Identifier",
loc: {
start: {
line: 1,
column: 1
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
实际使用- 参数解构
如：
// options 上的属性表示附加参数
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
总结
以上，便是学到的ES6的解构赋值的内容，主要区分对象解构与数组解构的形式，整体上很好使用，刚开始有点蒙，后面发现其实还是很有规律的对象字面量与数组字面量的使用，当然，注意点是要划重点的，记录到这，各位好梦！
作者：紫陌于微
链接：https://www.jianshu.com/p/ab4e4338047b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
漫思
