這篇“Js解構賦值的常見場景有哪些”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Js解構賦值的常見場景有哪些”文章吧。
創新互聯建站是一家專注于成都網站設計、成都網站制作與策劃設計,阜南網站建設哪家好?創新互聯建站做網站,專注于網站建設10余年,網設計領域的專業建站公司;建站業務涵蓋:阜南等地區。阜南做網站價格咨詢:028-86922220
解構賦值語法是一種 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 未定義的情況下有一個默認值。
以上就是關于“Js解構賦值的常見場景有哪些”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注創新互聯行業資訊頻道。
新聞名稱:Js解構賦值的常見場景有哪些
新聞來源:http://m.newbst.com/article32/ppissc.html
成都網站建設公司_創新互聯,為您提供網站營銷、定制開發、App開發、網頁設計公司、建站公司、電子商務
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯