为什么map函数会改变参数数组？

Question

我正在尝试创建一个新的对象数组，并向其中添加一个新的键值对。我遇到的问题是下面的addActive函数以某种原因改变了参数数组。更令人困惑的是，即使将 var itemList = data; 添加到代码中，它仍然通过向其添加额外的列来改变初始的data数组。

对于我之前接触过 Python 的背景来说，这似乎有点不合逻辑，特别是当文档说map会创建一个新的数组时。能否有人解释一下这是为什么？

const data = [{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
    { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
    { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
    { age: 38, first_name: 'Jami', last_name: 'Carney' }];


function getFields(df) {
    return Object.keys(df[0]) 
}

var itemList = data;

function addActive(df) {
    return itemList.map((o) => {
        o.isActive = true;
        return o;
    })
}

const items = addActive(itemList);

const fields = getFields(data);

console.log(fields)

- Matt Kowaleczko

---

o.isActive = true;正在改变您正在迭代的对象。因此，是的，您会得到一个新数组，并将旧的修改后的对象添加到其中。 map不会为您克隆所有项目。 - VLAZ

Answer 1

虽然 .map 创建了一个新的数组，但它的参数是直接引用旧数组中的对象：

const obj = {};
const arr = [obj];
const newArr = arr.map((item) => {
  console.log(item === obj);
});

如果您改变其中一个对象然后返回它，旧数组中的元素也会被改变。新数组将由与旧数组相同的对象组成，尽管是不同的集合。

如果您想要克隆子对象，请使用展开语法：

function addActive(df) {
    return itemList.map((o) => ({ ...o, isActive: true }));
}

const data = [{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
    { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
    { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
    { age: 38, first_name: 'Jami', last_name: 'Carney' }];


function getFields(df) {
    return Object.keys(df[0]) 
}

var itemList = data;

function addActive(df) {
    return itemList.map((o) => ({ ...o, isActive: true }));
}

const items = addActive(itemList);

const fields = getFields(data);

console.log(fields)

这将导致新数组中的项目与原始数组中的项目 完全独立。

- CertainPerformance

---

请注意，扩展（...）语法不会进行深层复制。如果您的对象更复杂，则仍然可能持有对共同子对象的引用。 - Always Learning