ES6变量的解构赋值

概念

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

**变量的解构赋值在本质上属于 “模式匹配”，要掌握这个知识点，只需要找准它们的对应关系，并且能准确区分 谁是“模式” 谁是“变量”

数组解构赋值

只要等号两边的模式相同 左边的变量就会被赋与对应的值
var a=1;
var b=2;           =>    let [a,b,c]=[1,2,3]       //a=1;b=2;c=3
var c=3;

不完全解构：等号左边的模式只匹配等号右边数组的一部分。
let [x,y]=[1,2,3]       //x=1;y=2

let [a,[b],d] = [1,[2,3],4]      //a=1;b=2;d=4

报错：如果等号右边不是可遍历的解构（数组）,将会报错
let [a]=1;
let [a]=false;
let [a]=NaN;
let [a]=undefined;
let [a]=null;
let [a]={};

解构赋值允许指定默认值
var [foo=true]=[]              //foo=ture
var [x,y='b']=['a']            //x='a';y='b'

默认值也可以引用其他变量，但变量必须已经声明
let [x=1,y=x]=[];       //x=1;y=1
let [x=1,y=x]=[2];       //x=2;y=2
let [x=y,y=1]=[];       //ReferenceError

对象的解构赋值

*对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则取不到值，最后等于undefined。

//例1
var {foo,bar}={foo:'aaa',bar:'bbb'}   // foo='aaa'  ;bar='bbb'
var {baz}={foo:'aaa',bar:'bbb'}        //baz=undefined

*如果想要声明的变量名与属性名不一样，则必须写成下面这样：
//例2
var {foo:baz}={foo:'aaa',bar:'bbb'}   //baz='aaa'

*对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者。
//例3
var {foo:baz}={foo:'aaa',bar:'bbb'} 
//baz='aaa'
//foo   error:foois not defined   
// 本例中被真正赋值的是baz 而不是模式foo

//**由上可知，例1中对象的解构赋值 其实是一种简写
var {foo,bar}={foo:'aaa',bar:'bbb'}   =>
var {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'} 

（ES6允许在对象中只写属性名，不写属性值，这个时候，属性值等于属性名字所代表的变量）
var baz={foo} => var baz={foo:foo}

#####解构嵌套结构的对象

var obj={
   p:[
      "hello",
      {y:''word"}
   ]
};
var {p:[x,{y}]}=obj；
//x=>"hello"
// y => "world"
// p => error: p is not defined
*这时p 是模式，不是变量，因此不会被赋值

对象的解构也可以指定默认值
var {x=3}={}    // x=>3
var {x,y=5}={x;1}     //x=>3    y=>5
var {x:y=9}={}      //y=>9   

字符串的解构赋值

此时字符串被转换成了一个类似数组的对象
const [a,b,c,d,e]="hello" 
// a => "h"
// b => "e"
// c => "l"
// d => "l"
// e => "0"

****类似数组的对象都有length属性，因此还可以对这个属性解构赋值。***
let {lebgth:len}="hello"
//len => 5

数值和布尔值的解构赋值

解构赋值的规则是，只要等号右边的值不是对象，就先将起转化为对象，所以数值和布尔值的解构赋值，会先将起转为对象，因此，需要注意的是，undefined和null 无法转为对象，所以对它们进行解构赋值都会报错。

函数参数的解构赋值

function add([x,y]) {
   return x+y
}
add([1,2])    //3

函数add的参数实际上不是一个数组，是通过解构得到的变量 x 和y

#####函数参数 解构使用默认值
function move({x=0,y=0}={}) {
  return [x,y]
}
move({x:3,y:8})   //[3,8]
move({x:3})   //[3,0]
move({})   //[0,0]
move()   //[00]

用途

1、交换变量的值

var [x,y] =[y,x]

2、提取JSON数据

var json={
   id：42，
   status: "ok",
   data:[867,5309]
}

let {id,status, data:number}=jsonData;

3、指定函数参数默认值，省去在函数体内部 再写 var foo=config.foo|| "default foo" 短路写法
$.ajax = function (url,{
async=true,
cache = true
})

4、输入模块的指定方法
let {formData,pxTorem,foo}= improt '../../index.js';