难以理解为什么原始对象在示例中的 .map 之后受到影响

Question

我一直无法理解为什么这里的温度会受到影响。当查看控制台时运行这段代码：

const objectsArray = [
    {'id': 1, 'name': 'Erik', 'yearsCompleted': 2, 'status': 'student'}, 
    {'id': 2, 'name': 'Carol', 'yearsCompleted': 1, 'status': 'student'}, 
    {'id': 3, 'name': 'Sarah', 'yearsCompleted': 4, 'status': 'student'}
];

temp = {
    actions: objectsArray.map(student => {
    if (student.yearsCompleted === 4) student.status = 'wow';
    return student
    })
}
console.log(temp)

temp2 = {
    actions: objectsArray.map(student => {
    if (student.yearsCompleted === 4) student.status = 'foo';
    return student
    })
}

console.log(temp)
console.log(temp2)

我最终得到以下结果：

{ actions:
   [ { id: 1, name: 'Erik', yearsCompleted: 2, status: 'student' },
     { id: 2, name: 'Carol', yearsCompleted: 1, status: 'student' },
     { id: 3, name: 'Sarah', yearsCompleted: 4, status: 'wow' } ] }
{ actions:
   [ { id: 1, name: 'Erik', yearsCompleted: 2, status: 'student' },
     { id: 2, name: 'Carol', yearsCompleted: 1, status: 'student' },
     { id: 3, name: 'Sarah', yearsCompleted: 4, status: 'foo' } ] }
{ actions:
   [ { id: 1, name: 'Erik', yearsCompleted: 2, status: 'student' },
     { id: 2, name: 'Carol', yearsCompleted: 1, status: 'student' },
     { id: 3, name: 'Sarah', yearsCompleted: 4, status: 'foo' } ] }

为什么在这种情况下温度会受到影响？将 temp 的操作属性设置为 objectsArray.map 函数时，我们是否获得了对 objectsArray 的引用？我认为在这种情况下温度不会受到影响。谢谢。

Answer 1

这是因为 student.status = 'foo' 更改了 temp 数组中的实际项目。您需要使用 spread operator(...) 制作副本并 return ，如下所示。

const objectsArray = [{
    'id': 1,
    'name': 'Erik',
    'yearsCompleted': 2,
    'status': 'student'
  },
  {
    'id': 2,
    'name': 'Carol',
    'yearsCompleted': 1,
    'status': 'student'
  },
  {
    'id': 3,
    'name': 'Sarah',
    'yearsCompleted': 4,
    'status': 'student'
  }
];

temp = {
  actions: objectsArray.map(student => {
    if (student.yearsCompleted === 4) {
      return { ...student,
        status: 'wow'
      }
    };
    return student
  })
}
console.log(temp)

temp2 = {
  actions: objectsArray.map(student => {
    if (student.yearsCompleted === 4) {
      return { ...student,
        status: 'foo'
      }
    };
    return student
  })
}

console.log(temp)
console.log(temp2)

难以理解为什么原始对象在示例中的 .map 之后受到影响

Having trouble understanding why original object is affected after .map within example

javascript

array.prototype.map