JavaScript解構(gòu)賦值的實(shí)用技巧是什么

這篇文章跟大家分析一下“JavaScript解構(gòu)賦值的實(shí)用技巧是什么”。內(nèi)容詳細(xì)易懂，對(duì)“JavaScript解構(gòu)賦值的實(shí)用技巧是什么”感興趣的朋友可以跟著小編的思路慢慢深入來(lái)閱讀一下，希望閱讀后能夠?qū)Υ蠹矣兴鶐椭?。下面跟著小編一起深入學(xué)習(xí)“JavaScript解構(gòu)賦值的實(shí)用技巧是什么”的知識(shí)吧。

一、基本概念

為什么需要解構(gòu)呢，先來(lái)看一個(gè)例子：

const student = {
    name: 'ZhangSan',
    age: 18,
    scores: {
        math: 19,
        english: 85,
        chinese: 100
    }
};

function displayInfo(student) {
    console.log('name:', student.name);
    console.log('math:', student.scores.math);
    console.log('english:', student.scores.english);
    console.log('chinese:', student.scores.chinese);
}

displayInfo(student);

這樣寫(xiě)也能實(shí)現(xiàn)預(yù)期效果，但是代碼看起來(lái)比較冗余。并且，如果對(duì)象內(nèi)部嵌套較深時(shí)，那么對(duì)象的訪(fǎng)問(wèn)鏈就會(huì)變得很長(zhǎng)。雖然這并不是什么大問(wèn)題，但是使用解構(gòu)賦值會(huì)讓代碼變得更簡(jiǎn)單和易讀。

下面就來(lái)看看什么是解構(gòu)賦值。MDN 中對(duì)解構(gòu)賦值的描述：

解構(gòu)賦值語(yǔ)法是一種 Javascript 表達(dá)式。通過(guò)解構(gòu)賦值, 可以將屬性值從對(duì)象/數(shù)組中取出,賦值給其他變量。

實(shí)際上，結(jié)構(gòu)賦值就是將復(fù)雜的結(jié)構(gòu)分解為簡(jiǎn)單的部分。解構(gòu)賦值語(yǔ)法可以用于變量聲明或者變量賦值。除此之外，還可以使用嵌套的解構(gòu)賦值語(yǔ)法來(lái)處理嵌套結(jié)構(gòu)。

比如，對(duì)上面例子中的對(duì)象進(jìn)行解構(gòu)：

function displayInfo(student) {
  const { name, scores: {math, english, chinese} } = student; 
    console.log('name:', name);
    console.log('math:', math);
    console.log('english:', english);
    console.log('chinese:', chinese);
}

這樣看起來(lái)是不是簡(jiǎn)潔多了。

二、解構(gòu)分類(lèi)

根據(jù)MDN對(duì)解構(gòu)賦值的定義，我們可以將解構(gòu)賦值分為兩大類(lèi)：

• 對(duì)象解構(gòu)

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

下面就分別來(lái)看看這兩種解構(gòu)賦值。

1. 對(duì)象的解構(gòu)賦值

對(duì)象解構(gòu)又稱(chēng)為對(duì)象屬性分配模式，它允許我們將對(duì)象的屬性值分配給相應(yīng)的變量。它有兩種寫(xiě)法：

let obj =  {x: 1, y: 2, z: 3};

let {x: a, y: b, z: c} = obj;
console.log(a, b, c)

let {x, y, z} = obj;
console.log(x, y, z)

• 第一種（第3行）是對(duì)象解構(gòu)的完整形式，對(duì)象的每個(gè)屬性都將被分配一個(gè)變量，其中冒號(hào)前面的是源對(duì)象中的屬性，冒號(hào)后面的是要賦值屬性;

• 第二種（第5行）是對(duì)象解構(gòu)的簡(jiǎn)寫(xiě)形式，對(duì)象的屬性與要分配的屬性一致時(shí)可以使用這種形式。

如果需要給已有變量賦值，就需要額外注意了：

let obj =  {x: 1, y: 2, z: 3};

let x = 0, y = 0, z = 0;

({x, y, z} = obj)
console.log(x, y, z)

這里需要注意，需要將賦值表達(dá)式使用括號(hào)括起來(lái)，如果省略，解構(gòu)對(duì)象將被視為一個(gè)塊語(yǔ)句，而塊語(yǔ)句時(shí)不能放在賦值表達(dá)式左側(cè)的。

當(dāng)使用解構(gòu)賦值時(shí)，可以給變量傳遞一個(gè)默認(rèn)值：

const person = {
    name: 'ZhangSan',
    height: 180
};

const { name, height, age = 25 } = person;

console.log(name, height, age);

這里我們給age分配了一個(gè)默認(rèn)值，當(dāng)對(duì)源對(duì)象上不存在age屬性時(shí)，age就會(huì)被賦上默認(rèn)值25，而不是undefined。

如果分配的對(duì)象屬性為undefined，那么就會(huì)使用默認(rèn)值：

const {x = 2} = {x: undefined};
console.log(x);    // 2

2. 數(shù)組的解構(gòu)賦值

在使用數(shù)組解構(gòu)時(shí)，實(shí)際上會(huì)使用迭代器將所需要的值與結(jié)構(gòu)源分開(kāi)。因此，我們可以對(duì)可迭代值使用數(shù)組結(jié)構(gòu)，包括字符串、數(shù)組、集合、函數(shù)映射、DOM元素。我們還可以將解構(gòu)賦值與擴(kuò)展運(yùn)算符結(jié)合使用。

（1）字符串

let message = 'Hello';
let [a, b] = message;
let [x, y, ...z] = message;

console.log(a, b);        // H e
console.log(x, y, z);     // H e ['l', 'l', 'o']

（2）數(shù)組

let numbers = [1, 2, 3];
let [x, y, z] = numbers;

console.log(x, y, z);    // 1 2 3

（3）集合

let set = new Set().add('foo').add('bar');
let [a, b] = set;

console.log(a, b);      // foo bar

（4）Map

let map = new Map().set('a', 1).set('b', 2);
let [x, y] = map;

console.log(x, y);    // ["a", 1] ["b", 2]

在數(shù)組的解構(gòu)中，存儲(chǔ)變量的數(shù)組中的每個(gè)變量都會(huì)映射到解構(gòu)數(shù)組上相同索引處的相應(yīng)項(xiàng)。

如果解構(gòu)中某一項(xiàng)不需要，可以使用逗號(hào)操作符進(jìn)行分隔：

const rgb = [200, 255, 100];

const [,, blue] = rgb;

console.log(blue);   // 100

與對(duì)象解構(gòu)一樣，可以使用數(shù)組解構(gòu)為局部變量設(shè)置默認(rèn)值：

const rgb = [200];

const [red = 255, green, blue = 255] = rgb;

console.log(`R: ${red}, G: ${green}, B: ${blue}`);

如果變量已經(jīng)存在，就可以這么寫(xiě)：

let red = 100, green = 200, blue = 50;

const rgb = [200, 255, 100];

[red, green] = rgb;

console.log(`R: ${red}, G: ${green}, B: ${blue}`);

與對(duì)象解構(gòu)不同的是，這里不需要括號(hào)將數(shù)組括起來(lái)。

如果給變量分配的值是undefined，那么就會(huì)使用默認(rèn)值：

const [x = 1] = [undefined];
console.log(x);    // 1

這里的默認(rèn)值并不一定是一個(gè)固定值，它可以是一個(gè)計(jì)算屬性：

function foo() {
    return 1;
}

let obj1 = {x: 2};
let obj2 = {x: undefined};

let {x=foo()} = obj1;
console.log(x);     // 2

let {x=foo()} = obj2;
console.log(x);     // 1

如果我們想將數(shù)組中的一些元素分配給變量，而將數(shù)組中的其余項(xiàng)分配給特定的變量就可以這樣做：

let [greeting,...intro] = ["Hello", "I" , "am", "CUGGZ"];

console.log(greeting);  // "Hello"
console.log(intro);     // ["I", "am", "CUGGZ"]

三、嵌套解構(gòu)

上面我們說(shuō)的解構(gòu)的知識(shí)普通的數(shù)組和對(duì)象。實(shí)際上，解構(gòu)賦值可以用于嵌套數(shù)組和嵌套對(duì)象。比如，文章最開(kāi)始的例子中，就是解構(gòu)的嵌套對(duì)象：

const student = {
    name: 'ZhangSan',
    age: 18,
    scores: {
        math: 19,
        english: 85,
        chinese: 100
    }
};

const { name, scores: {math, english, chinese} } = student;

再來(lái)看一個(gè)嵌套數(shù)組解構(gòu)的例子：

let numbers = [1, [2, 3, 4], 5];
let [a, [b, c, d], e] = numbers;
console.log(a, b, c, d, e); // 1 2 3 4 5

四、使用技巧

1. 函數(shù)解構(gòu)

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

可以對(duì)函數(shù)參數(shù)使用解構(gòu)賦值：

function foo([a, b]) {
    console.log(a + b);
}
foo([1, 2]);       // 3


function bar({x, y}) {
    console.log(x, y);
}
foo({x: 1, y: 2}); // 1 2

可以對(duì)函數(shù)返回值使用解構(gòu)賦值：

function getStudentInfo() {
    return {
        name: 'ZhangSan',
        age: 18,
        scores: {
            math: 19,
            english: 85,
            chinese: 100
        }
    };
}
const { name, scores: {math, english, chinese} } = getStudentInfo();
console.log(name, math, english, chinese);

2. 循環(huán)中的解構(gòu)

當(dāng)我們需要循環(huán)中的對(duì)象鍵值時(shí)，也可以使用對(duì)象解構(gòu)：

const students = [
    {
        'name': 'ZhangSan',
        'grade': 80
    },
    {
        'name': 'LiSi',
        'grade': 75
    },
    {
        'name': 'WangWu',
        'grade': 95
    }
];

for(let {name, grade} of students){
    console.log(name, grade);
}

3. 動(dòng)態(tài)屬性解構(gòu)

很多時(shí)候我們不知道對(duì)象屬性的key，只有運(yùn)行時(shí)才知道。比如有一個(gè)方法getStudentInfo，它以一個(gè)key為參數(shù)，并返回相應(yīng)的屬性值：

getStudentInfo('name'); 
getStudentInfo('age');

這里傳遞給getStudentInfo方法的參數(shù)是動(dòng)態(tài)的，因此可以這樣寫(xiě)：

const getStudentInfo = key => {
  const {[key]: value} = student;
  return value;
}

需要注意，包裹key的方括號(hào)不能少，否則會(huì)出現(xiàn)undefined值。

4. 交換變量

數(shù)組結(jié)構(gòu)一個(gè)很實(shí)用的功能就是實(shí)現(xiàn)交換局部變量。通常，我們會(huì)借助臨時(shí)變量來(lái)實(shí)現(xiàn)變量的交換：

let width = 300;
let height = 400;

let temp = width;
width = height;
height = temp;

console.log(width, height)

如果使用數(shù)組的解構(gòu)賦值，就會(huì)變得很簡(jiǎn)單：

let width = 300;
let height = 400;

[width, height] = [height, width];

console.log(width, height)

5. 數(shù)組拷貝

可以使用解構(gòu)賦值和rest運(yùn)算符來(lái)實(shí)現(xiàn)數(shù)組的拷貝：

const rgb = [200, 255, 100];

const [...newRgb] = rgb;
// 等同于 const newRgb = [...rgb]

console.log(newRgb)

四、解構(gòu)賦值注意點(diǎn)

為了防止從數(shù)組中取出一個(gè)值為undefined的對(duì)象，可以在表達(dá)式左邊的數(shù)組中為任意對(duì)象預(yù)設(shè)默認(rèn)值。

意思是：定義這個(gè)變量或者變量的值設(shè)置為 undefined的時(shí)候，而null、 '' 、false 在變量解析的過(guò)程中都是有值得情況，所以我們默認(rèn)賦值會(huì)不成功。

示例如下：

const {a = '1', b = '2', c = '3', d = '4', e = '5'} = {a: 'a', b: null, c: undefined, d: false, e: ''}
console.log(a); //a
console.log(b); //null
console.log(c); //3
console.log(d); //false
console.log(e); // ""

如果只是根據(jù)屬性的存在與否來(lái)綁定默認(rèn)值的時(shí)候，可以使用解構(gòu)賦值。

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱(chēng)為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶(hù)端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

關(guān)于JavaScript解構(gòu)賦值的實(shí)用技巧是什么就分享到這里啦，希望上述內(nèi)容能夠讓大家有所提升。如果想要學(xué)習(xí)更多知識(shí)，請(qǐng)大家多多留意小編的更新。謝謝大家關(guān)注一下億速云網(wǎng)站！