|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
作者:admin 時(shí)間:2022-5-13 14:26:46 瀏覽:本文將給大家介紹如何在JS中解構(gòu)數(shù)組和對(duì)象，在文章開始之前，我們應(yīng)了解幾個(gè)關(guān)鍵概念：數(shù)組、對(duì)象、解構(gòu)。
◆ 數(shù)組
數(shù)組是可以存儲(chǔ)多個(gè)數(shù)據(jù)或單個(gè)數(shù)據(jù)類型的多個(gè)元素的數(shù)據(jù)集合。這意味著你可以創(chuàng)建包含字符串、布爾值、數(shù)字、對(duì)象甚至其他數(shù)組類型的元素的數(shù)組。
// 1
const arr = ["Element1", "Element2", "Element3"]
// 2
const arr = new Array(3)
arr[0] = "Element1"
arr[1] = "Element2"
arr[2] = "Element3"
在方法 1 中，你可以在聲明數(shù)組時(shí)進(jìn)行初始化。
在方法 2 中，你使用在初始化之前要存儲(chǔ)的元素?cái)?shù)來聲明你的數(shù)組。
◆ 對(duì)象
對(duì)象是屬性的集合，而屬性是名稱（或鍵）與值之間的關(guān)聯(lián)。
用 JavaScript 編寫對(duì)象在某種程度上類似于數(shù)組，但我們使用花括號(hào)來創(chuàng)建它們。
const details = {
name: "John",
id: 121,
year: 2022,
}◆ 解構(gòu)
解構(gòu)是對(duì)數(shù)組或?qū)ο笾械脑剡M(jìn)行解包的行為。
解構(gòu)不僅使我們能夠解包元素，它還使你能夠根據(jù)要執(zhí)行的操作類型來操縱和切換解包的元素。
現(xiàn)在讓我們看看解構(gòu)在數(shù)組和對(duì)象中是如何工作的。
數(shù)組中的解構(gòu)
為了解構(gòu)數(shù)組，我們使用方括號(hào) [] 來存儲(chǔ)變量名，該變量名將分配給存儲(chǔ)元素的數(shù)組的名稱。
假設(shè)我們有一個(gè)包含 7 種顏色的數(shù)組，但我們只想獲取數(shù)組中的前 2 種顏色。我們可以解構(gòu)以獲得我們想要的東西?，F(xiàn)在讓我們來看看它：
const colorArr = ["violet", "indico", "blue", "green", "yellow", "orange", "red"]
const [first, second] = colorArr;
console.log(first, second);
//violet, indico
數(shù)組中的變異
變異意味著改變?cè)氐男问交蛑?。如果值可以更改，則稱該值是可變的。借助數(shù)組中的析構(gòu)，我們可以改變變量。如果我們有一個(gè)包含兩個(gè)元素“el1”和“el2”的數(shù)組，我們可以通過改變它們的變量來切換它們的位置。
const edibles = ["el1", "el2"];
let [pos1, pos2] = elements;
[pos1, pos2] = [pos2, pos1]
console.log(pos1, pos2);
// el2, el1
對(duì)象中的解構(gòu)
解構(gòu)對(duì)象時(shí)，我們使用大括號(hào){}，其中包含對(duì)象中的確切名稱。與我們可以使用任何變量名來解包元素的數(shù)組不同，對(duì)象只允許使用存儲(chǔ)數(shù)據(jù)的名稱。有趣的是，我們可以操縱變量名并將變量名分配給我們想要從對(duì)象中獲取的數(shù)據(jù)?，F(xiàn)在讓我們?cè)诖a中看到所有這些。
const details = {
name: "Likhit",
id: 121,
emp_code: "18LK001"
}
const {name, id} = details
console.log(name, id);
// Likhit, 121將我們擁有的內(nèi)容記錄到控制臺(tái)會(huì)顯示前端和后端的值。現(xiàn)在讓我們看看如何為要解包的對(duì)象分配一個(gè)變量名。
const details = {
frontend: "React",
backend: "Node",
database: "MongoDB"
}
const {frontend: c1, backend: c2} = details
console.log(c1, c2);
// react, node如上所見，我們有 c1 和 c2 作為我們要解包的數(shù)據(jù)的名稱。分配變量名將始終幫助我們保持代碼整潔，尤其是在處理外部數(shù)據(jù)時(shí)。
嵌套的對(duì)象解構(gòu)
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"
在項(xiàng)目中可能遇到的更多的是這種結(jié)構(gòu)復(fù)雜的對(duì)象，我們只要把變量父級(jí)的名字等照抄就可以使用。
總結(jié)
本文通過5個(gè)示例，介紹了如何在JS中解構(gòu)數(shù)組和對(duì)象。通過本文的學(xué)習(xí)，我們應(yīng)該了解了什么是解構(gòu)，以及如何去解構(gòu)數(shù)組和對(duì)象。
相關(guān)文章
標(biāo)簽: 數(shù)組 對(duì)象 解構(gòu)數(shù)組 解構(gòu)對(duì)象
- 站長推薦
