ES6的解构赋值

解构赋值

首先来看看在ES6里面数组的解构
1、本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [x,...y] = [1,2,3,4]
x  //1
y  //[2,3,4]

解构不成功的情况：

let [foo] = []
foo //undefined

解构不超过会返回undefined。

2.如果等号右边不是数组，或不是有iterator接口（可以遍历的结构），将报错！如下代码

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = null;
let [a] = undefined;
let [a] = {};

这些情况浏览器都会报错。也就是说：只要具备Iterator接口的数据结构，都可采用数组形式进行解构赋值。

3.默认值也是被允许解构的,如下这种情况

let [foo = 1] = []
foo // 1

对象的解构赋值

1.解构赋值，不仅可以用于数组，还可以用于对象。
数组元素是按照顺序排列的，变量，取值是按照顺序依次取值的：，对象属性没有顺序，左边的变量名必须和右边的属性对应，才能取到。。。解构失败，变量值为undefined。。。

var { name,age } = {name:"wyy",age:"22"}
console.log( name + "," + age)//wyy , 22

var { foo } = { name:"wyy" , age:"22" }
console.log( foo ) // undefined

2.变量名可与属性名不一致，前提需要把变量名赋值给另一个变量

var { name:aq } = { name:"wyy" };
console.log(aq) // wyy

3.将现有的（原生的）对象方法，赋值给一个变量，会更加方便

var { random,floor,ceil } = Math;
console.log(random())//产生一个随机数

4.对象的解构也可以指定默认值

var { x = 1, y = 2 } = {x:3}
x //3
y //2

5.使用默认值的前提是 右边的值绝对等于undefined的时候

var { x  = 1 } = { x:undefined }
 x // 1
 
var { x = 1 } = { x : null } 
x // null   因为null与undefined不严格相等，所以不会取默认值

函数的解构赋值

function test([a,b]){
  console.log(a +"|" + b) //1 | 2
}
test([1,2])

函数test的参数表面上是一个数组，但传入参数的那一刻，已被解构成单个数据a和b。。。

解构赋值的应用

用法一：从函数中返回多个值

function test(){
    var arr = [1,2,3,4];
    return arr;
}
var [a,b,c,d] = test()
console.log(a,b,c,d) //1 2 3 4 

用法二：交换变量

let x = 1;
let y = 2;
[x,y] = [y,x]

用法三：提取json数据解构赋值对于提取后台返回到前台的数据会更加方便

var json = {
   id:2,
   status:"ok",
   data:[{name:"wyy",age:22}]
}
var { id,status,data } = json;
console.log(id,status,data) // 2  "ok"   [{name:"wyy",age:22}]