JavaScript 教程

我每周平均处理 JSON 数据 18 次，但几乎每次我都需要 Google 搜索特定的方法，如果有一本终极指南可以为我提供答案就好了😏

在本文中，我将向你展示在 JavaScript 中使用对象数组的基础知识。

如果你曾经使用过 JSON 结构，那么你就已经使用过 JavaScript 对象。从字面意思看，JSON 代表 JavaScript Object Notation。

创建一个对象很简单:

该对象代表一辆汽车。汽车可以有多种类型和颜色，并且每个对象代表一辆特定的汽车。

大多数时候你都是从外部服务获取此类数据，但是有时你需要手动创建对象及其数组，就像我创建这个电子商店时一样：

每个类别列表项在 HTML 中看起来像这样:

但我不想将此代码重复 12 次，因为这很难维护。

让我们回到汽车的话题上来。我们来看看这些车：

我们用数组表示它们:

对象数组并非始终保持不变，我们总是需要操作它们。因此，让我们看一下如何将新对象添加到已经存在的数组中。

在头部添加一个对象, 使用 Array.unshift。

添加一个对象到尾部的位置，使用 Array.push。

添加一个对象到中间位置，使用 Array.splice。此方法非常方便，因为它也可以删除数组的某一个元素。注意其参数:

因此，如果我们要在第五个位置添加红色敞篷车，可以像下面这样写：

JavaScript 提供了许多函数/方法，可以解决你的某些问题，从而无需你手动实现其内部逻辑。我们来看看吧。

如果想在车辆数组中找到一辆红色的，我们可以使用 Array.find。

这个函数返回匹配到的第一个元素：

也可以搜索多个值：

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

在这种情况下，我们将获得车辆列表中的最后一辆车。

Array.find 方法只返回一个对象。如果你想获取所有红色的车，你需要使用 Array.filter。

在数组的所有方法中，Array.map方法可以说是我们使用最频繁的了。将对象数组转换为不同对象的数组，这就是 Array.map 的工作。假设我们要根据汽车的大小将其分为三类：

你可能还记得函数Array.includes与Array.some类似，但只有元素是原始类型的时候，二者才类似。

在本文中，我们介绍了一些基本函数/方法，这些方法可帮助你创建、操作、转换和遍历对象数组，它们应该涵盖了你遇到的大多数数据处理场景。

如果你遇到更复杂的数组使用场景，请查看 freeCodeCamp 的这篇数组详细指南或参考 W3Schools 的这篇资料。

或者与我联系（Twitter@ondrabus），我可以准备另外一篇文章：-)

原文：JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods，作者：Ondrej Polesny