迹忆客 专注技术分享

数组是 JavaScript 中具有固定数字键和动态值的对象，可以在单个变量中包含任意数量的数据。数组可以是一维或多维的。JavaScript 数组可以直接存储值，也可以存储 JavaScript 对象。与其他语言不同，JS 数组可以在同一数组的不同索引处包含不同的数据类型。

在今天的帖子中，我们将了解如何在 JavaScript 中更新数组的对象。

JavaScript 提供了两种更新对象的方法，使用 map() 和 findIndex()。

在 JavaScript 中使用 map() 更新对象

这个由 JavaScript 提供的内置数组方法遍历原始数组并创建新数组，根据指定的条件完成元素。除了箭头函数，你还可以传递回调函数。map() 和 forEach() 之间的唯一区别是 map() 将创建新数组，而 forEach() 会改变原始数组。

JavaScript 中 map() 的语法

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

参数

$updateCondition：这个强制性参数指定应该为每个元素执行哪个操作。

$callbackFn：它是一个强制参数，它为要调用的数组的每个元素指定一个函数。每次调用该函数时，它都会将结果返回到新数组。

返回值

返回新数组，其中元素是回调函数的结果。

示例代码：

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

输出：

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

在 JavaScript 中使用 findIndex() 更新对象

这个内置的数组方法由 JavaScript 提供，它会查找值与指定条件匹配的元素的索引。除了箭头函数，你还可以传递回调函数。findIndex() 和 indexOf() 这两种方法之间只有一个区别。findIndex() 用于复杂的匹配条件或对象数据类型，而 indexOf() 用于简单条件或原始数据类型。

JavaScript 中 findIndex() 的语法

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

参数

$condition：这是一个强制性参数。用户可以传递与数组元素相关的任何条件，并找到第一个满足条件的匹配元素。

返回值

返回满足指定条件的数字索引。如果没有元素满足指定条件，则返回 -1。

示例代码：

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

输出：

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}