JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript 的解構賦值

簡介

如果您想在 ES2015 更新為 JavaScript 之前從數組或對像中選擇元素,則必須單獨選擇它們或使用循環。

ES2015 規範引入了解構賦值 ,一種將數組元素或對象屬性檢索到變量中的更快方法。

在本文中,我們將使用解構賦值從數組和對像中獲取值到變量中。然後我們將看到解構賦值的一些高級用法,它允許我們為變​​量設置默認值、捕獲未分配的條目以及在一行中交換變量。

數組解構

當我們想從一個數組中取出項目並在單獨的變量中使用它們時,我們通常會這樣編寫代碼:

let myArray = [1, 2, 3];
let first = myArray[0];
let second = myArray[1];
let third = myArray[2];

由於 ES2015 對 JavaScript 的主要更新,我們現在可以像這樣執行相同的任務:

let myArray = [1, 2, 3];
let [first, second, third] = myArray;

第二個較短的示例在 myArray 上使用了 JavaScript 的解構語法 .當我們解構一個數組時,我們將其元素的值複製到變量中。數組解構語法就像常規變量賦值語法(let x = y; )。不同的是左邊由一個或多個變量組成在一個數組中 .

上面的代碼創建了三個新變量:first , second , 和 third .它還為這些變量賦值:first 等於 1,second 等於 2,third 等於3。

使用這種語法,JavaScript 會看到 first 和 1 在它們各自的數組中具有相同的索引,0。變量被分配對應於它們的順序的值。只要左右兩邊的位置匹配,就會進行相應的解構賦值。

解構語法也適用於對象,讓我們看看如何。

對象解構

在解構語法可用之前,如果我們想將對象的屬性存儲到不同的變量中,我們會編寫如下代碼:

const foobar = {
    foo: "hello",
    bar: "world"
};

const foo = foobar.foo;
const bar = foobar.bar;

使用解構語法,我們現在可以用更少的代碼行快速完成同樣的事情:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo, bar } = foobar;

數組項是通過它們的位置來解構的,而對象屬性是通過它們的鍵名來解構的。在上面的例子中,在聲明了對象 foobar 然後我們創建兩個變量:foobar .每個變量都分配有同名對象屬性的值。因此 foo 是“你好”和 bar 是“世界”。

注意 :無論您使用 var 聲明變量,解構賦值都有效 , let , 或 const .

如果你喜歡在解構對象時給一個不同的變量名,我們可以對我們的代碼做一個小的調整:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo: baz, bar } = foobar;
console.log(baz, bar); // hello world

使用冒號,我們可以匹配一個對象屬性並給創建的變量一個新名稱。上面的代碼沒有創建變量foo .如果您嘗試使用 foo 你會得到一個 ReferenceError ,表示沒有定義。

現在我們已經掌握了解構數組和對象的基礎知識,讓我們看看使用這種新語法的一些巧妙技巧。我們將從選擇默認值的選項開始。

解構變量中的默認值

如果我們嘗試解構的變量多於數組元素或對象屬性的數量,會發生什麼?讓我們看一個簡單的例子:

let [alpha1, alpha2, alpha3] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

我們的輸出將是:

a b undefined

未分配的變量設置為 undefined .如果我們想避免我們的解構變量成為 undefined ,我們可以給他們一個默認值 .讓我們重用前面的例子,默認 alpha3 到'c':

let [alpha1, alpha2, alpha3 = 'c'] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

如果我們在 node 中運行它 或者瀏覽器,我們會在控制台看到如下輸出:

a b c

默認值是使用 = 創建的 創建變量時的運算符。當我們創建具有默認值的變量時,如果在解構環境中有匹配,它將被覆蓋。

讓我們用下面的例子來確認一下,它為一個對象設置了一個默認值:

const { prime1 = 1, prime2 } = { prime1: 2, prime2: 3 };

console.log(prime1, prime2);

在上面的例子中,我們默認 prime1 為 1。它應該被覆蓋為 2,因為有一個 prime1 賦值右側對象的屬性。運行它會產生:

2 3

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

偉大的!我們已經確認在匹配時會覆蓋默認值。這也很好,因為第一個素數確實是 2 而不是 1。

當數組或對像中的值太少時,默認值很有幫助。讓我們看看當有很多不需要是變量的值時如何處理。

捕獲解構分配中未分配的條目

有時我們想從數組或對像中選擇一些條目並捕獲我們沒有放入單個變量的剩餘值。我們可以用 ... 做到這一點 運營商。

讓我們將數組的第一個元素放入一個新變量中,但將其他元素保留在一個新數組中:

const [favoriteSnack, ...fruits] = ['chocolate', 'apple', 'banana', 'mango'];

在上面的代碼中,我們設置了 favoriteSnack “巧克力”。因為我們使用了 ... 運算符,fruits 等於剩餘的數組項,即['apple', 'banana', 'mango'] .

我們指的是使用 ... 創建的變量 在解構賦值中作為 rest 元素 .其餘元素必須是最後一個元素 解構賦值。

你可能已經猜到了,我們也可以在對像中使用 rest 元素:

const { id, ...person } = {
    name: 'Tracy',
    age: 24,
    id: 1020212,
};

我們提取 id 將解構賦值右側的對象的屬性轉換為自己的變量。然後我們將對象的其餘屬性放入 person 多變的。在這種情況下,id 將等於 1020212person 將等於 { name: 'Tracy', age: 24 } .

現在我們已經了解瞭如何保留所有數據,讓我們看看當我們想要省略數據時解構賦值有多靈活。

解構賦值中的選擇性值

我們不必將每個條目分配給變量。例如,如果我們只想從多個選項中分配一個變量,我們可以這樣寫:

const [name] = ['Katrin', 'Judy', 'Eva'];
const { nyc: city } = { nyc: 'New York City', ldn: 'London' };

我們分配了 name 從數組和 city 到 'Katrin' 從物體到“紐約市”。對於對象,因為我們通過鍵名匹配,所以在變量中選擇我們想要的特定屬性很簡單。在上面的例子中,我們怎樣才能捕捉到 'Katrin' 和 'Eva' 而不必同時拍攝 'Judy' 呢?

解構語法允許我們放置 holes 對於我們不感興趣的值。讓我們用一個洞一次性捕獲“Katrin”和“Eva”:

const [name1, , name2] = ['Katrin', 'Judy', 'Eva'];

注意 name1 之間變量賦值的差距 和 name2 .

到目前為止,我們已經看到了解構賦值的靈活性,儘管只有平面值。在 JavaScript 中,數組可以包含數組,對象可以嵌套在對像中。我們還可以擁有帶有對象的數組和帶有數組的對象。讓我們看看解構賦值如何處理嵌套值。

解構嵌套值

我們可以嵌套解構變量以匹配數組和對象的嵌套條目,從而對我們選擇的內容進行細粒度控制。考慮有一個數組數組。讓我們將每個內部數組的第一個元素複製到它們自己的變量中:

let [[part1], [part2], [part3], [part4]] = [['fee', 'mee'], ['fi', 'li'], ['fo', 'ko'], ['fum', 'plum']];

console.log(part1, part2, part3, part4);

運行此代碼將顯示以下輸出:

fee fi fo fum

通過簡單地用 [] 將每個變量包裝在左側 , JavaScript 知道我們需要數組中的值而不是數組本身。

當我們解構嵌套對象時,我們必須匹配嵌套對象的鍵來檢索它。例如,讓我們嘗試在 JavaScript 中捕捉囚犯的一些細節:

const {
    name,
    crimes: {
        yearsToServe
    }
} = {
    name: 'John Doe',
    crimes: {
        charged: ['grand theft auto', 'stealing candy from a baby'],
        yearsToServe: 25
    }
};

console.log(yearsToServe);

獲取 yearsToServe 屬性,我們首先需要匹配嵌套的crimes 目的。在這種情況下,右側有一個 yearsToServe crimes 的屬性 對象設置為 25。因此,我們的 yearsToServe 變量將被賦值為 25。

請注意,我們沒有創建 crimes 上例中的對象。我們創建了兩個變量:nameyearsToServe .即使我們必須匹配嵌套結構,JavaScript 也不會創建中間對象。

到目前為止,您在涵蓋許多解構語法功能方面做得很好。讓我們來看看它的一些實際用途吧!

解構數組和對象的用例

除了代碼行的好處之外,解構數組和對像還有很多用途。以下是解構提高代碼可讀性的幾個常見情況:

For 循環

開發人員使用解構賦值從 for 中的項目中快速提取感興趣的值 環形。例如,如果你想打印一個對象的所有鍵和值,你可以這樣寫:

const greetings = { en: 'hi', es: 'hola', fr: 'bonjour' };

for (const [key, value] of Object.entries(greetings)) {
    console.log(`${key}: ${value}`);
}

首先,我們創建一個 greetings 存儲如何用不同語言說“你好”的變量。然後我們使用 Object.entries() 遍歷對象的值 創建嵌套數組的方法。每個對象屬性由二維數組表示,第一項是鍵,第二項是它的值。在這種情況下,Object.entries() 創建以下數組 [['en', 'hi'], ['es', 'hola'], ['fr', 'bonjour']] .

在我們的 for 循環,我們將各個數組解構為 keyvalue 變量。然後我們將它們記錄到控制台。執行這個程序會得到以下輸出:

en: hi
es: hola
fr: bonjour

交換變量

我們可以使用解構語法來交換沒有臨時變量的變量。假設您正在工作並正在休息。你想喝茶,而你的同事想喝咖啡。不幸的是,飲料混在一起了。如果這是在 JavaScript 中,您可以使用解構語法輕鬆交換飲料:

let myCup = 'coffee';
let coworkerCup = 'tea';
[myCup, coworkerCup] = [coworkerCup, myCup];

現在myCup 有 'tea' 和 coworkerCup 有“咖啡”。注意我們沒有 let , const , 或 var 使用解構賦值時。由於我們沒有聲明新變量,因此我們需要省略這些關鍵字。

結論

通過解構賦值,我們可以快速從數組或對像中提取值,並將它們放入自己的變量中。 JavaScript 通過將變量的數組位置或變量名與對象屬性名進行匹配來做到這一點。

我們已經看到我們可以為我們正在創建的變量分配默認值。我們還可以使用 ... 捕獲數組和對象的剩餘屬性 操作員。我們可以通過有空洞來跳過條目,這些空洞用逗號表示,它們之間沒有任何內容。這種語法也足夠靈活,可以解構嵌套的數組和對象。

我們提供了幾個漂亮的地方來使用解構賦值。接下來你會在哪裡使用它們?


Tutorial JavaScript 教程
  1. 如何檢查某個 DOM 元素是否在另一個 DOM 元素樹中?

  2. 使用 JavaScript 構建 Shopify 部分架構

  3. ECMAScript 6 (ES6):下一個 JavaScript 版本的新功能

  4. 父元素和子元素的單獨 onClick 事件

  5. 如何測試有效的 UUID/GUID?

  6. React 中的上下文與道具

  7. 帶有 getFullYear() 的 JavaScript 當前年份

  1. Firebase React CRUD 教程。如何將 Firebase Firestore 與 ReactJS 一起使用。

  2. 紅帽移動應用平台 v3.15 發布

  3. 如何修復 localhost 中的 react cors 錯誤?

  4. 使用 Firebase 身份驗證註冊、登錄和註銷用戶

  5. Vue 中的加密聯繫表單

  6. 角 13

  7. 開始使用 JavaScript 自動化 Excel

  1. 在 Rails 3 中使用不顯眼的 JavaScript 和 AJAX

  2. 如何使用jquery更改圖像的顏色

  3. 使用 jQuery Flot 和 Google Analytics 動態創建圖表

  4. React + TailwindCSS + Vite.js =天作之合?