Javascript 映射数组对象在尝试添加时更改原始数组属性

Question

我映射对象数组并尝试添加属性和 return 新数组并记录它。但事实证明它也改变了原始数组......为什么会这样？我相信这是某种对象技巧。

var students = [
    { name: 'nika', age: 25 },
    { name: 'goga', age: 11 },
    { name: 'saba', age: 20 },
    { name: 'tedo', age: 35 },
    { name: 'gio', age: 15 },
    { name: 'lasha', age: 5 },
    { name: 'sandro', age: 8 },
];

function solution(arr) {
    let newArr = arr.map(function (item) {
        if (item.age < 18) {
            item.forbidden = true;
        }
        return item;
    });

    console.log(newArr);
    console.log(students);

}

solution(students);

我想要 ES5 中的解决方案

Answer 1

您可以从不共享相同对象引用的对象创建副本。

function solution(arr) {
    return arr.map(function (item) {
        item = JSON.parse(JSON.stringify(item));

        if (item.age < 18) {
            item.forbidden = true;
        }
        return item;
    });
}


var students = [
    { name: 'nika', age: 25 },
    { name: 'goga', age: 11 },
    { name: 'saba', age: 20 },
    { name: 'tedo', age: 35 },
    { name: 'gio', age: 15 },
    { name: 'lasha', age: 5 },
    { name: 'sandro', age: 8 },
];

console.log(solution(students));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Nina Scholz 正确地指出解决方案是在 map 方法的函数内创建每个对象的副本，并暗示为什么这是必要的：map 方法正在创建一个新的对象数组，但这些对象与原始数组中的对象共享相同的引用。因此，对对象所做的任何更改都会反映在两个数组中。

Javascript 映射数组对象在尝试添加时更改原始数组属性

Javascript Map Array Object changes original array when try to add property

javascript

arrays

array-map

Javascript 映射数组对象在尝试添加时更改原始数组 属性

Javascript Map Array Object changes original array when try to add property

javascript

arrays

array-map

Javascript 映射数组对象在尝试添加时更改原始数组属性