解構(gòu)賦值是對賦值運算符的擴展。

通過解構(gòu)，可以更加簡單的獲取復雜對象的屬性

解構(gòu)模型

解構(gòu)的源，解構(gòu)賦值表達式的右邊部分
解構(gòu)的目標，解構(gòu)賦值表達式的左邊部分

對象屬性解構(gòu)

當變量名稱與對象中的屬性名稱一致時，可簡寫

const PI = Math.PI;
const E = Math.E;

//等價于

const { PI, E } = Math;

函數(shù)參數(shù)解構(gòu)

//解構(gòu)
// const PI = Math.PI;
// const E = Math.E;

const { PI, E } = Math;

const circle = {
  label: "circleX",
  radius: 2
};

//設置參數(shù)默認值 {precision=2}，={}表示參數(shù)可選,設置其他參數(shù)值 {precision:4}
const circleArea = ({ radius }, { precision = 2 } = {}) => (PI * radius * radius).toFixed(precision);

console.log(circleArea(circle, { precision: 4 }));

{attr}使用解構(gòu)方式獲取對象參數(shù)中的對應屬性,這樣在函數(shù)內(nèi)部就可以直接使用該屬性變量 attr，而不是通過對象再去獲取對應的屬性 obj.attr 的方式去使用該屬性值

{attr=value}使用該方式設置解構(gòu)參數(shù)的默認值

{radius}對 circle 對象進行解構(gòu)，獲取當前函數(shù)所需屬性

字符串的解構(gòu)

let [a, b, c, d, e] = "hello";
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

數(shù)組解構(gòu)

如果不需要當前位置解構(gòu)，對應的位置置空，但是必須用逗號隔開

const [one, two, , , five] = [1, 2, 3, 4, 5];
console.log(one); //1
console.log(two); //2
console.log(five); //5

REST 運算符參與的解構(gòu)–…

數(shù)組解構(gòu)

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); //1
console.log(rest); //[2,3,4,5]

構(gòu)建新的數(shù)組

const array1 = [...rest];
console.log(array1); //[2,3,4,5]

array1 是 rest 副本，淺拷貝

屬性解構(gòu)

解構(gòu)

const { temp0, temp1, ...person } = obj;
console.log(temp0);
console.log(person);

構(gòu)建新的對象鍵值對

const newObj = {
  ...person
};

newObj 是 person 副本，淺拷貝

解構(gòu)的賦值

解構(gòu)的過程中：

如果左邊的變量在右邊存在匹配值，則解構(gòu)后值為匹配值；

let [a] = [3]; // a = 3

如果左邊的變量設置了默認值，并且在右邊存在匹配值，則解構(gòu)后值為匹配值；

let [a = 2] = [3]; // a = 3

如果左邊的變量在右邊不存在匹配值，則解構(gòu)后值為 undefined；

let [a] = []; //a=undefined
let [a] = [undefined]; //a=undefined

如果左邊的變量設置了默認值，并且在右邊不存在匹配值，則解構(gòu)后值為默認值；

let [a = 2] = []; // a = 2
let [a = 2] = [undefined]; // a = 2

如果右邊對應匹配值為 undefined，也即沒有匹配值

示例：文章來源地址http://www.zghlxwxcb.cn/news/detail-421199.html

let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

到了這里，關(guān)于[ES6]解構(gòu)與賦值的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！