站長資訊網(wǎng)
本篇文章給大家?guī)砹岁P(guān)于JavaScript的相關(guān)知識(shí)，其中主要跟大家聊一聊js解構(gòu)賦值的5個(gè)常見場景和實(shí)例，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
解構(gòu)賦值語法是一種 JavaScript 表達(dá)式，通過解構(gòu)賦值, 可以將屬性/值從對象/數(shù)組中取出，賦值給其他變量。這種語法是 ECMAscript 6 規(guī)范引入了一種新語法，可以更輕松地從數(shù)組和對象中獲取值。
1. 提取數(shù)據(jù)
先來看看如何在 JavaScript 中解構(gòu)對象，可以從這個(gè)商品對象的簡單示例開始。
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;
這樣，就可以通過以下方式訪問相應(yīng)的屬性：
console.log(id); // 1 console.log(price); // 120 console.log(title); // Nike Air Zoom Pegasus 38
解構(gòu)，能夠讓代碼更加清晰簡潔。如果需要解構(gòu)一個(gè)更復(fù)雜的對象呢？即對象中的對象。
現(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)品列表嵌套了幾層，需要訪問商品的信息，可以解構(gòu)盡可能多的級別以獲取商品對象的屬性。
const [tmp, { id, title, price }] = products; console.log(id); // 2 console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); // 275
上面的代碼僅用于展示其用法，項(xiàng)目開發(fā)中不建議再數(shù)組中這樣獲取對象信息。
通常，數(shù)據(jù)列表不一定非要數(shù)組，從獲取效率來說，map 對象的訪問比數(shù)組效率要高。可以將上面的數(shù)據(jù)改為 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 中，數(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í)用場景介紹", });
在使用 React 或 Vue 等框架時(shí)，有很多解構(gòu)賦值的地方，如方法的引入等等。
2. 別名取值
如果想創(chuàng)建與屬性名稱不同的變量，那么可以使用對象解構(gòu)的別名功能。
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. 動(dòng)態(tài)屬性
可以使用動(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 }
上面代碼中，可以通過更新 productKey 的值進(jìn)而使得 product 的值也跟隨變化。
4. 對象解構(gòu)中的 Rest
將 rest 語法添加到解構(gòu)中，Rest 屬性收集那些尚未被解構(gòu)模式拾取的剩余可枚舉屬性鍵。
const { identifier, ...rest } = expression;
解構(gòu)后，變量標(biāo)識(shí)符包含屬性值。 rest 變量是一個(gè)具有其余屬性的普通對象。
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 }
對于數(shù)組，可以通過 Rest 的實(shí)現(xiàn)首尾值的獲?。?/p>
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2, 3 ]
5. 默認(rèn)值
正如前面介紹的那樣可以在解構(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)值。
總結(jié)
解構(gòu)是一個(gè)非常實(shí)用的特性，它被添加到了 JavaScript 的 ES6 版本中了。通過解構(gòu)，可以快速方便地從對象和數(shù)組中提取屬性或數(shù)據(jù)到單獨(dú)的變量中。它適用于嵌套對象，可以使用 ... 運(yùn)算符為數(shù)組分配賦值。
推薦學(xué)習(xí)：《JavaScript視頻教程》
