为什么过滤然后映射会改变javascript中的原始数组[重复]

Question

const words = [{ref : "a", list: "a & b & c & d", total: 0},
              {ref : "a", list: "a & b & c & d", total: 0},
              {ref : "b", list: "aa & bb & cc & dd", total: 0},
              {ref : "c", list: "aaa & bbb & ccc & ddd", total: 0}];

 var data = words.filter(item => {
            if (item.ref == "a")
              return item;
        });

let result = data.map(o => {
            o.list = o.list.split('&').map(key => ({
                selected: false,
            }))
            return o;
        });
console.log(words);
console.log(result);

• 我有单词数组
• 过滤ref : a 后，我得到了新数组data
• 但是当我修改data 的对象时，它反映在主数组words 上。 这不应该发生。

words
> Array [
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "b", list: "aa & bb" },
Object { ref: "c", list: "aaa & bbb" }
]

result
> Array [
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] }
]

• 用字你可以看到ref b和ref c没有被修改
• 但ref a 已更改。在我的情况下不应该发生这种情况

* 如何避免更改原始数组 words ？ *

Answer 1

您的.map() 调用更改了原始对象的list 属性。 map() 返回一个新数组，但是如果你直接更改其中的对象，它们就会受到影响。对象总是通过引用传递。

为防止您的map() 更改原始数组，您需要返回每个元素的副本：

let result = data.map(o => ({
    ...o,
    points: 10,
    list: o.list.split('&').map(key => ({
        selected: false,
    }))
}));

注意，你也用错了filter()。在filter() 中，您应该分别返回true 或false 来保留或拒绝一个元素。返回您的条件结果就足够了：

var data = words.filter(item => {
    return item.ref == "a";
});