如何从JavaScript中的数组替换元素？

In this article, we'll see various methods in action to replace an element from an array in JavaScript.

在本文中，我们将看到各种有效的方法来替换JavaScript中数组中的元素 。

Consider the following array,

考虑以下数组，

let heroes = [
    "Captain America",
    "Iron Man",
    "Thor",
    "Hulk",
    "Loki"
]
console.log(heroes);

Output

输出量

(5) ["Captain America", "Iron Man", "Thor", "Hulk", "Loki"]

After the endgame, we are sure we will never see "Iron Man" again and our friendly neighborhood "spiderman" has very well joined the crew. So how do we replace Iron Man with SpiderMan in the heroes array?

比赛结束后，我们确信我们再也不会见到“钢铁侠”了，我们友好的邻居“蜘蛛侠”也加入了队伍。 那么，我们如何在英雄阵列中用蜘蛛侠代替钢铁侠？

The first approach is the naive approach where we can cycle through the array, find the element we had to replace and change it with the new element.

第一种方法是幼稚的方法，我们可以遍历数组，找到必须替换的元素，并使用新元素对其进行更改。

let heroes = [
    "Captain America",
    "Iron Man",
    "Thor",
    "Hulk",
    "Loki"
]
console.log(heroes);

for (let i = 0; i < heroes.length; i++) {
    if (heroes[i] == "Iron Man")
        heroes[i] = "Spiderman";
}
console.log(heroes);

Output

输出量

(5) ["Captain America", "Iron Man", "Thor", "Hulk", "Loki"]
(5) ["Captain America", "Spiderman", "Thor", "Hulk", "Loki"]

Can we do a bit better?

我们可以做得更好吗？

We can use the spice() method on our array which is used to add and remove elements from an array. This method takes the first argument as an index which specifies the position of the element to be added or removed. The next argument it takes is the number of elements to be removed and is optional. The last argument is the new items added to the array.

我们可以在数组上使用spice()方法 ，该方法用于添加和删除数组中的元素。 此方法将第一个参数用作索引，该索引指定要添加或删除的元素的位置。 下一个参数是要删除的元素数，它是可选的。 最后一个参数是添加到数组的新项目。

    array.splice(index,number,newItem);

Example:

例：

heroes.splice(1,1,"Spiderman");
console.log(heroes);

Output

输出量

(5) ["Captain America", "Spiderman", "Thor", "Hulk", "Loki"]

Another way we can do this is by using the map method. The map method iterates through the array it is invoked on and runs a callback function on each value. It adds the result of that callback to the new array and returns an array at the end of the execution of callback of the same length.

我们可以执行此操作的另一种方法是使用map方法 。 map方法遍历在其上调用的数组，并对每个值运行一个回调函数。 它将回调的结果添加到新数组中，并在执行相同长度的回调结束时返回一个数组。

let newHeroes = heroes.map(hero => {
    if (hero == "Iron Man")
        return "Spiderman";
    else
        return hero;
})

console.log(newHeroes);

Output

输出量

(5) ["Captain America", "Spiderman", "Thor", "Hulk", "Loki"]

Since the map returns us a new array, we can use the new array obtained and copy that to our old array so that effectively our operation seems in place.

由于地图返回了一个新数组，因此我们可以使用获得的新数组并将其复制到旧数组中，以便有效地执行我们的操作。

heroes = newHeroes;
console.log(heroes);

Output

输出量

(5) ["Captain America", "Spiderman", "Thor", "Hulk", "Loki"]

翻译自: https://www.includehelp.com/code-snippets/how-to-replace-element-from-an-array-in-javascript.aspx