Деструктуризация массива в ES6: непредвиденное поведение

В ES6 назначение деструктуризации массивов может привести к неожиданным результатам, оставляя программистов в недоумении. Один из таких примеров иллюстрируется следующим кодом:

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

Предполагаемый вывод:
a=A b=BB c =C

Фактический результат:
a=BB b=C c=undefined

Объяснение:

Напротив Согласно ожиданиям, этот код не дает желаемого результата. Вместо этого он меняет значения b и c, оставляя c неопределенным. Чтобы понять, почему это происходит, нам нужно внимательно изучить код.

Разбор и оценка:

В JavaScript точки с запятой не являются обязательными для разделения операторов. Без явных точек с запятой код анализируется как один оператор:

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

Разбивка утверждения:

• [a, b] = (['A', 'B'] — деструктурирующее присваивание, аналогичное присвоению в исходном коде.
• [(b, c)] = ['BB' , 'C'] — это выражение присваивания, которое присваивает массив ['BB', 'C'] левому операнду. Это выражение возвращает тот же массив.
• ['A', 'B '][…] — это ссылка на свойство литерала массива, значение которого равно неопределенному.
• (b, c) использует оператор запятая, который оценивает последний операнд (c), который не определен.

Последствия:

Поэтому код присваивает неопределенное значение как a, так и c, а b правильно получает значение 'C'. Чтобы избежать такого поведения, программисты. следует явно использовать точки с запятой или начинать каждую строку с оператора, который требует автоматической вставки точки с запятой (например, (, [, /, , - или `).

Это понимание гарантирует, что назначения деструктуризации в ES6 работают как и ожидалось, предотвращая неожиданные замены значений и неопределенные назначения.