聊聊Js解構賦值的5個常見場景和範例

本篇文章給大家帶來了關於JavaScript的相關知識，其中主要跟大家聊一聊js解構賦值的5個常見場景和範例，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

解構賦值語法是一種 JavaScript 表示式，通過解構賦值, 可以將屬性/值從物件/陣列中取出，賦值給其他變數。這種語法是 ECMAscript 6 規範引入了一種新語法，可以更輕鬆地從陣列和物件中獲取值。

1. 提取資料

先來看看如何在 JavaScript 中解構物件，可以從這個商品物件的簡單範例開始。

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;
登入後複製

這樣，就可以通過以下方式存取相應的屬性：

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
登入後複製

解構，能夠讓程式碼更加清晰簡潔。如果需要解構一個更復雜的物件呢？即物件中的物件。

現在假設需要從商品列表資料中獲取其中一個商品的屬性，如下：

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];
登入後複製

在這裡，產品列表巢狀了幾層，需要存取商品的資訊，可以解構儘可能多的級別以獲取商品物件的屬性。

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275
登入後複製

上面的程式碼僅用於展示其用法，專案開發中不建議再陣列中這樣獲取物件資訊。

通常，資料列表不一定非要陣列，從獲取效率來說，map 物件的存取比陣列效率要高。可以將上面的資料改為 map 物件，如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275
登入後複製

在 JavaScript 中，資料可以是變數和方法，因此解構賦值也適合用在函數引數的定義，如下：

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解構賦值",
    remark: "解構賦值的實用場景介紹",
});
登入後複製

在使用 React 或 Vue 等框架時，有很多解構賦值的地方，如方法的引入等等。

2. 別名取值

如果想建立與屬性名稱不同的變數，那麼可以使用物件解構的別名功能。

const { identifier: aliasIdentifier } = expression;
登入後複製

identifier 是要存取的屬性的名稱，aliasIdentifier 是變數名稱。具體用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275
登入後複製

3. 動態屬性

可以使用動態名稱提取到變數屬性（屬性名稱在執行時已知）：

const { [propName]: identifier } = expression;
登入後複製

propName 表示式應計算為屬性名稱（通常是字串），識別符號應指示解構後建立的變數名稱，用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }
登入後複製

上面程式碼中，可以通過更新 productKey 的值進而使得 product 的值也跟隨變化。

4. 物件解構中的 Rest

將 rest 語法新增到解構中，Rest 屬性收集那些尚未被解構模式拾取的剩餘可列舉屬性鍵。

const { identifier, ...rest } = expression;
登入後複製

解構後，變數識別符號包含屬性值。 rest 變數是一個具有其餘屬性的普通物件。

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }
登入後複製

對於陣列，可以通過 Rest 的實現首尾值的獲取：

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]
登入後複製

5. 預設值

正如前面介紹的那樣可以在解構陣列時為其分配預設值：

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1
登入後複製

這樣，可以將確保在 B、A 未定義的情況下有一個預設值。

總結

解構是一個非常實用的特性，它被新增到了 JavaScript 的 ES6 版本中了。通過解構，可以快速方便地從物件和陣列中提取屬性或資料到單獨的變數中。它適用於巢狀物件，可以使用 ... 運運算元為陣列分配賦值。

推薦學習：《》

以上就是聊聊Js解構賦值的5個常見場景和範例的詳細內容，更多請關注TW511.COM其它相關文章！