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
对象中的解构
解构对象时，我们使用大括号{}，其中包含对象中的确切名称。与我们可以使用任何变量名来解包元素的数组不同，对象只允许使用存储数据的名称。有趣的是，我们可以操纵变量名并将变量名分配给我们想要从对象中获取的数据。现在让我们在代码中看到所有这些。
const details = {
name: "Likhit",
id: 121,
emp_code: "18LK001"
}
const {name, id} = details
console.log(name, id);
// Likhit, 121将我们拥有的内容记录到控制台会显示前端和后端的值。现在让我们看看如何为要解包的对象分配一个变量名。
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中解构数组和对象。通过本文的学习，我们应该了解了什么是解构，以及如何去解构数组和对象。
相关文章
- 站长推荐
