es6解构赋值

解构赋值

定义：解构赋值就是在对象或者数组中快速的提取自己想要的值。

1、参数解构

function f(x,y,z){
    console.log(x+y+z);
}
var args = [2,3,4];
f(...args);//9

2、数组解构

• 解构的时候，变量从左到右和元素对齐，可变参数放到最右边。
• 能对应到数据就返回数据，对应不到数据的返回默认值，如果没有默认值返回undefined。

const arr = [100,200,300]
let [x,y,z] = arr
console.log(x,y,z);  //100 200 300

//丢弃
const  [,b,] = arr
console.log(b);  //200
// b=5  //异常，b是const声明的，不能修改。

//少于数组元素
const [d,e] = arr
console.log(d,e);  //100 200

//多余数组元素
const [m,n,o,p] = arr
console.log(m,n,o,p);  //100 200 300 undefined

//可变变量
const [f,...args] = arr
console.log(f,args);  //100 [200,300]

//支持默认值
const [j=1,k,,,i=10] = arr;
console.log(j,k,i)  //100 200 10

• 复杂数组解构

const arr= [1,[2,3],4];
var [a,[b,c],d] = arr
console.log(a,b,c,d);  // 1,2,3,4     //数组解构定义的时候，一定要严格对应，使用[]才代表对应的是内部数组

var [e,f] = arr;
console.log(e,f);  //1,[2,3]

var [g,h,i] = arr;
console.log(g,h,i)  //1 [ 2, 3 ] 4

var [g,h,i,j=18] = arr;
console.log(g,h,i,j);  //1,[2,3] 4,18

const [k,...y] = arr;
console.log(k,y);// 1,[[2,3],4]

3、对象解构

解构时需要提供对象的属性名，会根据属性名找到对应的值。没有找到的返回默认值，没有默认值则返回 undefined。

const obj = {
  a:100,
  b:200,
  c:300
}

var {a,b,c} = obj
console.log(a,b,c);  //100 200 300

//少于key
var {a,b} = obj
console.log(a,b);  //100,200

//多于key
var {a,b,c,d} = obj
console.log(a,b,c,d);  //100 200 300 undefined

//重命名
var {a:m,b:n,c} = obj
console.log(m,n,c);  //100 200 300

//默认值
var {a:M,c:N,d:D='python'} = obj
console.log(M,N,D); //100 300 python

• 复杂对象解构

var data = {
  a:100,
  b:[
      {
          c:200,
          d:[],
          a:300
      },
      {
          c:1200,
          d:[1],
          a:1300
      }
  ],
  c:500
}

var {b:[{c:c1,d:d1},{a:a2}]} = data
console.log(c1,d1,a2);  //200 [] 300

var {a:m,b:[{a:n},{a:n1}]} = data;
console.log(m,n,n1)  //100,300,1300

const userInfo = {
    name: 'Lily',
    age: '18'
};
const { 
    education: { 
        degree 
    } = {}
} = userInfo || {};
console.log(degree); // undefined