您好,登錄后才能下訂單哦!
這篇文章主要講解了“JavaScript解構賦值的方法有哪些”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“JavaScript解構賦值的方法有哪些”吧!
先來看看如何在 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
解構,能夠讓代碼更加清晰簡潔。如果需要解構一個更復雜的對象呢?即對象中的對象。
現(xiàn)在假設需要從商品列表數(shù)據(jù)中獲取其中一個商品的屬性,如下:
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)品列表嵌套了幾層,需要訪問商品的信息,可以解構盡可能多的級別以獲取商品對象的屬性。
const [tmp, { id, title, price }] = products; console.log(id); // 2 console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); // 275
上面的代碼僅用于展示其用法,項目開發(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ù)可以是變量和方法,因此解構賦值也適合用在函數(shù)參數(shù)的定義,如下:
const printArticle = ({ title, remark }) => { console.log(title); console.log(remark); }; printArticle({ title: "JavaScript 解構賦值", remark: "解構賦值的實用場景介紹", });
在使用 React 或 Vue 等框架時,有很多解構賦值的地方,如方法的引入等等。
如果想創(chuàng)建與屬性名稱不同的變量,那么可以使用對象解構的別名功能。
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
可以使用動態(tài)名稱提取到變量屬性(屬性名稱在運行時已知):
const { [propName]: identifier } = expression;
propName 表達式應計算為屬性名稱(通常是字符串),標識符應指示解構后創(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 的值進而使得 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 }
對于數(shù)組,可以通過 Rest 的實現(xiàn)首尾值的獲取:
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2, 3 ]
正如前面介紹的那樣可以在解構數(shù)組時為其分配默認值:
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解構賦值的方法有哪些”的內容了,經(jīng)過本文的學習后,相信大家對JavaScript解構賦值的方法有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。