ES6解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

 1.数组的解构

// 1.1 数组的不完全解构,左边的模式与右边不完全一样
let [a,b] = [1,2,3]
console.log(a,b);  //a 2

// 1.2 完全解构,解构赋值是可以嵌套的
let [a,b,c] = [1,[2,3],4]
console.log(a,b,c); //1 [ 2, 3 ] 4

let [a,[b],c] = [1,[2,3],4]
console.log(a,b,d,c); //1 2 4

let [a,[b,d],c] = [1,[2,3],4]
console.log(a,b,d,c); //1 2 3 4

// 1.3 赋值不成功，变量的值为undefined
//解构不成功，变量的值就等于undefined。相当于只声明了变量c，但是没赋值。
var[a,b,c]=[1,2];
console.log(a,b,c) //1 2 undefined

// 2. 拓展运算符
// ...用在等号左边，有聚合的作用,生成新的对象或者数组
// ...用在等号右边，有剥离的作用
let [c,...d] = [4,5,6]
console.log(c,d); //  4 [5,6]

let [...a] = [1,2,3]
console.log(a)  //[1,2,3]

// 3. 数组解构设置默认值,保底的作用，还是以匹配的值为准
//注意：当新的值为undefined的时候，是不会覆盖默认值的。
let [e,f,g=10] = [1,2]
console.log(e,f,g);  //1 2 10

let [e,f,g=10] = [1,2,3]
console.log(e,f,g)   // 1 2 3

function f1(){
    console.log('fun');  //函数的返回值为undefined
    //return 10     //执行结果1 2 10
}
let [a,b,c=f1()] = [1,2]
console.log(a,b,c); // 1 2 undefined

//以上是数组的解构赋值，除了利用数组可以解构赋值外，用JSON对象也可以

2.对象的解构

// 1.1 对象解构，对象的简写形式（省略key，保留value值）
// 对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。
 let {name,age} = {name:'zhangsan',age:14}
 console.log(name,age); //zhangsan 14

// 1.2 使用value值 
 let {name:username,age:userage} = {name:'zhangsan',age:14}
 console.log(username,userage); //zhangsan 14

// 1.3 变量找不到与其名字相同的属性，就会赋值不成功
 var{a} ={"b":2};
 console.log(a);//结果：a的值为undefined

// 1.3补救
 var {b:a} = {b:2}
 console.log(a)  // 2 

// 2. 嵌套解构
let obj = {p:['hello',{y:'world'}]}
let {p:[a,{y:b}]} = obj
console.log(a+b);  //helloworld

// 3. 对象解构的默认值
let {name,age,gender='male'} = {name:'zhangsan',age:12}
console.log(name,age,gender);  //zhangsan 12 male

// 4. 拓展运算符
let {a,...b} = {a:1,b:2,c:3}
console.log(a,b); // 1 { b: 2, c: 3 }

let {...o} = {a:1,b:2,c:3}
console.log(o); // { a: 1, b: 2, c: 3 }

// 使用：进行重命名
let {x:z} = {x:'zhangsan',y:19}
console.log(z);

// 嵌套解构
let obj = {p:['hello',{b:1}]}
let {p:[a,{b}]} = obj
console.log(a,b);  //hello 1

3.字符串解构

// 字符串既可以使用[] 解构，也可以使用{} 来解构，原型中的方法

// 使用[]解构字符串内部的字符
let [a,b,c,d,e] = 'hello'
console.log(a,b,c,d,e);  //h e l l o

// 字符串转换成数组（数组解构、拓展运算符）
let [...arr] = 'hello'
console.log(arr); //[ 'h', 'e', 'l', 'l', 'o' ]

// 使用{}解构字符串原型中的方法和属性
// 包装器
let {length,toString} = 'hello'
console.log(length,toString);  //5 [Function: toString]实例方法

4.Number和Boolean解构

// 数字和布尔只能使用{}解构其原型对象中的方法和属性，不能属性[]来解构，因为他们都是不可迭代的

//错误示例
 let [a,b] = 10
 console.log(a);  //TypeError: 10 is not iterabl 迭代

//正确
let {valueOf} = 10
console.log(valueOf);  //[Function: valueOf]