Почему эта функция карты не изменяет значения в исходном массиве?

Question

Почему эта функция карты не изменяет значения в исходном массиве?

1

Вот код, о котором идет речь:

const array = [
  1, 2, 3
]

array.map(item => {
  item = item + 1
})

console.log(array)

Я думал, что аргумент item (first) в методе map является ссылкой на исходный элемент в массиве и что его изменение напрямую изменит содержимое этого первого массива... это не так?

john maccarthy 09 янв. 2018, в 12:39

Источник

0

Если вы хотите изменить каждый элемент в массиве, вы должны использовать «forEach», а затем вызывать метод мутации для каждого элемента. Когда вы делаете item = item+1 , вы не изменяете item независимо от того, вызываете ли вы .map или .forEach , потому что вы просто переназначаете локальную переменную.
TKoL 09 янв. 2018, в 11:04

Теги:

javascript

ecmascript-6

arrays

3 ответа

Ещё вопросы

Если вы хотите изменить каждый элемент в массиве, вы должны использовать «forEach», а затем вызывать метод мутации для каждого элемента. Когда вы делаете item = item+1 , вы не изменяете item независимо от того, вызываете ли вы .map или .forEach , потому что вы просто переназначаете локальную переменную.

Maxim Egorushkin · Answer 1 · 2018-01-09T09-08-00.000Z

map возвращает новый массив, он не изменяет исходный.

item - это локальная переменная здесь, в функции функции стрелки item => {...}. Назначение item = item + 1 не меняет исходный элемент, это скорее изменяет item локальной переменной.

Если вы хотите изменить элементы forEach функция более эффективна, поскольку не создает новый массив:

array.forEach((item, index) => {
    array[index] = item + 1;
});

OP не заботится о возвращаемом значении. Представьте себе этот код с более сложным объектом вместо item . Затем вы можете сделать item.someproperty = 1 - это вопрос, который задает OP.
@JamesThorpe Можете ли вы перегрузить operator+ в JavaScript?
Нет. И благодаря тому, как вещи копируются по значению, item сможет обновляться только локально, поскольку он примитивен. Если бы это был более сложный объект, вы могли бы изменить свойства этого объекта, но не заменить его на совершенно другой объект.
@JamesThorpe Я не уверен, насколько ваши комментарии имеют отношение к этому конкретному коду. Вы обсуждаете что-то еще.

Faly · Answer 2 · 2018-01-09T08-45-00.000Z

2

В вашем массиве содержатся элементы типа примитивов (целое число здесь). Переменные типа примитива не могут быть изменены по его ссылке. Мутирование возможно, если, например, элементы вашего массива являются объектами, например:

var array = [{val: 1}, {val: 2}, {val: 3}];
array.map(item => {item.val = item.val + 1});
console.log(array);

Faly 09 янв. 2018, в 08:45

1

Итак, вы говорите, что если бы это не был массив примитивных типов, это назначение изменило бы исходный элемент?
Maxim Egorushkin 09 янв. 2018, в 11:06
0

@MaximEgorushkin Да, смотрите мой обновленный ответ
Faly 09 янв. 2018, в 11:10
0

Теперь это другой код с другим значением.
Maxim Egorushkin 09 янв. 2018, в 11:11
0

Почему вы используете карту таким образом? Если вы не собираетесь ничего делать с возвращенным массивом, вам следует использовать forEach.
Jonah 09 янв. 2018, в 11:13
1

@Jonah Да, для каждой работы, но ОП запрашивает карту и хочет знать, могут ли мутации появляться с картой
Faly 09 янв. 2018, в 11:15
0

@ Джона Ты не прав. Переменная функции обратного вызова всегда ссылается на исходные элементы в массиве. Если вы измените эту переменную, оригинал в массиве также изменится, если это не примитивный тип, из-за ссылки. Ссылки теряются при переназначении кода item = item + 1. Например, для объектов в массиве оригинал меняется с картой, как я показываю в примере моего ответа
Faly 09 янв. 2018, в 11:23
0

@Faly попробуйте это: const array = [ 1, 2, 3 ] array.map((item,index) => { console.log(item); console.log(array[index]); item = item + 1; console.log(item); console.log(array[index]); }) Вы увидите, что он меняет локальную переменную «item», но не меняет фактический элемент в массиве. Это потому, что объекты по умолчанию передаются по ссылке, а типы значений - нет.
Jonah 09 янв. 2018, в 11:26
1

@Jonah Делая item = item + 1, вы переназначаете и теряете ссылку. Даже если объект переназначен, вы теряете ссылку, а оригинал не видоизменяется
Faly 09 янв. 2018, в 11:30
0

@Jonah Возьмите мой пример выше и измените его на array.map (item => {item = {};}); и вы увидите, что элементы в массиве не видоизменены, потому что при переназначении вы теряете ссылку на исходный объект
Faly 09 янв. 2018, в 11:42

Показать ещё 7 комментариев

Ali · Answer 3 · 2018-01-09T08-32-00.000Z

Mozilla говорит;

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Таким образом, функция карты не мутирует значения массива.

Я знаю, что вы этого не хотите, но вы можете использовать это:

const array = [
  1, 2, 3
]

array.map((item, k) => {
  array[k] = item + 1
})

console.log(array)