Как заменить элемент в массиве?
Заголовок: Как заменить элемент в массиве JavaScript?
Описание проблемы:
У меня есть массив чисел, который выглядит следующим образом:
var items = Array(523, 3452, 334, 31, ...5346);
Я хочу заменить один из существующих элементов на новый. Например, мне нужно заменить число 3452
на 1010
.
Как мне это сделать? Буду признателен за помощь!
5 ответ(ов)
Для проверки наличия элемента в массиве и его замены в JavaScript можно использовать метод indexOf
, как в примере ниже:
var index = items.indexOf(3452);
if (index !== -1) {
items[index] = 1010;
}
Тем не менее, рекомендуется не использовать конструкцию для инициализации массивов. Вместо этого лучше применить синтаксис литерала:
var items = [523, 3452, 334, 31, 5346];
Если вам нравится более краткий JavaScript, вы также можете использовать оператор ~
, чтобы сократить сравнение с -1
:
var index = items.indexOf(3452);
if (~index) {
items[index] = 1010;
}
Иногда я даже предпочитаю написать функцию contains
, чтобы абстрагировать эту проверку, что делает код более понятным. Замечательно, что это работает как для массивов, так и для строк:
var contains = function (haystack, needle) {
return !!~haystack.indexOf(needle);
};
// теперь можно использовать так:
if (contains(items, 3452)) {
// выполняем что-то еще...
}
Начиная с ES6/ES2015 для строк и предложенного для ES2016 для массивов, вы можете более удобно определять, содержит ли источник другое значение:
if (haystack.includes(needle)) {
// делайте свое дело
}
Таким образом, используйте подходящий для вашего кода синтаксис, который облегчит понимание и управление данными!
Метод Array.indexOf()
заменит только первое вхождение элемента. Чтобы заменить все вхождения, можно использовать Array.map()
:
a = a.map(item => item == 3452 ? 1010 : item);
Однако этот метод создаёт новый массив. Если вы хотите изменить массив на месте, используйте Array.forEach()
:
a.forEach((item, i) => { if (item == 3452) a[i] = 1010; });
Таким образом, используя forEach
, вы сможете заменить все вхождения элемента без создания нового массива.
Ответ от @gilly3 отличный.
Заменить объект в массиве, сохраняя порядок массива неизменным
Я предпочитаю следующий способ обновления записей в моем массиве, когда получаю данные с сервера. Это позволяет сохранить порядок элементов и выглядит достаточно просто в одну строку.
users = users.map(u => u.id !== editedUser.id ? u : editedUser);
Вот пример кода:
var users = [
{id: 1, firstname: 'John', lastname: 'Ken'},
{id: 2, firstname: 'Robin', lastname: 'Hood'},
{id: 3, firstname: 'William', lastname: 'Cook'}
];
var editedUser = {id: 2, firstname: 'Michael', lastname: 'Angelo'};
users = users.map(u => u.id !== editedUser.id ? u : editedUser);
console.log('users -> ', users);
Этот подход позволяет элегантно заменить пользователя в массиве, не нарушая его исходный порядок.
В вашем случае, чтобы найти элемент с помощью indexOf
, вы используете метод, который возвращает индекс первого вхождения указанного значения в массиве. Вот как это работает:
var i = items.indexOf(3452);
items[i] = 1010; // Замена элемента по найденному индексу
В этом коде переменная i
будет содержать индекс элемента 3452
в массиве items
. Затем вы можете использовать этот индекс для замены значения на 1010
.
Обратите внимание, что если элемент не найден, indexOf
вернет -1
. В таком случае попытка замены значения по индексу -1
вызовет ошибку. Поэтому рекомендуется добавить проверку на наличие элемента перед заменой:
var i = items.indexOf(3452);
if (i !== -1) {
items[i] = 1010;
} else {
console.log('Элемент не найден!');
}
Таким образом, вы избежите ошибок и сделаете ваш код более надежным.
Первый метод
Лучший способ заменить или обновить элемент массива за одну строку:
array.splice(array.indexOf(valueToReplace), 1, newValue)
Пример:
let items = ['JS', 'PHP', 'RUBY'];
let replacedItem = items.splice(items.indexOf('RUBY'), 1, 'PYTHON');
console.log(replacedItem); // ['RUBY']
console.log(items); // ['JS', 'PHP', 'PYTHON']
Второй метод
Другой простой способ выполнить ту же операцию:
items[items.indexOf(oldValue)] = newValue;
Этот метод также позволяет заменить элемент массива, но менее "чистый", так как он не учитывает возможность отсутствия элемента в массиве.
Как перемешать (сделать случайным) массив в JavaScript?
Как объединить два массива в JavaScript и удалить дубликаты?
Как удалить все дубликаты из массива объектов?
Самый быстрый способ дублирования массива в JavaScript: slice против цикла 'for'
Как проверить, содержит ли массив строку в TypeScript?