ES6 解构赋值

什么是解构赋值? 一种另类且简便的变量赋值方式

什么样的数据可以被解构?可迭代数据或者存在相应的包装类型的数据
(JavaScript中的包装类型：Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle)

---

主要介绍常用的三种类型的解构赋值:

• 解构数组
• 解构对象
• 解构字符串

---

1.解构数组 -- 严格按照源数组index,对变量赋值

//一维数组
let [one,two,three] = [1,2,3];
one //1
two //2
three //3

//多维数组
let [x,y] = [[12],[12,34,56]];
x //[12]
y //[12,34,56]

//不需要赋值的index可以跳过
let [z,,,h] = [1,2,3,[23,45,76]];
z //1
h //[23,45,76]

//没有匹配数据时，返回undefined
let [i,j] = [1];
i //1
j //undefined
----------
//可以设置默认值 -- 当某一个位置数据 === undefined,则会选取默认值进行赋值
let [x,y=22] = [1];
let [z=33] = [undefined];
let [h=44] = [null];
y //22
z //33
h //null

//惰性求值
function foo(){
    console.log('lazy evaluation');
    return 33;
}
let [k = foo()] = [1];
let [m = foo()] = [];

k //1 
//-- 此种情况下不会执行foo函数，类似于 || ,
//先找寻是否有值可取，没有的情况寻求默认值，也就是执行foo()
m //33

---

2.解构对象 -- 严格根据属性名提取对应的值 ,对变量的顺序没有任何要求

//基本用法
let {user,pwd,valid} = {user:'babe',pwd:'123456'};
user //"babe"
pwd //"123456"
valid //undefined

//变量名与属性名不一致的情况，需要定义别名
let {user:u,pwd:p,valid:v} = {user:'babe',pwd:'123456',valid:'xf3g'};
u // "babe"
p //"123456"
v // "xf3g"

//引申出对象解构赋值的全写形式 -> 省略别名,变量名默认就跟属性名一致了
({user:user,pwd:pwd,valid:valid} = {user:'babe',pwd:'123456',valid:'xf3g'})
//{属性名:变量名} <=> {user:u}  最终我们使用的是变量名,即 u 

----------
//解构嵌套结构的对象 --嗯，要时刻谨记{属性名:变量名}这种模式
//根据元对象,可变换着进行解构
let obj = {
  repo:{
    qty:1000,
    settleAmount:3000
  }
};
let {repo:{qty:number,settleAmount:account}} = obj
number //1000 
account //3000
//要获得repo,则要下面这种方式
let {repo,repo:{qty,settleAmount}} = obj;
repo //{qty: 1000, settleAmount: 3000}
qty //1000
settleAmount //3000

//解构失败,当前变量为undefined.如果继续在当前变量下面继续解构，则报错
//就好像一个对象为undefined,仍然去获取对象的属性 -- 报错无疑
let {user:{name}} = {pwd:'123456'};
//Uncaught TypeError: Cannot destructure property `name` of 'undefined' or 'null'.

---

3.解构字符串 -- 字符串被转换成一个类数组对象，所以解构跟数组一样

let [i,j] = "BO";
i //"B"
j //"O"

---

用途:

交换变量值
[x,y] = [y,x];

导入部分模块的功能
import {Component} from '@angular/core';

少写很多代码一些代码 -- 获取返回值数据的时候可直接解构,避免创建不必要的临时变量
//res = {status:200,data:[...]}
let {status,data} = res;

---

如果bug,请指正Thanks♪(･ω･)ﾉ