一、解构赋值 概念

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

二、解构赋值 类型

(一)解构赋值-数组

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);//["恢复", "治疗"]
复制代码

(三)解构赋值-字符串,数值和布尔值

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

(三)解构赋值-函数参数和返回值

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