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);//["恢復", "治療"]
複製代碼

（三）解構賦值-字符串,數值和布爾值

項目	字符串	數值	布爾值
數組結構方式	支持，解構字符	不支持	不支持
對象解構方式	支持，解構屬性	支持，解構屬性	支持，解構屬性

（三）解構賦值-函數參數和返回值

函數的解構賦值，其實解構前面的幾大數據類型，而後賦值給函數參數，或者將函數返回的數據類型，用解構賦值的方式讀取出來。