如何在 JavaScript 中使用對象和數組解構

解構賦值是 ES6 的一個非常有用的補充，它允許我們從數組中提取值，或者從對像中提取屬性，到一堆不同的變量中。這是一種將數組和對象解包成多個變量的特殊語法。

當您不想將對像或數組作為一個整體傳遞給函數時，解構非常有用，而是作為單獨的部分傳遞。讓我們看看下面的例子是如何做到的。

數組解構

數組解構語法會自動使用數組中相應項的值創建變量：

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, mango, cherry] = fruits;

console.log(apple);     // Apple
console.log(mango);     // Mango
console.log(cherry);    // Cherry

跳過值

可以通過使用額外的逗號並將變量名留空來跳過數組中不需要的項目：

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, , cherry] = fruits;

console.log(apple);     // Apple
console.log(cherry);    // Cherry

解構數組的一部分

您甚至可以選擇解構數組的一部分，並將數組的其餘部分分配給一個新變量：

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, ...remaining] = fruits;

console.log(apple);        // Apple
console.log(remaining);    // ['Mango', 'Cherry']

為對象賦值

如果要將數組的值分配給對象怎麼辦？您可以通過數組解構輕鬆做到這一點：

let user = {};

[user.name, user.age] = ['John Doe', 29];

console.log(user.name);     // John Doe
console.log(user.age);      // 29

默認值

如果數組中的值少於賦值中指定的變量，則不會出現任何錯誤。解構會自動將默認值分配給額外的變量：

const [name, age] = ['Atta'];

console.log(name);      // Atta
console.log(age);     // undefined

你也可以定義 您自己的賦值中變量的默認值：

const [name = 'John Doe', age = 30] = ['Atta'];

console.log(name);      // Atta
console.log(age);       // 30

age 屬性回退到 30 因為它沒有在數組中定義。

交換變量

解構賦值也可以用來交換兩個變量的值：

let a = 15;
let b = 5;

[a, b] = [b, a];

console.log(a);     // 5
console.log(b);     // 15

對象解構

解構賦值也適用於 JavaScript 對象。但是，賦值變量必須具有與對象鍵匹配的名稱。這是因為對象鍵不一定按特定順序。

這是一個基本的例子：

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, whale, monkey } = animals;

console.log(cat);       // 🐱
console.log(whale);     // 🐋
console.log(monkey);    // 🐒

使用新的變量名

如果要將對象的值分配給新鍵而不是使用現有對象鍵的名稱，可以執行以下操作：

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat: newCat, whale: newWhale, monkey: newMonkey } = animals;

console.log(newCat);       // 🐱
console.log(newWhale);     // 🐋
console.log(newMonkey);    // 🐒

默認值

就像數組解構一樣，對象解構也可以使用默認值：

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, sheep = '🐑', lion } = animals;

console.log(cat);       // 🐱
console.log(sheep);     // 🐑
console.log(lion);      // undefined

您還可以在為新變量賦值時設置默認值：

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, sheep: wool = '🐑'} = animals;

console.log(cat);       // 🐱
console.log(wool);      // 🐑

計算的屬性名稱

計算屬性名稱是另一個 ES6 特性，也適用於對象解構。它允許動態計算 JavaScript 對象字面量表示法中的對象屬性名稱。

這是一個使用“計算屬性名稱”表示法計算對象屬性名稱的示例：

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const prop = 'monkey';

const { [prop]: newMonkey } = animals;

console.log(newMonkey);     // 🐒

從對像中提取數組

對象解構也適用於作為值存在於對象內部的數組：

const user = { name: 'Atta', friends: ['Ali', 'Amir'] };

const { name, friends } = user;

console.log(name);      // Atta
console.log(friends);   // ['Ali', 'Amir']

嵌套對象解構

解構時對象可能包含嵌套對象。您必須在賦值左側定義相同的嵌套結構才能從更深的對像中提取值：

const user = {
    name: 'Atta',
    place: {
        city: 'Sahiwal',
        country: 'Pakistan'
    }
};

const { name, place: { city, country } } = user;

console.log(name);      // Atta
console.log(city);      // Sahiwal
console.log(country);   // Pakistan

user 的所有屬性 對像被賦值給賦值中的變量。最後，我們有 name , city , 和 country 不同的變量。請注意，place 沒有變量 因為我們只提取了它的內容。

解構對象的一部分

就像數組一樣，你也可以解構對象的一部分並將對象的其餘部分分配給一個新變量：

const user = {
    name: 'Atta',
    place: {
        city: 'Sahiwal',
        country: 'Pakistan'
    }
};

const { name, ...location } = user;

console.log(name);
// Atta

console.log(location);
// { place: { city: 'Sahiwal', country: 'Pakistan' } }