Javascript ES6 专栏 | 解构赋值

1、解构赋值 概念

解构赋值，是ES6中给变量赋值的一种方法。顾名思义，他是经过某一语法规则，解析某一事物的结构来进行赋值。结构的对象一般有数组，对象，函数参数等。

2、解构赋值 类型

（一）解构赋值-数组

1.基本语法及原理

• 语法：[variable1,variable2,...,variableN]=[val1,val2,...,valN]
• 原理：数组的解构赋值，待赋值的变量与数组中的值的位置一一对应，如variable1=arr[0]，是根据变量与书组织的对应位置来解构并赋值的。
• 代码示例：

//目标解构数组
var person=["jk","female",23];
//执行解构与赋值
var [name,gender,age]=person;
/*传统的赋值操做
var name=person[0],gender=person[1],age=person[2];
*/
//测试解构赋值结果
console.log(name,gender,age)//"jk" "female" 23
复制代码

2.高级操做

嵌套数组的解构赋值

• 语法：[[variable1,...,variableN]]=[[val1,...,valN]]
• 原理：基本语法的屡次使用，如何屡次使用，看代码示例。当不须要匹配某一项是，直接使用 逗号 分开，留出空白便可。
• 代码示例：

//目标解构数组
var person=["jk","female",23,[500,300]];
//执行解构赋值操做
//综合式
var [,,,[blood,magic]]=person;
/*分步式
var [,,,primaryInfo]=person;
var [blood,magic]=primaryInfo;
*/
//检测解构赋值结果
console.log(blood,magic)//500,300
复制代码

解构赋值的剩余匹配

• 语法：[variable1,...,...variableName]=[val1,...,valN];
• 解释：匹配除了...variableName以前的全部项以外的数组剩余全部项，匹配结果是包含了剩余全部项的一个数组
• 代码示例：

//目标解构数组
var person=["jk","female",23];
//执行解构赋值操做
var [,...oth]=person;
//检测解构赋值结果
console.log(oth)//["female", 23]
复制代码

解构赋值变量的默认值 问题

• 解释：解构赋值会覆盖变量默认值，只有当解构项不存在或者时，变量才会取默认值
• 代码示例：

//目标解构数组
var person=["jk","female",23,,undefined];
//执行解构赋值操做
var [,,,blood=500,magic=300]=person;
//检测解构赋值结果
console.log(blood,magic)//500 300
复制代码

（二）解构赋值-对象

1. 基本语法及原理

• 语法：var {attr3, attr2, attr10, ..., attrN} = targetObj
• 原理：对象的结构赋值，其实就是使用{}和对象的属性名来匹配或者说读取对象中属性的值，同时将读到的结果赋值给一个变量。默认状况下，变量名即为对象的属性名。支持自定义，后续演示。
• 代码示例：

//解构对象
var person = {name:"jk",gender:"female",age:24} ;

// ES6 简单的结构赋值 语法
var {name,gender,age}=person;

// ES6 以前的解构赋值实现
var name=person.name,gender=person.gender,age=person.age;
var name=person["name"],gender=person["gender"],age=person["age"]

// 测试
console.log(name);//"jk"
console.log(gender);//"female"
console.log(age);//24
复制代码

2. 高阶操做

读取和自定义变量名

• 语法: var {attr3:arrayName1, attr2:arrayName2, attr10:arrayName3, ..., attrN:arrayNameN} = targetObj
• 语法解释：首先是根据属性名匹配读取对象的属性值，而后使用 :变量名 格式将属性值赋值给目标变量
• 代码示例：

var targetObj={name:"jk",gender:"female",age:23};
var {name:friendName,gender:friendGender,age:friendAge}=targetObj;
console.log(friendName,friendGender,friendAge);//jk female 23
复制代码

数组和对象的综合解构赋值

• 语法：

targetObj = {attr_1:[arrayVal_1, ..., arrayVal_N], ..., attr_N:attrVal_N} 
var {attr_1:[arrayName_1, ..., arrayName_N], ..., attr_N}=targetObj
复制代码

• 语法解释：综合解构赋值应用的仍是对象和数组的解构赋值规律
• 代码示例：

// 目标解构对象
var person = {
    name:"jk",
    gender:"male",
    equipments:[{weapon:"迫击炮",hand:"金手",body:"金甲",foot:"钢靴"},"灵丹","烟雾"]
    };

// 数组与对象的综合解构赋值 综合式
var {equipments:[{weapon,hand,body,foot},tool1,tool2]}=person;
// 数组与对象的综合解构赋值 分步式
var {equipments}=person;
var  [equipment,tool1,tool2]=equipments;
var {weapon,hand,body,foot}=equipment;

// 测试
console.log(weapon,hand,body,foot,tool1,tool2);//迫击炮、金手、金甲、钢靴、灵丹、烟雾
复制代码

匹配剩余属性值

• 语法: var {attr10,...,...arrayName}=targetObj
• 语法解释：读取和匹配仍旧使用属性名，单只匹配和读取部分，其他部分可使用 ...arrayName 格式所有匹配，不过会以对象的形式独立出来。
• 代码示例：

// 目标解构对象
var person = {
    name:"jk",
    gender:"male",
    equipments:[{weapon:"迫击炮",hand:"金手",body:"金甲",foot:"钢靴"},"灵丹","烟雾"]
    };

// 解构 person 对象 ,将除equipments属性外的属性 独立成一个新对象 赋值给 other 变量
var {equipments,...other}=person;

// 测试
console.log(equipments,other);//other={name: "jk", gender: "male"}
复制代码

合并对象

• 语法: objA={attr1:attrVal_1,...,...objB}
• 语法解释：...objB,至关于objA的剩余属性
• 代码示例：

// 并入对象
var skills={
    attack:["大吼","霸气爷们儿券"],
    defend:["铁壁","引力场"],
    cure:["恢复","治疗"]
}

// 将skill 对象属性 并入person对象中 
var person = {
    name:"jk",
    gender:"male",
    equipments:[{weapon:"迫击炮",hand:"金手",body:"金甲",foot:"钢靴"},"灵丹","烟雾"],
    ...skills
    // ...skill 等价于 ...{attack:["大吼","霸气爷们儿券"],defend:["铁壁","引力场"],cure:["恢复","治疗"]}
    };

// 测试
console.log(person.attack);//["大吼", "霸气爷们儿券"]
console.log(person.defend);//["铁壁", "引力场"]
console.log(person.cure);//["恢复", "治疗"]
复制代码

（三）解构赋值-字符串,数值和布尔值

项目	字符串	数值	布尔值
数组结构方式	支持，解构字符	不支持	不支持
对象解构方式	支持，解构属性	支持，解构属性	支持，解构属性

（三）解构赋值-函数参数和返回值

函数的解构赋值，其实解构前面的几大数据类型，而后赋值给函数参数，或者将函数返回的数据类型，用解构赋值的方式读取出来。