Памятка о деструктурирующем присваивании
13 июля 2024 г.
При деструктурирующем присваивании переменные как бы извлекаются из объекта, строки или массива.
Они объявляются в фигурных или прямых скобках, имитируя синтаксис объекта или массива, из которого извлекаются.
Ниже представлены различные примеры, использующие деструктуризацию.
Деструктуризация и изменение значений:
JavaScript
1let [a, b] = [ 3, 5];2[a, b] = [a + 2, b + 8]; // a = 5; b = 13;3[a, b] = [b, a];4[a, b] // a = 13; b = 5;
Избыточным переменным слева устанавливается значение undefined, избыточные переменные справа - игнорируются:
JavaScript
1const [f, n, k] = [2, 78]2console.log(f, n, k) // f = 2; n = 78; k = undefined;34const [c, o] = [1, 12, 96]5console.log(c, o) // c = 1; o = 12;
Пропускать переменные можно, добавляя дополнительные запятые:
JavaScript
1const [w,, e,, r] = [1, 12, 96, 2, 78, 79]2console.log(w, e, r) // w = 1; e = 96; r = 78;
Объединение оставшихся переменных в одну - rest оператор ... :
JavaScript
1const [t, ...u] = [1, 12, 96, 2, 78]2console.log(t, u) // t = 1; u = [ 12, 96, 2, 78 ];
В качестве возвращаемых значений в функциях:
JavaScript
1function getTrigonometric(x) {2 return [Math.sin(x), Math.cos(x)]3}4const [x, y] = getTrigonometric(129)5console.log(x, y) // x = -0.19347339203846847 y = -0.9811055226493881
В циклах:
JavaScript
1const obj = {a: "one", b: "two"}2for(const [key, value] of Object.entries(obj)) {3 console.log(key, value)4}5// a one6// b two
Вложенные массивы:
JavaScript
1const [[i,d], [p,s]] = [[1, 12], [96, 2]]2console.log(i,d, p,s) // i = 1; d = 12; p = 96; s = 2;
Деструктурировать можно также объект и строку:
JavaScript
1const [first, ...other] = "Moon";2console.log(first, other) // first = M; other = [ 'o', 'o', 'n' ];34const {min, max} = Math;5console.log(min(1, 4), max(8, 24)) // min - 1 max - 24
Изменение имени при деструктуризации:
JavaScript
1const object = {a: "your", b: "letter"}2const {a: one, b: two} = object;3console.log(one, two) //one = your; two = letter;