在 JavaScript 中替换数组中的元素

在 JavaScript 中替换数组中的元素

Replace an Element in an Array in JavaScript

替换数组中的元素:

  1. 使用Array.indexOf()方法获取元素的索引。
  2. 更改特定索引处元素的值。
  3. 数组元素的值将就地更新。
索引.js
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 if (index !== -1) { arr[index] = 'z'; } console.log(arr); // 👉️ ['z', 'b', 'c']

我们使用
Array.indexOf()
方法获取值为 的数组元素的索引
a

索引.js
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); console.log(index); // 👉️ 0

然后我们用新值替换该索引处的元素。

请注意,如果找不到具有提供值的元素,该indexOf()方法将返回。-1
索引.js
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 if (index !== -1) { arr[index] = 'z'; } console.log(arr); // 👉️ ['z', 'b', 'c']

我们检查该方法是否未返回索引,-1以确保具有指定值的元素存在。

JavaScript 索引是从零开始的,因此数组中的第一个元素的索引为0,最后一个元素的索引为 arr.length - 1

或者,您可以使用该Array.splice()方法。

使用 Array.splice() 替换数组中的元素

替换数组中的元素:

  1. 使用indexOf()方法获取要替换的元素的索引。
  2. 使用Array.splice()方法替换特定索引处的元素。
  3. 数组元素将被替换到位。
索引.js
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 arr.splice(index, 1, 'z'); console.log(arr); // 👉️ [ 'z', 'b', 'c' ]

我们将以下 3 个参数传递给
Array.splice()
方法:

  1. start index – 开始更改数组的索引。
  2. delete count – 应该从数组中删除多少元素。
  3. item1 – 要添加到数组的项目。

我们将start索引设置为我们要替换的数组元素的索引。

索引.js
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 arr.splice(index, 1, 'z'); console.log(arr); // 👉️ [ 'z', 'b', 'c' ]
我们将delete count参数设置为1,因此该方法将删除指定索引处的数组元素,并将在同一索引处添加提供的第三个参数。 Array.splice()

实际上,我们删除指定索引处的数组元素,然后在同一索引处插入一个不同的值,因此我们最终替换了数组元素。

另一种方法是使用基本for循环。

使用 for 循环替换数组中的元素

替换数组中的元素:

  1. 使用 for 循环迭代array.length迭代。
  2. 检查每个数组元素是否是要替换的元素。
  3. 如果满足条件,则替换索引处的元素并跳出for循环。
索引.js
const arr = ['a', 'b', 'c']; for (let index = 0; index < arr.length; index++) { if (arr[index] === 'a') { arr[index] = 'z'; break; } } console.log(arr); // 👉️ ['z', 'b', 'c']

我们使用了一个基本for循环来遍历数组。在每次迭代中,我们检查当前元素是否是我们要替换的元素。

一旦我们找到并替换了元素,我们就break跳出循环以避免不必要的工作。

如果要用指定值替换所有数组元素,只需删除该break语句即可。
索引.js
const arr = ['a', 'b', 'c', 'a', 'a']; for (let index = 0; index < arr.length; index++) { if (arr[index] === 'a') { arr[index] = 'z'; } } console.log(arr); // 👉️ [ 'z', 'b', 'c', 'z', 'z' ]

我们没有使用break语句,所以我们将所有值为 的
a元素替换为值为 的元素z

An alternative solution is to not change the original array, but instead, create
a new array containing the desired values.

We can use the Array.map() method to achieve this.

Replace an Element in an Array using Array.map() #

To replace an element in an array:

  1. Use the Array.map() method to iterate over the array.
  2. Check if the current element is the one to be replaced.
  3. If the condition is met, return the replacement value, otherwise, return the
    original value.
index.js
const arr = ['a', 'b', 'c']; const newArr = arr.map(element => { if (element === 'a') { return 'z'; } return element; }); console.log(newArr); // 👉️ ['z', 'b', 'c'] console.log(arr) // 👉️ ['a', 'b', 'c']

The function we passed to the
Array.map()
method gets called with each element in the array.

The map() method returns a new array, containing the values we return from the callback function.

In the example, we replace all array elements with a value of a, setting them
to a value of z.

We didn’t change the contents of the original array and instead created a new
array with the values we need. This is often easier to reason about and track in
larger code bases.

You can also use the Array.forEach() method to replace the array elements in
place.

Replace an Element in an Array using Array.forEach() #

To replace an element in an array:

  1. Use the Array.forEach() method to iterate over the array.
  2. Check if each element is the one to be replaced.
  3. If the condition is met, replace the element with the replacement value.
index.js
const arr = ['a', 'b', 'c', 'a', 'a']; arr.forEach((element, index) => { if (element === 'a') { arr[index] = 'z'; } }); // 👇️ [ 'z', 'b', 'c', 'z', 'z' ] console.log(arr);

The function we passed to the Array.forEach() method gets called with each
element in the array.

在每次迭代中,我们检查当前元素是否是要替换的元素。

如果满足条件,我们用替换值替换元素。

如果您需要替换数组中出现的所有值,该forEach()方法很有用。