重走es6之es6解构

解构

Es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于"模式匹配"，只要等号两边的模式相同，左边的变量就会被赋予对应的值，如果解构不成功，变量的值就等于undefined。

数组解构

等号左边的变量放到中括号内部，匹配右侧数组中的元素。
实例：
完全解构

//数组解构之完全解构
let [a, b, c, d, e] = [1, 2, 3, 4, 5, 6]
console.log(a, b, c, d, e); //结果为1 2 3 4 5

不完全解构

//数组解构之不完全解构
let [a,[b],d]=[1,[2,3],4];
console.log(a,b,d)   //结果为1，2，4

集合解构

//数组解构之集合解构
let [head,...tail]=[1,2,3,4]
console.log(head,tail); //结果为head=1;tail=[2,3,4]

默认值
当匹配值严格等于undefined时，默认值生效

//数组解构之默认值
let [x,y='b']=['a']
console.log(x,y)   //结果为x='a';y='b'
//默认值也可以为一个函数
function f(){
   return 2
}
let [m,n=f()]=[1];
console.log(m,n)   //结果为1，2

对象解构

等号左边的变量放在大括号的内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取得正确的值

变量与属性同名时

//变量与属性同名时
let { foo, bar } = { foo:'aaa', bar: 'bbb' };
console.log(foo,bar)  //结果为aaa,bbb

变量与属性不同名时，要想取到值，必须写成下面的形式

//变量与属性不同名
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; 
console.log(baz)  //结果为baz='aaa' 而foo为undefined

let { foo: a, bar: b } = { foo: "aaa", bar: "bbb" };
console.log(a,b); 结果为a='aaa',b='bbb'

从上述代码中，我们可以知道对象的解构赋值是下面形式的简写：

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
console.log(foo,bar) //结果为foo='aaa',bar='bbb'

嵌套解构

//对象解构之嵌套解构
let obj = { p: [ 'Hello', { y: 'World' } ] }; 
let { p: [x, { y }] } = obj; 
console.log(x,y); //结果为//x = "Hello”; y = "World”

默认值
默认值生效的条件是，对象的属性值严格等于undefined

//对象解构之默认值
let {x:y=3}={}  
console.log(y)  //结果为3

字符串解构

等号左边的变量如果放在中括号内进行的类似于数组解构，从字符串中获取指定字符；如果放在大括号内进行的类似于对象解构，从实例属性获取方法中解构

//字符串解构 
const [a, b, c, d, e] = 'hello'; //a=h;b=e;c=l;d=l;e=o
console.log(a,b,c,d,e) //结果为h,e,l,l,o
let {length : len, toString } = 'hello'; 
console.log(len); //结果为len = 5

let { toString, valueOf, length } = "hello"
//结果为[Function: toString] [Function: valueOf] 5
console.log(toString, valueOf, length);  
 //结果为true
console.log(toString === String.prototype.toString);

数值解构

等号左边的变量放在大括号中进行解构，可以获取到数值包装器构造函数原型中指定的方法

let {valueOf} = 12; 
console.log(valueOf) //结果为 Number.prototype.valueOf

布尔类型解构

等号左边的变量放在大括号中进行解构，可以获取到布尔包装器构造函数原型中指定的方法

//布尔类型解构
let {valueOf} = true; 
console.log(valueOf)  //Boolean.prototype.valueOf