Как работает сравнение массивов?

let arr1 = [[1, 2, 3][(4, 5, 6)]];

вот этот треш [1, 2, 3][(4, 5, 6)] javascript воспринимает как undefined

в результате

let arr1 = [undefined]

т.е. массив с 1 элементом, который неопределён

arr2 = [...arr1]; 

копирует массив arr1 в arr2

В этот момент массивы равны, а затем вы меняете массив arr1, записывая в качестве первого элемента массив [7, 8, 9] и массивы [[7, 8, 9]] и [undefined] уже не равны :)

Но вот Javascript какой-то странный язык, который почему-то выводит позднее значение в виде раннего (именно выводит, а не присваивает):

let arr1 = [[1, 2, 3][(4, 5, 6)]];
let arr2 = [...arr1]; 
console.log(arr1); // выведется [undefined]
console.log(arr1[10] === arr2[0]);
console.log(arr1[0] === arr2[0]);

но

let arr1 = [[1, 2, 3][(4, 5, 6)]];
let arr2 = [...arr1]; 
console.log(arr1); // выведется [7, 8, 9]

arr1[0] = [7, 8, 9];
console.log(arr1[0] === arr2[0]);
console.log(arr1[0] === arr2[0]);

let arr1 = [[1, 2, 3][(4, 5, 6)]];

Круглые скобки превращают свои внутренности в выражение (expression)
Использован оператор - запятая. Там, где ожидается одно значение, он позволяет вычислить несколько выражений, а вернуть только значение последнего. Поэтому:

[[1, 2, 3][(4, 5, 6)]] → [[1, 2, 3][6]]

[1, 2, 3][6] → Из массива [1, 2, 3] достается [6]-й элемент (его нет): undefined. В итогде в arr1 попадает массив с одним элементом [undefined]

let arr2 = [...arr1]; — элементы первого массива передаются во второй массив, arr2 теперь тоже [undefined]

console.log(arr1[0] === arr2[0]); // undefined === undefined → true;

А тут:

arr1[0] = [7, 8, 9];

console.log(arr1[0] === arr2[0]); // [7, 8, 9] === undefined → false;

Чаще используйте console.log()...

let arr1 = [[1, 2, 3][(4, 5, 6)]];
console.log(arr1); // [undefined]

let arr2 = [...arr1];
console.log(arr2); // [undefined]

console.log(arr1[0], arr2[0], arr1[0] === arr2[0]); // undefined undefined true

arr1[0] = [7, 8, 9];
console.log(arr1[0], arr2[0], arr1[0] === arr2[0]); // [7,8,9] undefined false

/***/

const fn = () => (true, 100500, "Запятая!");

console.log( fn() ); // "Запятая!"

.as-console-wrapper { min-height: 100vh; }
.as-console-wrapper code { white-space: nowrap; }

По второй части:

let arr1 = [[1, 2, 3],[4, 5, 6]];
let arr2 = [...arr1];

console.log( arr1 ); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
console.log( arr2 ); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]

console.log(arr1[0], arr2[0], arr1[0] === arr2[0]); // [ 1, 2, 3 ] [ 1, 2, 3 ] true
console.log( [ 1, 2, 3 ] === [ 1, 2, 3 ] ) // false

.as-console-wrapper { min-height: 100vh; }
.as-console-wrapper code { white-space: nowrap; }

В чем подвох? console.log( [ 1, 2, 3 ] === [ 1, 2, 3 ] ) при вызове console.log здесь создается два разных объекта. Через строгое сравнение, массив никогда не будет равен никакому другому массиву. Они могут хранить одинаковые данные, но являются разными объектами.

В переменных, свойствах: Создаваемый массиив не хранится "физически". В переменную попадает ссылка на этот массив.

А при передаче элементов let arr2 = [...arr1]; копируются именно ссылки, указывающие на эти массивы. Заново не создаются новые массивы. Т.е. arr1[0] и arr2[0] — это ссылка на один и тот же массив [1, 2, 3], которая может одновременно храниться в разных местах.

let arr1 = [1, 2, 3];
let arr2 = arr1;

console.log( arr1 === arr2 ); // true;