Основание! Будьте осторожны при использовании карты для возврата нового массива

JavaScript ECMAScript 6 ECMAScript 8

Определение и использование

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

  • Это предложение все еще довольно запутанное. Когда я не думаю об этом, это означает вернуть новый массив. В результате я использовал карту один раз, и исходная переменная не была изменена, и я обнаружил, что результат изменилось, о боже, это потрясающе.

Демонстрация ошибок

let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    v.a += 1;
    v.b += '1';
    return v
});
console.log(arr); // [{a:2,b:'21'},{a:3,b:'31'}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]
  • Почувствуйте это по желанию, очень сломано.

анализировать

  • Причина этого в том, что массив, который он возвращает, возвращает обработанный объект, который jsтип ссылкиВолосы по-прежнему не изменились Это изменение (v) эквивалентно изменению v, указывающего на тот же адрес, да.
  • Тогда легко понять, почему, первое, что приходит на ум, это присвоить
  • Метод Object.assign() используется для копирования значений всех перечисляемых свойств из одного или нескольких исходных объектов в целевой объект. Он вернет целевой объект.
  • Что касается других вещей, подумайте об этом в тот день, когда вы не работаете сверхурочно.
let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    let v1 = Object.assign({},v);
    v1.a += 1;
    v1.b += '1';
    return v1
});
console.log(arr); // [{a:1,b:2},{a:2,b:3}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]