Swap 使用 Javascript/ES6 解构赋值不按预期工作

Question

I thought that JavaScript ES6 Swap destructuring assignment is an order-independent operation. The below, when executed both on chromium and Firefox, give the same (seemingly) wrong result. Since it is unlikely that both Chromium and Firefox have the same bug, I wonder if I am not understanding something right. Can you help understand why this is so, please?

Code:

let node3 = {id: 3, next: null};
let node2 = {id: 2, next: node3};
let node1 = {id: 1, next: node2};

[node1.next, node1] = [null, node1.next];
console.log(`${node1} ${node1?.id}, ${node1?.next?.id}`);

Result (node1.next points to node3):

 [object Object] 2, 3

Same code (just with the assignment order reversed):

let node3 = {id: 3, next: null};
let node2 = {id: 2, next: node3};
let node1 = {id: 1, next: node2};

[node1, node1.next] = [node1.next, null];
console.log(`${node1} ${node1?.id}, ${node1?.next?.id}`);

Result (node1.next now is null!):

[object Object] 2, **undefined**

Answer 1

You seem to be misunderstanding the destructuring logic. Your example breaks down (with a little hand-waving) as

let node3 = {id: 3, next: null};
let node2 = {id: 2, next: node3};
let node1 = {id: 1, next: node2};

// [node1.next, node1] = [null, node1.next];
let tmp = [null, node1.next];
node1.next = tmp[0];
node1 = tmp[1];
console.log(`${node1} ${node1?.id}, ${node1?.next?.id}`);

and your second swaps the two tmp lines to be

// [node1, node1.next] = [node1.next, null];
let tmp = [node1.next, null];
node1 = tmp[0];
node1.next = tmp[1];

This second one fails because you're essentially now doing

let node1Next = node1.next;
node1 = node1Next;
node1.next = null;

where the first, functional, example is doing

let node1Next = node1.next;
node1.next = null;
node1 = node1Next;