对象传播的顺序和其他属性扮演什么角色？

Question

考虑一个对象“数据”。

data = {
    draggingTaskId: '',
    entities: {},
    selectedTaskIds: [],
}

我以两种不同的顺序使用解构赋值，但两次的行为都不同。对象解构赋值中的顺序重要吗？

console.log('----------------------------------');
console.log({
  ...data,
  draggingTaskId: "task-0",
});
console.log({
  draggingTaskId: "task-0",
  ...data,
});
console.log('----------------------------------');

--------------------------------

draggingTaskId: "task-0"
entities: {columnOrder: Array(2), columns: {…}, tasks: {…}}
selectedTaskIds: ["task-0"]

draggingTaskId: ""
entities: {columnOrder: Array(2), columns: {…}, tasks: {…}}
selectedTaskIds: ["task-0"]

-----------------------------------

在第二种情况下，draggingTaskId以空字符串的形式出现。

Answer 1

顺序确实是相关的 - 稍后出现的项目会覆盖较早出现的项目，如果它们具有相同的键。

console.log({
  ...data,
  draggingTaskId: 'task-0', // this overrides the value of data.draggingTaskId = '', resulting in 'task-0'
})
console.log({
  draggingTaskId: 'task-0', // In this case this key is overridden by the value of data.draggingTaskId = '', resulting in ''
  ...data,
})

您可能会发现这很有帮助 - https://dmitripavlutin.com/object-rest-spread-properties-javascript/#21-object-spread-rule-latter-property-wins