Деструктуризация объекта в JavaScript ES6

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- правило-распространение-последнее-свойство-выигрывает