javascript - 如何在 javascript 中保持对象不可变的数组？

Question

我想创建一个基于两个数组的数组 - 全局声明的“ideaList”和“endorsements”。由于在程序的其他部分使用了 ideaList 和背书，我需要它们是不可变的，并且我认为 .map 和 .filter 将保持这种不变性。

function prepareIdeaArray(){
var preFilteredIdeas=ideaList
        .filter(hasIdeaPassedControl)
        .map(obj => {obj.count = endorsements
                                 .filter(x=>x.ideaNumber===obj.ideaNumber)
                                 .reduce((sum, x)=>sum+x.count,0); 
                     obj.like = endorsements
                                 .filter(x=>x.ideaNumber===obj.ideaNumber && x.who===activeUser)
                                 .reduce((sum, x)=>sum+x.count,0)===0?false:true
                     obj.position = generatePosition(obj.status)
                     obj.description = obj.description.replace(/\n/g, '<br>')  
                     return obj;});
preFilteredIdeas.sort(compareOn.bind(null,'count',false)).sort(compareOn.bind(null,'position',true))
return preFilteredIdeas;
}

但是，当我在执行完这个函数后console.log ideaList时，我发现数组的对象都有“count”，“like”，“position”属性和值，这证明数组已经变异了。

我尝试仅使用 .map，但结果相同。

你知道我怎样才能防止 ideaList 发生变异吗？此外，我想避免使用 const，因为我首先全局声明 ideaList，然后在另一个函数中为其分配一些数据。

Answer 1

您不是在改变数组本身，而是在改变数组包含引用的对象。 .map() 创建数组的副本，但其中包含的引用指向与原始对象完全相同的对象，您通过直接向它们添加属性来改变它们。

您还需要制作这些对象的副本并将属性添加到这些副本。一个巧妙的方法是在 .map() 回调中使用对象传播:

    .map(({ ...obj }) => {
      obj.count = endorsements
                             .filter(x=>x.ideaNumber===obj.ideaNumber)
      ...

如果您的环境不支持对象扩展语法，请使用 Object.assign() 克隆对象:

    .map(originalObj => {
      const obj = Object.assign({}, originalObj);
      obj.count = endorsements
                             .filter(x=>x.ideaNumber===obj.ideaNumber)
      ...