迹忆客 专注技术分享

JSON 对象是一个简单的 JavaScript 对象。我们可以创建一个包含许多类似 JSON 对象的数组。与 C、C++、Java 等语言不同，在 javascript 中，处理 JSON 对象数组很容易。它类似于 C 语言中的结构数组或 Java 中的类对象数组。在本文中，我们将讨论如何通过迭代并在其中查找元素来创建 JSON 对象数组。

创建 JSON 对象数组

我们可以通过将 JSON 数组分配给变量或使用 .push() 运算符在对象数组中动态添加值来创建 JSON 对象数组，或者使用循环结构在数组的索引处添加对象，例如 for 循环或 while 循环。参考以下代码更好理解。

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(JSON.stringify(months));
var monthNames = ['January', 'February'];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
  month.id = (i + 1);
  month.name = monthNames[i];
  monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));

输出：

[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]

在上面的代码中，months 变量保存显式分配的 JSON 对象数组，而 monthsArray 是通过在 for 循环内分配值创建的 JSON 对象数组。我们使用 .push() 数组函数将生成的 javascript 对象添加到 monthsArray 的末尾。请注意，当使用 JavaScript console.log() 语句记录时，这两个数组显示相同的结构。JSON.stringify() 函数将 JSON 数组转换为字符串格式，使其成为人类可读的格式。

从 JSON 对象数组访问对象

我们已经创建了一个 JSON 对象数组。让我们看看如何访问这个数组的元素。该方法与我们对简单字符串数组或数字数组所做的相同。我们可以使用数组索引（从 0 开始）访问数组对象，并在该索引处操作对象值。参考以下代码。

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = 'March';
console.log(months[0].id);
console.log(months[0].name);

输出：

1
January
3
March

在代码中，我们通过使用 array Index 访问 months 数组的第一个索引来更改对象参数的值。类似地，我们可以使用其索引更改数组中任何其他对象的值。

迭代 JSON 对象数组

我们可以像处理字符串数组或数字数组一样迭代对象数组。我们可以使用 for 循环 或 while 循环 来达到我们的目的。我们可以使用数组索引访问元素。我们将数组从第 0 个索引迭代到数组长度。.length 属性也返回对象数组的长度。请参考以下代码，其中显示了迭代数组并打印其中每个对象的值。

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
for (let i = 0; i < months.length; i++) {
  console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}

输出：

0 id:1, name:January
1 id:2, name:February

将对象添加到 JSON 对象数组

我们创建了一个对象数组并迭代它们。现在让我们看看如何向 JSON 数组添加元素。我们可以使用 .push() 函数将一个 JSON 对象添加到数组的末尾。.unshift() 函数在 JSON 数组的开头添加一个元素。.splice() 在数组中的指定索引处插入一个对象。请参考以下描述这些函数用法的代码。

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
months.push({'id': 4, 'name': 'April'});
console.log(JSON.stringify(months));
months.unshift({'id': 12, 'name': 'December'})
console.log(JSON.stringify(months));
months.splice(3, 0, {'id': 3, 'name': 'March'});
console.log(JSON.stringify(months));

输出：

[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]

请注意，我们可以使用 .splice() 函数将数组中的对象替换为作为参数传递的新值。.splice() 方法的第一个参数是我们执行操作的索引。作为第二个参数，我们提到了我们希望替换的元素数量。最后一个参数是我们插入到数组中的值。

从 JSON 对象数组中删除对象

我们可以以类似于简单 JavaScript 数组的方式从对象数组中删除元素。我们可以使用 javascript 的 .pop() 方法从 JSON 对象数组的末尾删除元素。.shift() 从 JSON 对象数组的开头删除一个对象。.splice() 函数删除 JSON 数组指定索引处的元素。参考以下代码。

var months = [
  {'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
  {'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
  {'id': 4, 'name': 'April'}
];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1, 1);
console.log(JSON.stringify(months));

输出：

[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]

从 JSON 对象数组中搜索元素

我们可以使用 .indexOf() 或 includes() 来检查一个元素是否存在于一个简单的字符串数组中。但是这些方法不适用于对象数组。我们可以使用某些类似的函数，如 .filter()、.find()、findIndex() 来检查数组中是否存在元素。我们可以手动迭代数组并使用循环结构（如 for、while 循环等）检查元素是否存在，但这可能是最后一个要考虑的选项，因为它会导致大量代码。javascript 内置函数如 .filter()、.find()、findIndex() 可用于在 JSON 对象数组中搜索对象。.filter() 函数返回一个包含满足特定条件的对象的数组，.find() 返回满足作为内联函数传递给它的条件的对象，.findIndex() 将返回如果可以在数组中找到对象的索引，则返回 -1。因此，通过了解函数的返回类型，我们可以在 JSON 对象数组中设计搜索功能。参考以下代码可以更好地理解 .filter()、.find()、findIndex() 的用法。

var months = [
  {'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
  {'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
  {'id': 4, 'name': 'April'}
];
(months.filter(i => i.name === 'April').length) ?
    console.log('April month found') :
    console.log('Not found');
(months.find(i => i.name === 'January') != {}) ?
    console.log('January month found') :
    console.log('Not found');
(months.findIndex(i => i.name === 'April') > -1) ?
    console.log('April month found') :
    console.log('Not found');

输出：

April month found
January month found
April month found