ES6学习02---数据解构

1. 解构

ES6 解构，允许我们从数组和对象中提取数值，或对变量赋值。解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会赋值对应的值。若解构不成功，变量的值就尾undefined。

1.1 数组结构

1. 完全解构

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

2. 不完全解构

let [a,b,c,[d],e] = [1,2,3,[4,5,6],7]
console.log(a,b,c,d,e);

3. 默认值解构
   默认值生效条件:当右侧匹配严格模式为undefined

let [a=1,b=2,c=3] = [4,5,6]
console.log(a,b,c);
// 默认值也可以是一个函数
let test=()=>{
   console.log('我是箭头函数');
   return 1
 }
 let [a=test()]=[]
 console.log(a);

4. 集合解构 扩展运算符

// 4.集合解构 扩展运算符
let [a,...b] = [1,2,3,4]
console.log(a,b); // 1 [ 2, 3, 4 ]
let [...b]=[1,2,3,4,5]
console.log(b);

1.2 对象结构

1. 对象常用结构方法：对象的属性没有次序，变量必须与属性同名，才能取到正确的值

语法：{变量名1，变量名2，……} ={对象属性名1：属性值，对象属性名1：属性值}

let {name,age}={name:'zhangsan',age:'12'}
console.log(name,age);

2. 重命名解构：如果不想变量名和属性名一致，那么给属性名重命名

语法：{变量名1：新变量名1，变量名2：新变量名2} = {对象属性名1：属性值，对象属性名1：属性值}

let {name:a,age:b}= {name:'zhangsan',age:'12'}
console.log(a,b);

3. 嵌套解构

let obj ={p:['hello',{y:'world'}]}
let {p:[a,{y:b}]} = obj
console.log(a,b);

4. 默认值解构，当解构的对象为空时，默认值才生效

let {x: y=8} ={}
console.log(y);

对于数组解构和对象解构，一般会在笔试题中出现，我们需要仔细分析，解构中是否存在嵌套、重命名和变量名是否和属性名同名。
例如：

const [a, b, c, ...d] = [1, 2, 3, 11, 999];//1 2 3 [11,999]
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };// undefined 4 undefined 5 {i:6,j:7}