這篇文章主要講解了“JavaScript解構(gòu)賦值的方法有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript解構(gòu)賦值的方法有哪些”吧！
創(chuàng)新互聯(lián)公司為客戶提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開(kāi)發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開(kāi)發(fā)、WEB系統(tǒng)開(kāi)發(fā)、微信二次開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)等網(wǎng)站方面業(yè)務(wù)。
先來(lái)看看如何在 JavaScript 中解構(gòu)對(duì)象，可以從這個(gè)商品對(duì)象的簡(jiǎn)單示例開(kāi)始。
重慶分公司
重慶分公司
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;這樣，就可以通過(guò)以下方式訪問(wèn)相應(yīng)的屬性：
console.log(id); // 1 console.log(price); // 120 console.log(title); // Nike Air Zoom Pegasus 38
解構(gòu)，能夠讓代碼更加清晰簡(jiǎn)潔。如果需要解構(gòu)一個(gè)更復(fù)雜的對(duì)象呢？即對(duì)象中的對(duì)象。
現(xiàn)在假設(shè)需要從商品列表數(shù)據(jù)中獲取其中一個(gè)商品的屬性，如下：
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,
},
];在這里，產(chǎn)品列表嵌套了幾層，需要訪問(wèn)商品的信息，可以解構(gòu)盡可能多的級(jí)別以獲取商品對(duì)象的屬性。
const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275上面的代碼僅用于展示其用法，項(xiàng)目開(kāi)發(fā)中不建議再數(shù)組中這樣獲取對(duì)象信息。
通常，數(shù)據(jù)列表不一定非要數(shù)組，從獲取效率來(lái)說(shuō)，map 對(duì)象的訪問(wèn)比數(shù)組效率要高。可以將上面的數(shù)據(jù)改為 map 對(duì)象，如下：
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 中，數(shù)據(jù)可以是變量和方法，因此解構(gòu)賦值也適合用在函數(shù)參數(shù)的定義，如下：
const printArticle = ({ title, remark }) => {
console.log(title);
console.log(remark);
};
printArticle({
title: "JavaScript 解構(gòu)賦值",
remark: "解構(gòu)賦值的實(shí)用場(chǎng)景介紹",
});在使用 React 或 Vue 等框架時(shí)，有很多解構(gòu)賦值的地方，如方法的引入等等。
如果想創(chuàng)建與屬性名稱不同的變量，那么可以使用對(duì)象解構(gòu)的別名功能。
const { identifier: aliasIdentifier } = expression;identifier 是要訪問(wèn)的屬性的名稱，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可以使用動(dòng)態(tài)名稱提取到變量屬性（屬性名稱在運(yùn)行時(shí)已知）：
const { [propName]: identifier } = expression;propName 表達(dá)式應(yīng)計(jì)算為屬性名稱（通常是字符串），標(biāo)識(shí)符應(yīng)指示解構(gòu)后創(chuàng)建的變量名稱，用法如下：
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 }上面代碼中，可以通過(guò)更新 productKey 的值進(jìn)而使得 product 的值也跟隨變化。
將 rest 語(yǔ)法添加到解構(gòu)中，Rest 屬性收集那些尚未被解構(gòu)模式拾取的剩余可枚舉屬性鍵。
const { identifier, ...rest } = expression;解構(gòu)后，變量標(biāo)識(shí)符包含屬性值。 rest 變量是一個(gè)具有其余屬性的普通對(duì)象。
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 }對(duì)于數(shù)組，可以通過(guò) Rest 的實(shí)現(xiàn)首尾值的獲?。?/p>
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2, 3 ]
正如前面介紹的那樣可以在解構(gòu)數(shù)組時(shí)為其分配默認(rèn)值：
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 未定義的情況下有一個(gè)默認(rèn)值。
感謝各位的閱讀，以上就是“JavaScript解構(gòu)賦值的方法有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript解構(gòu)賦值的方法有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
