ES6 – 变量的解构赋值-一一网

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

let [a,b,c]=[1,10,100]
    console.log(a,b,c)//1 10 100
    //等式两边"模式"进行匹配，从而进行赋值
    let [i,[[[j]],k]]=[1,[[[2]],3]]//这种看看就好，知道这样也可以执行就行
    console.log(i,j,k)//1 2 3

    let [,,x]=[1,2,3]
    console.log(x)//3
复制代码

解构不成功,相应的变量为undefined

 let [i1,i2]=[]
 console.log(i1,i2)//undefined undefined
 let [i3,i4]=[10]
 console.log(i3,i4)//10 undefined
复制代码

部分解构成功

let [i5,i6]=[1,2,3]
 console.log(i5,i6)//1 2
复制代码

等式右边不是可遍历的结构，那么将报错

let [i7,i8]=1 //1 is not iterable
 let [i9] =true//true is not iterable
复制代码

解构赋值允许指定默认值

let [i10,i11='hi']=[100]
 console.log(i10,i11)//100 'hi'
复制代码

注意这种情况

    let [i111=i12,i12=10]=[]//报错，i111=i12 此时i12还未申明
     // 而：
    let [i13=i14,i14]=[1,2]
    console.log(i13,i14)  //1 2
复制代码

对象的解构赋值

let {foo,bar}={foo:'name',bar:'age'}
    console.log(foo,bar) // name age
    //但其实上面解构赋值是下面的缩写
    let {foo1:foo1,bar1:bar1}={foo1:'name',bar1:'age'}
    console.log(foo1,bar1) // name age
    // 如果继续变换
    let {foo2:name,bar2:age}={foo2:'name',bar2:'age'}
    // console.log(foo2,bar2)//报错
    console.log(name,age)//正确写法 name age
    // 即foo2是模式，name才是赋值的变量
复制代码

解构赋值的几大应用：

1.交换变量

 let a10=10,b100=100;
 [a10,b100]=[b100,a10]
 console.log(a10,b100)//100 10
复制代码

2.函数返回中取出多个值

function test10(){
      return [1,2,3]
    }
    function test100(){
      return {
        nameT:'apple',
        ageT:100
      }
    }
    let [j1,j2,j3]=test10()
    console.log(j1,j2,j3)//1 2 3
    let {nameT,ageT}=test100()
    console.log(nameT,ageT) //'apple' 100
复制代码

3.提取JSON数据

function getJSON(){
      return {
        "app1":100,
        "blue":"hello blue",
        "data": 110
      }
    }
    let {app1,blue,data:number}=getJSON()
    console.log(app1,blue,number)//100 "hello blue" 110
复制代码