es6 特性之解构赋值

解构赋值是什么

• 解构赋值是将一个对象的属性解构出来，赋值给需要的变量。属于表达式的语法糖。

// 赋值
let a,b;
[a,b]=[1,2];
console.log(a,b);// 1 2

// 赋值
let c,d;
[c,...d]=[1,2,3,4,5];
//变量 d 前面的三个点表示， d 作为参数，数量不确定
console.log(c);// 1
console.log(d);// [2,3,4,5]

// 两个变量交换
let e=1,f=2;
[e,f]=[f,e];
console.log(e);// 2
console.log(f);// 1

解构赋值的使用

• 简单数组对象

// 数组赋值给变量
let arr=[1,2,3];
let [a,b]=arr;
console.log(a);// 1
console.log(b);// 2

// 数组赋值给变量
let c,d;
[c,...d]=[1,2,3,4,5];
console.log(c);// 1
console.log(d);// [2,3,4,5]

// 数组改变值
let [a=1,b=2]=[3];
console.log(a);// 3
console.log(b);// 2

// 对象赋值给变量
let testObj={name:'123',age:10,phone:'1234567'};
let {name,age}=testObj;
console.log(name);// 123
console.log(age);// 10

// 对象赋值给变量并设置别名
let testObj = {name:'123',age:10};
let {name:nametemp,age:agetemp} = testObj;
console.log(nametemp);// 123
console.log(agetemp);// 10

• 嵌套对象

let testObj = {
  name:'123',
  age:10,
  data:[
    {
      index:1,
      msg:'索引1',
      children:[]
    },
    {
      index:2,
      msg:'索引2',
      children: []
    }
  ]
}

let {
  name,
  data:[{index,msg}]
} = testObj;

console.log(name); // 123
console.log(index); // 1
console.log(msg); // 索引1