在Javascript中怎么解構數組和對象

這篇文章主要介紹了在Javascript中怎么解構數組和對象，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

定義

對于解構賦值，沒有比 MDN 更簡潔的定義：

解構賦值語法是一個 JavaScript 表達式，可以將數組中的值或對象中的屬性解包為不同的變量。

數組解構

我們使用方括號：[]來解構數組。 

讓我們看看我們可以使用解構賦值的不同場景，考慮一個包含三個元素的數組，現在你想分別用數組中的值創建三個不同的變量。舊方法是使用索引為每個新變量分配數組中的值。

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

但是，使用解構賦值可以大大減少執行相同任務的工作量。

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

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

如果我們只需要數組中的兩個元素，我們可以對兩個變量使用相同的語法。數組中超過兩個元素的剩余值將被丟棄。

我們也可以根據需要使用數組中該元素的空格跳過中間元素。請參閱示例以更好地理解：

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

使用解構交換值

傳統上，我們可以使用臨時變量顯式交換值，然后在三個變量之間賦值和重新賦值，但現在我們可以使用解構直接賦值，示例如下：

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

從函數調用中接收多個值

讓我們考慮一個具有很少屬性的對象 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對象的 order 屬性是一個函數，它接受兩個參數并返回一個包含兩個值的數組。我們可以在這里使用解構，將 Array 的元素直接賦值給變量。

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

嵌套解構

顧名思義，非常簡單，在數組中解構數組。考慮一個帶有嵌套數組的數組：[1, 2, [3, 4]]。當我們用這個數組分配 a,b,c 的值時，每個人都會得到分配的單個元素，即 a = 1, b = 2, c = [3,4]。如果我們想從數組 c 中分離出值，那么我們可以使用類似的解構語法并實現它。

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

默認值

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

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

對象解構

我們使用花括號：{}來解構對象。我們必須提供與對象中的屬性名稱完全匹配的變量名稱。（盡管我們還將看到一種如何使用不同變量名稱的方法）。

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

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
        }
    }
}

我們可以使用其屬性名稱來解構restaurant對象，現在這里屬性的順序無關緊要，因為只要屬性名稱匹配就可以訪問它。

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' ]

使用不同的變量名

即使我們想更改與屬性名稱不同的變量名稱，我們仍然需要提前知道屬性名稱。所以查找傳入的對象總是一個好習慣。好的，所以我們可以使用冒號(:) 為屬性名稱指定別名。

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.

設置默認值

我們總是可以在解構對象時為變量分配一個默認值。如果值存在于對象中，則將其分配給變量；如果不存在，則將默認值分配給變量。

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.

變異值

在使用對象解構來改變值時，我們應該小心花括號，因為 javascript 會在遇到開放花括號時立即期望代碼塊。

為了解決這種情況，我們將解構代碼包裝在括號內。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“在Javascript中怎么解構數組和對象”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!