|
|
|
|
|
|
5個示例介紹如何在JS中解構數組和對象
作者:admin 時間:2022-5-13 14:26:46 瀏覽:本文將給大家介紹如何在JS中解構數組和對象，在文章開始之前，我們應了解幾個關鍵概念：數組、對象、解構。
◆ 數組
數組是可以存儲多個數據或單個數據類型的多個元素的數據集合。這意味著你可以創建包含字符串、布爾值、數字、對象甚至其他數組類型的元素的數組。
// 1
const arr = ["Element1", "Element2", "Element3"]
// 2
const arr = new Array(3)
arr[0] = "Element1"
arr[1] = "Element2"
arr[2] = "Element3"
在方法 1 中，你可以在聲明數組時進行初始化。
在方法 2 中，你使用在初始化之前要存儲的元素數來聲明你的數組。
◆ 對象
對象是屬性的集合，而屬性是名稱（或鍵）與值之間的關聯。
用 JavaScript 編寫對象在某種程度上類似于數組，但我們使用花括號來創建它們。
const details = {
name: "John",
id: 121,
year: 2022,
}◆ 解構
解構是對數組或對象中的元素進行解包的行為。
解構不僅使我們能夠解包元素，它還使你能夠根據要執行的操作類型來操縱和切換解包的元素。
現在讓我們看看解構在數組和對象中是如何工作的。
數組中的解構
為了解構數組，我們使用方括號 [] 來存儲變量名，該變量名將分配給存儲元素的數組的名稱。
假設我們有一個包含 7 種顏色的數組，但我們只想獲取數組中的前 2 種顏色。我們可以解構以獲得我們想要的東西。現在讓我們來看看它：
const colorArr = ["violet", "indico", "blue", "green", "yellow", "orange", "red"]
const [first, second] = colorArr;
console.log(first, second);
//violet, indico
數組中的變異
變異意味著改變元素的形式或值。如果值可以更改，則稱該值是可變的。借助數組中的析構，我們可以改變變量。如果我們有一個包含兩個元素“el1”和“el2”的數組，我們可以通過改變它們的變量來切換它們的位置。
const edibles = ["el1", "el2"];
let [pos1, pos2] = elements;
[pos1, pos2] = [pos2, pos1]
console.log(pos1, pos2);
// el2, el1
對象中的解構
解構對象時，我們使用大括號{}，其中包含對象中的確切名稱。與我們可以使用任何變量名來解包元素的數組不同，對象只允許使用存儲數據的名稱。有趣的是，我們可以操縱變量名并將變量名分配給我們想要從對象中獲取的數據?，F在讓我們在代碼中看到所有這些。
const details = {
name: "Likhit",
id: 121,
emp_code: "18LK001"
}
const {name, id} = details
console.log(name, id);
// Likhit, 121將我們擁有的內容記錄到控制臺會顯示前端和后端的值?，F在讓我們看看如何為要解包的對象分配一個變量名。
const details = {
frontend: "React",
backend: "Node",
database: "MongoDB"
}
const {frontend: c1, backend: c2} = details
console.log(c1, c2);
// react, node如上所見，我們有 c1 和 c2 作為我們要解包的數據的名稱。分配變量名將始終幫助我們保持代碼整潔，尤其是在處理外部數據時。
嵌套的對象解構
title: 'Scratchpad',
translations:
{
locale: 'de',
localization_tags: [],
last_edit: '2014-04-14T08:43:37',
url: '/de/docs/Tools/Scratchpad',
title: 'JavaScript-Umgebung'
},
url: '/en-US/docs/Tools/Scratchpad'
};
let {
title: englishTitle, // rename
translations:
{
title: localeTitle, // rename
},
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
在項目中可能遇到的更多的是這種結構復雜的對象，我們只要把變量父級的名字等照抄就可以使用。
總結
本文通過5個示例，介紹了如何在JS中解構數組和對象。通過本文的學習，我們應該了解了什么是解構，以及如何去解構數組和對象。
相關文章
