ES6解构:es6允许按照一定模式匹配,从数组和对象中提取值,对变量进行赋值,这被称之为解构。
1. 解构一般有三种情况,完全解构,不完全解构,解构不成功
<script> //完全解构 var [a,b,c] = [1,2,3]; console.log(a+b+c); //6
//不完全解构 let [x,y] = [1,2,3]; console.log(y);//2 //解构不成功 let [bar, foo] = [1]; console.log(foo); //undefined </script>
2 .对象的解构赋值
1. 对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
2. 对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者。
3.解构也可以用于嵌套结构的对象 ,注意模式和变量的区别。
//对象的解构 let { foo, bar } = { foo: "aaa", bar: "bbb" }; console.log(foo); //aaa console.log(bar); //bbb let { fo: ba } = { fo: 'aaa', bar: 'bbb' }; console.log(ba); //aaa console.log(fo); ///报错,fo is not defined
例子1:
let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
注意,这时p
是模式,不是变量,因此不会被赋值。如果p
也要作为变量赋值,可以写成下面这样。
例子2:
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
例子3:
const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node; line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5}
上面代码有三次解构赋值,分别是对loc
、start
、line
三个属性的解构赋值。注意,最后一次对line
属性的解构赋值之中,只有line
是变量,loc
和start
都是模式,不是变量。