Javascript массивы замена элемента

Как заменить элемент в массиве JavaScript?

Иногда нам может потребоваться заменить элемент в массиве JavaScript.

В этой статье мы рассмотрим, как заменить элемент в массиве JavaScript.

Array.prototype.indexOf и присвоение

Мы можем использовать метод indexOf массива JavaScript, чтобы найти индекс заданного значения в массиве.

Затем мы можем использовать индекс, чтобы присвоить этому индексу новое значение.

Например, мы можем написать:

const arr = [523, 353, 334, 31, 412]; const index = arr.indexOf(353); if (index !== -1) < arr[index] = 1010; >console.log(arr)

Мы вызываем arr.indexOf с искомым значением.

Он вернет индекс первого экземпляра значения, если он существует, или -1 в противном случае.

Итак, если index не равно -1, то мы можем заменить значение по данному индексу новым, присвоив его, как мы это делали в блоке if .

Array.prototype.map

Мы можем использовать метод map для возврата нового массива с записями существующего массива, сопоставленными с новыми значениями.

Чтобы использовать это для замены одного или нескольких экземпляров значения, мы можем написать:

const arr = [523, 353, 334, 31, 412]; const mapped = arr.map(a => a == 353 ? 1010 : a) console.log(mapped)

Мы вызываем map с помощью обратного вызова, который проверяет, является ли значение a , которое проходит итерацию, равным 353.

Если это так, мы заменяем это на 1010.

В противном случае мы просто возвращаем существующее значение.

Array.prototype.indexOf и Array.prototype.splice

Мы также можем использовать метод splice массива JavaScript для замены значения по данному индексу новым.

Например, мы можем написать:

const arr = [523, 353, 334, 31, 412]; const index = arr.indexOf(353); if (index !== -1) < arr.splice(index, 1, 1010); >console.log(arr)

Таким же образом получаем индекс 353.

Но вместо присвоения значения мы вызываем splice с index элемента, который нужно удалить.

1 во втором аргументе означает, что мы удаляем 1 элемент.

И третий аргумент — это значение, на которое мы заменяем элемент.

Итак, arr то же самое, что и в первом примере.

Заключение

Мы можем использовать методы массива для замены объекта по данному индексу другим значением.

Источник

Javascript массивы замена элемента

Last updated: Dec 22, 2022
Reading time · 5 min

# Table of Contents

# Replace an Element in an Array in JavaScript

To replace an element in an array:

1. Use the Array.indexOf() method to get the index of the element.
2. Change the value of the element at the specific index.
3. The value of the array element will get updated in place.

Copied! 
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 if (index !== -1)  arr[index] = 'z'; > console.log(arr); // 👉️ ['z', 'b', 'c'] 

We used the Array.indexOf method to get the index of the array element with a value of a .

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

We then replaced the element at that index with a new value.

Copied! 
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 if (index !== -1)  arr[index] = 'z'; > console.log(arr); // 👉️ ['z', 'b', 'c'] 

We check if the method didn’t return an index of -1 to be sure that an element with the specified value exists.

JavaScript indexes are zero-based, so the first element in an array has an index of 0 and the last element has an index of arr.length — 1 .

Alternatively, you can use the Array.splice() method.

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

This is a three-step process:

1. Use the indexOf() method to get the index of the element to be replaced.
2. Use the Array.splice() method to replace the element at the specific index.
3. The array element will get replaced in place.

Copied! 
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 arr.splice(index, 1, 'z'); console.log(arr); // 👉️ [ 'z', 'b', 'c' ] 

We passed the following 3 arguments to the Array.splice method:

1. start index — the index at which to start changing the array.
2. delete count — how many elements should be deleted from the array.
3. item1 — the item to add to the array.

We set the start index to the index of the array element we want to replace.

Copied! 
const arr = ['a', 'b', 'c']; const index = arr.indexOf('a'); // 👉️ 0 arr.splice(index, 1, 'z'); console.log(arr); // 👉️ [ 'z', 'b', 'c' ] 

We set the delete count argument to 1 , so the Array.splice() method will remove the array element at the specified index and will add the provided third argument at the same index.

In practice, we remove the array element at the specified index and then insert a different value at the same index, so we end up replacing the array element.

An alternative approach is to use a basic for loop.

# Replace an Element in an Array using a for loop

This is a three-step process:

1. Use a for loop to iterate for array.length iterations.
2. Check if each array element is the one to be replaced.
3. If the condition is met, replace the element at the index and break out of the for loop.

Copied! 
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'] 

We used a basic for loop to iterate over the array. On each iteration, we check if the current element is the one we want to replace.

Once we find and replace the element, we break out of the loop to avoid unnecessary work.

If you want to replace all array elements with the specified value, simply remove the break statement.

Copied! 
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' ] 

We didn’t use a break statement, so we replaced all elements with a value of a with elements with a value of z .

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

Want to learn more about updating arrays in JavaScript ? Check out these resources: Update all Elements in an Array in JavaScript ,Update an Object’s Property in Array of Objects in JS.

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

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

This is a three-step process:

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.

Copied! 
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.

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()

This is a three-step process:

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.

Copied! 
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.

On each iteration, we check if the current element is the one to be replaced.

If the condition is met, we replace the element with the replacement value.

The forEach() method is useful if you need to replace all occurrences of the value in the array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник