JavaScript解構賦值的5個常見場景與例項教程
目錄
- 前言
- 1. 提取資料
- 2. 別名取值
- 3. 動態屬性
- 4. 物件解構中的 Rest
- 5. 預設值
- 總結
前言
解構賦值語法是一種 表示式，通過解構賦值,可以將屬性/值從物件/陣列中取出，賦值給其他變數。這種語法是 ECMAscript 6 規範引入了一種新語法，可以更輕鬆地從陣列和物件中獲取值。
1. 提取資料
先來看看如何在 Script 中解構物件，可以從這個商品物件的簡單示例開始。
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,},{
id: 2,title: "Nike Air Zoom Alphafly NEXT%",price: 275,{
id: 3,title: "Nike Zoo
在這裡，產品列表嵌套了幾層，需要訪問商品的資訊，可以解構儘可能多的級別以獲取商品物件的屬性。
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",2: {
title: "Nike Air Zoom Alphafly NEXT%",3: {
title: "Nike Zoom Fly 4",};
const {
2: { id,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 或 等框架時，有很多解構賦值的地方，如方法的引入等等。
2. 別名取值
如果想建立與屬性名稱不同的變數，那麼可以使用物件解構的別名功能。
const { identifier: aliasIdentifier }http://www.cppcns.com = expression;
identifier 是要訪問的屬性的名稱，aliasIdentifier 是變數名稱。具體用法如下：
const products = {
1: {
title: "Nike Air Zoom Pegasus 38",};
const {
2: { price: productPrice },} = products;
console.log(productPrice); // 275
3. 動態屬性
可以使用動態名稱提取到變數屬性（屬性名稱在執行時已知）：
const { [propName]: identifier } = expression;
propName 表示式應計算為屬性名稱（通常是字串），識別符號應指示解構後建立的變數名稱，用法如下：
const products = {
1: {
title: "Nike Air Zoom Pegasus 38",};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38',price: 120 }
上面程式碼中，可以通過更新 productKey 的值進而使得 product 的值也跟隨變化。
4. 物件解構中的 Rest
將 rest 語法新增到解構中，Rest 屬性收集那些尚未被解構模式拾取的剩餘可列舉屬性鍵。
const { identifier,...rest } = expression;
解構後，變數識別符號包含屬性值。 rest 變數是一個具有其餘屬性的普通物件。
const product = {
title: "Nike Air Zoom Pegasus 38",quantity: 5,category_id: 1,reviews: 9830,total: 45,};
const { title,...others } = product;
console.log(others); // { price: 120,total: 45 }
對於陣列，可以通過 Rest 的實現首尾值的獲取：
const numbers = [1,2,3]; const [head,...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2,3 ]
5. 預設值
正如前面介紹的那樣可以在解構陣列時為其分配預設值：
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解構賦值的5個常見場景與例項的文章就介紹到這了,更多相關解構賦值例項內容請搜尋我們以前的文章或繼續http://www.cppcns.com瀏覽下面的相關文章希望大家以後多多支援我們！