在 Javascript 中如何解構(gòu)數(shù)組和對(duì)象

在 Javascript 如何對(duì)數(shù)組和對(duì)象進(jìn)行結(jié)構(gòu)？下面，通過(guò)本篇文章，我們一起來(lái)探索一下 Javascript 中的解構(gòu)。

定義

對(duì)于解構(gòu)賦值，沒(méi)有比 MDN 更簡(jiǎn)潔的定義：

解構(gòu)賦值語(yǔ)法是一個(gè) JavaScript 表達(dá)式，可以將數(shù)組中的值或?qū)ο笾械膶傩越獍鼮椴煌淖兞俊?/blockquote>

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

我們使用?方括號(hào)：[]?來(lái)解構(gòu)數(shù)組。 

讓我們看看我們可以使用解構(gòu)賦值的不同場(chǎng)景，考慮一個(gè)包含三個(gè)元素的數(shù)組，現(xiàn)在你想分別用數(shù)組中的值創(chuàng)建三個(gè)不同的變量。舊方法是使用索引為每個(gè)新變量分配數(shù)組中的值。

const arr = [1, 2, 3];
const a = arr[0]; // a = 1
const b = arr[1]; // b = 2
const c = arr[2]; // c = 3

但是，使用解構(gòu)賦值可以大大減少執(zhí)行相同任務(wù)的工作量。

const arr = [1, 2, 3];
const [a, b, c] = arr;
// a = 1, b = 2, c = 3

注意：原始陣列不受影響，保持原樣。只有賦值操作從左到右進(jìn)行。

如果我們只需要數(shù)組中的兩個(gè)元素，我們可以對(duì)兩個(gè)變量使用相同的語(yǔ)法。數(shù)組中超過(guò)兩個(gè)元素的剩余值將被丟棄。

我們也可以根據(jù)需要使用數(shù)組中該元素的空格跳過(guò)中間元素。請(qǐng)參閱示例以更好地理解：

const arr = [1, 2, 3, 4];
// a = 1, b = 2
const [a, b] = arr;
// x = 2, y = 4
const [ , x,  , y] = arr;

使用解構(gòu)交換值

傳統(tǒng)上，我們可以使用臨時(shí)變量顯式交換值，然后在三個(gè)變量之間賦值和重新賦值，但現(xiàn)在我們可以使用解構(gòu)直接賦值，示例如下：

let a = 10, b = 20;

// Old way
let temp = a;
a = b;
b = temp;   // a = 20, b = 10

// Using destructuring
[a, b] = [b, a];   // a = 20, b = 10

從函數(shù)調(diào)用中接收多個(gè)值

讓我們考慮一個(gè)具有很少屬性的對(duì)象 ?restaurant?：

const restaurant = {
    name: 'La\' Pinoz Pizza',
    location: 'Ghaziabad',
    categories: ['Italian', 'Vegetarian', 'Non-Vegetarian', 'Organic'],
    starterMenu: ['Garlic Bread', 'Fries', 'Pastries'],
    mainMenu: ['Pizza', 'Pasta', 'Risotto'],
    order: function(starterIndex, mainIndex) {
        return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
    }
} 

?restaurant?對(duì)象的 order 屬性是一個(gè)函數(shù)，它接受兩個(gè)參數(shù)并返回一個(gè)包含兩個(gè)值的數(shù)組。我們可以在這里使用解構(gòu)，將 Array 的元素直接賦值給變量。

const [starter, mainCourse] = restaurant.order(2,1);
console.log(starter, mainCourse);
// output: Pastries Pasta

嵌套解構(gòu)

顧名思義，非常簡(jiǎn)單，在數(shù)組中解構(gòu)數(shù)組?？紤]一個(gè)帶有嵌套數(shù)組的數(shù)組：[1, 2, [3, 4]]。當(dāng)我們用這個(gè)數(shù)組分配 a,b,c 的值時(shí)，每個(gè)人都會(huì)得到分配的單個(gè)元素，即 a = 1, b = 2, c = [3,4]。如果我們想從數(shù)組 c 中分離出值，那么我們可以使用類似的解構(gòu)語(yǔ)法并實(shí)現(xiàn)它。

const nested = [1, 2, [3, 4]];
const [a, b, c] = nested;  // a = 1, b = 2, c = [3, 4]
const [x, , [y, z]] = nested; // x = 1, y = 3, z = 4

默認(rèn)值

如果我們不知道傳入數(shù)組中包含的數(shù)據(jù)，那么分配給變量的默認(rèn)值是?undefined?。讓我們看一個(gè)例子并理解：

const unknownArray = [1, 5, 9];
const [a, b, c, d] = unknownArray;
console.log(a,b,c,d);
// Output: 1 5 9 undefined

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

我們使用?花括號(hào)：{}?來(lái)解構(gòu)對(duì)象。我們必須提供與對(duì)象中的屬性名稱完全匹配的變量名稱。（盡管我們還將看到一種如何使用不同變量名稱的方法）。

讓我們考慮與上面類似的?restaurant?對(duì)象，還有更多的屬性：

const restaurant = {
    nameOfRestaurant: 'La\' Pinoz Pizza',
    location: 'Ghaziabad',
    categories: ['Italian', 'Vegetarian', 'Non-Vegetarian', 'Organic'],
    starterMenu: ['Garlic Bread', 'Fries', 'Pastries'],
    mainMenu: ['Pizza', 'Pasta', 'Risotto'],
    order: function(starterIndex, mainIndex) {
        return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
    },
    openingHours: {
        thu: {
            open: 11,
            close: 22
        },
        fri: {
            open: 10,
            close: 23
        },
        sat: {
            open: 11,
            close: 23
        }
    }
}

我們可以使用其屬性名稱來(lái)解構(gòu)?restaurant?對(duì)象，現(xiàn)在這里屬性的順序無(wú)關(guān)緊要，因?yàn)橹灰獙傩悦Q匹配就可以訪問(wèn)它。

const {nameOfRestaurant, openingHours, mainMenu} = restaurant;
console.log('Name: ', nameOfRestaurant);
console.log('Opening Hours: ', openingHours);
console.log('Main Menu: ', mainMenu);

// Output:
// Name:  La' Pinoz Pizza
// Opening Hours:  {
//   thu: { open: 11, close: 22 },
//   fri: { open: 10, close: 23 },
//   sat: { open: 11, close: 23 }
// }
// Main Menu:  [ 'Pizza', 'Pasta', 'Risotto' ]

使用不同的變量名

即使我們想更改與屬性名稱不同的變量名稱，我們?nèi)匀恍枰崆爸缹傩悦Q。所以查找傳入的對(duì)象總是一個(gè)好習(xí)慣。好的，所以我們可以使用?冒號(hào)(:) ?為屬性名稱指定別名。

const {nameOfRestaurant: name, openingHours: timing, mainMenu: menu} = restaurant;
console.log('Name: ', name);
console.log('Opening Hours: ', timing);
console.log('Main Menu: ', menu);
// We get the output similar to the above output.

設(shè)置默認(rèn)值

我們總是可以在解構(gòu)對(duì)象時(shí)為變量分配一個(gè)默認(rèn)值。如果值存在于對(duì)象中，則將其分配給變量；如果不存在，則將默認(rèn)值分配給變量。

const {nameOfRestaurant: name = 'PizzaHut', menu = [ ]} = restaurant;
// Lets assume that the restaurant object has no property with name 'nameOfRestaurant', 
// In this case the name becomes 'PizzaHut'. 
// On the other hand there is no menu property so menu is assigned with empty array.

變異值

在使用對(duì)象解構(gòu)來(lái)改變值時(shí)，我們應(yīng)該小心花括號(hào)，因?yàn)?javascript 會(huì)在遇到開(kāi)放花括號(hào)時(shí)立即期望代碼塊。

為了解決這種情況，我們將解構(gòu)代碼包裝在括號(hào)內(nèi)。

let a = 11;
let b = 23;
let obj = { a: 120, b: 34 };
({ a, b } = obj);  // Important line
console.log(a, b);  // a = 120, b = 34