這篇文章為大家帶來了關於JavaScript的相關知識，其中主要跟大家聊一聊js解構賦值的5個常見場景和實例，有興趣的朋友下面一起來看一下吧，希望對大家有幫助。
解構賦值語法是一種 JavaScript 表達式，透過解構賦值, 可以將屬性/值從物件/陣列中取出，賦值給其他變數。這種語法是 ECMAscript 6 規範引入了一種新語法，可以更輕鬆地從陣列和物件中取得值。
先來看看如何在 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 等框架時，有很多解構賦值的地方，如方法的引入等等。
如果想要建立與屬性名稱不同的變量，那麼可以使用物件解構的別名功能。
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可以使用動態名稱提取到變數屬性（屬性名稱在執行時已知）：
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 的值也跟著變化。
將 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 ]
正如前面介紹的那樣可以在解構數組時為其分配預設值：
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 版本。透過解構，可以快速方便地從物件和陣列中提取屬性或資料到單獨的變數中。它適用於嵌套對象，可以使用 ... 運算子為陣列分配賦值。
推薦學習：《JavaScript影片教學》
以上是聊聊Js解構賦值的5個常見場景和實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
