[Программирование] Вы не знаете деструктуризацию, пока (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Для будущих студентов курса "React.js Developer" подготовили перевод полезной статьи.
Также приглашаем вас записаться на открытый урок по теме: "Пишем приложение на React+Redux".
С тех пор, как в ES6 была введена деструктуризация (destructuring assignment), прошло уже достаточно времени - теперь она поддерживается во всех передовых браузерах. Ее можно использовать в любой допустимой операции присваивания, например, при присваивании значений переменным, параметрам функции и т. д. Для начала давайте рассмотрим, что такое деструктуризация.Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.
const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };
const a = array[0], b = array[1], c = array[2];
const x = obj.x, y = obj.y, z = obj.z
console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6
Так мы поступали в эпоху до деструктуризации. А теперь давайте сделаем это в стиле ES6.
const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };
const [ a, b, c ] = array;
const { x, y, z } = obj;
console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6
Выглядит намного лучше. Получив общее представление, давайте копнем глубже.Шаблон присваивания свойств объектаДавайте подробнее остановимся на синтаксисе const {x, y, z} = obj из предыдущего фрагмента. На самом деле это сокращение от const {x: x, y: y, z: z} = obj. Если имя сопоставляемого свойства совпадает с именем переменной, которую вы хотите объявить, вы можете сократить синтаксис. Здесь мы оставим x: часть { x: x, .. }.Обычно операции присваивания следуют шаблону target = source или target: source, но для деструктуризации действителен шаблон source: target. Рассмотрим пример:
const obj = { x: 4, y: 5, z: 6 };
const { x: X, y: Y, z: Z } = obj;
console.log(X, Y, Z); // 4, 5, 6
Здесь объявляются переменные с именами X, Y, Z и им присваиваются значения obj.x, obj.y, obj.z соответственно. Следовательно, если имя сопоставляемого свойства совпадает с именем переменной, вы можете использовать сокращение. JS-движок выполнит эту работу за нас, позволяя нам сделать код немного чище.Присвойте позжеКак упоминалось ранее, деструктуризация может использоваться в любой допустимой операции присваивания. Это означает, что вам не обязательно нужно использовать операцию деструктуризации именно при объявлении переменных. Для уже объявленной переменной деструктуризация выполняет только назначения, точно так же, как и с другими назначениями переменных. Рассмотрим пример:
let a, b, c, x, y, z;
[a, b, c] = [1, 2, 3];
({x, y, z} = { x: 4, y: 5, z: 6 });
console.log(a, b, c, x, y, z); // 1 2 3 4 5 6
Для деструктуризации объекта нам нужно обернуть все выражение присваивания в круглые скобки (), иначе {..} в LHS будет расцениваться как составной оператор, а не как объект.Выражения присваивания не обязательно должны быть исключительно идентификаторами переменных. Разрешено все, что является допустимым выражением присваивания. Например:
// Присваивание объекта
const obj = {};
const computedProp = 'z';
[obj.a, obj.b, obj.c] = [1, 2, 3];
({ x: obj.x, y: obj.y, [computedProp]: obj[computedProp] } = { x: 4, y: 5, z: 6 });
console.log(obj.a, obj.b, obj.c); // 1 2 3
console.log(obj.x, obj.y, obj.z); // 4 5 6
// Присваивание массива
let array = [];
({ x: array[0], y: array[1], z: array[2] } = { x: 4, y: 5, z: 6 });
console.log(array); // [4, 5, 6]
Вспомните традиционный вопрос «как поменять местами две переменные без третьей временной переменной?» Теперь у нас есть новое решение для этого:
let x = 10, y = 20;
[y, x] = [x, y];
console.log(x, y); // 20 10
Присваивания с повторениемФорма деструктуризации объекта позволяет указывать исходное свойство несколько раз. Например:
const { a: X, a: Y } = { a: 1 };
console.log(X, Y); // 1 1
Очевидно, что это невозможно при деструктуризации массива ?️.Последовательное присваиваниеВозвращаемое значение любого деструктурирующего выражения - это исходный объект/массив. Посмотрим, что это значит на практике:
let a, b, c, x, y, z;
console.log({x, y, z } = { x: 4, y: 5, z: 6 }); // { x: 4, y: 5, z: 6 }
console.log([a, b, c] = [1, 2, 3]); // [1, 2, 3]
Благодаря переносу значение объекта из выражения в выражение, вы можете создавать последовательные композиции деструктурирующих выражений:
let a, b, c, x, y, z;
[a, b] = [c] = [1, 2, 3];
( {x} = {y,z} = {x: 4, y: 5, z: 6} );
console.log(a, b, c); // 1 2 1
console.log(x, y, z); // 4 5 6
[a, b] = [c] = [1, 2, 3] & ( {x} = {y,z} = {x: 4, y: 5, z: 6} ) вычисляется справа налево (т.е. возвращаемое значение [c] = [1, 2, 3] присваивается [a, b] аналогично, возвращаемое значение {y, z} = {x: 4, y: 5, z: 6} присваивается {x}).Необязательное присваиваниеПри деструктуризации вам не нужно присваивать все значения, которые присутствуют в исходном объекте/массиве. Например:
const [,,c] = [1, 2, 3];
const { y } = { x: 4, y: 5, z: 6 };
console.log(c, y); // 3 5
Вы можете пропустить значения, которые не требуются в текущей области.Сбор значенийВы можете использовать синтаксис rest в деструктуризации для сбора значений в одной переменной. Например:
const [a, ...b] = [1, 2, 3];
const { x, ...y } = { x: 4, y: 5, z: 6 };
console.log(a, b); // 1 [2, 3]
console.log(x, y); // 4 { y: 5, z: 6 }
Он ведет себя аналогично Rest параметрам функций.Присвоение значений по умолчаниюВы можете указать значение по умолчанию для присваивания при деструктуризации как в объекта, так и в массивах. Например:
const { w = 7, x = 8, y, z } = { x: 4, y: 5, z: 6 };
const [ a = 9, b, c, d = 10 ] = [1, 2, 3];
console.log(w, x, y, z); // 7 4 5 6
console.log(a, b, c, d); // 1 2 3 10
Для отсутствующих значений в исходном массиве / объекте будут применяться значения по умолчанию. Он аналогиченпо параметрам функцииумолчанию.Вы можете комбинировать присвоение переменной по умолчанию с альтернативным синтаксисом выражения присваивания. Например:
const { w: WW = 10, x, y, z } = { x: 4, y: 5, z: 6 };
console.log(WW, x, y, z); // 10 4 5 6
Вложенная деструктуризацияЕсли значения, которые вы деструктурируете, имеют вложенные объекты или массивы, вы также можете деструктурировать и эти значения:
const array = [ 1, [2, 3, 4], 5 ];
const obj = {
x: {
y: {
z: 6
}
}
}
const [ a, [ b, c, d ], e ] = array;
const {
x: {
y: {
z: w
}
}
} = obj;
console.log(a, b, c, d, e); // 1 2 3 4 5
consoel.log(x); // {y: {z: 6}}
console.log(y) // {z: 6}
console.log(w); // 6
Деструктуризация параметровВсе вышеперечисленные правила применяются и при деструктурировании параметров функции, поскольку за кулисами аргументы присваиваются параметрам. Например:
function baz([x, y]) {
console.log(x, y);
}
baz([1, 2]); // 1 2
baz([1]); // 1 undefined
baz([, 2]); // undefined 2
Узнать подробнее о курсе "React.js Developer". Зарегистрироваться на открытый урок по теме "Пишем приложение на React+Redux" можно здесь.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Mahesh
===========Похожие новости:
- [Ненормальное программирование, Занимательные задачки, Программирование, Искусственный интеллект] Russian AI Cup 2020 — новая игра-стратегия для разработчиков
- [Программирование микроконтроллеров] Полноценный трехпортовый USB-Serial адаптер на STM32 Blue Pill (STM32F103C8T6)
- [JavaScript, Программирование] Функции в JavaScript: секреты, о которых вы не слышали (перевод)
- [Python, Программирование, Машинное обучение] Определяем пол и возраст по фото
- [Разработка веб-сайтов, PHP, Программирование, Проектирование и рефакторинг] Сейчас я буду убеждать вас использовать статический анализ в PHP
- [Разработка веб-сайтов, Программирование, Dart, Flutter] DartUP 2020: архитектура Dart VM, non-nullability в действии и Flutter для бизнеса
- [PHP, Программирование] Состоялся релиз языка программирования PHP 8.0
- [Управление персоналом] Эволюция сорсинга (перевод)
- [Программирование, Go] Шаблоны проектирования в Go — Абстрактная Фабрика (перевод)
- [Программирование, Разработка под Android, Kotlin] Koin — библиотека для внедрения зависимостей, написанная на чистом Kotlin (перевод)
Теги для поиска: #_programmirovanie (Программирование), #_frontend, #_react.js, #_destrukturirovanie (деструктурирование), #_blog_kompanii_otus._onlajnobrazovanie (
Блог компании OTUS. Онлайн-образование
), #_programmirovanie (
Программирование
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 17:09
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Для будущих студентов курса "React.js Developer" подготовили перевод полезной статьи.
Также приглашаем вас записаться на открытый урок по теме: "Пишем приложение на React+Redux". const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 }; const a = array[0], b = array[1], c = array[2]; const x = obj.x, y = obj.y, z = obj.z console.log(a, b, c); // 1 2 3 console.log(x, y, z); // 4 5 6 const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 }; const [ a, b, c ] = array; const { x, y, z } = obj; console.log(a, b, c); // 1 2 3 console.log(x, y, z); // 4 5 6 const obj = { x: 4, y: 5, z: 6 };
const { x: X, y: Y, z: Z } = obj; console.log(X, Y, Z); // 4, 5, 6 let a, b, c, x, y, z;
[a, b, c] = [1, 2, 3]; ({x, y, z} = { x: 4, y: 5, z: 6 }); console.log(a, b, c, x, y, z); // 1 2 3 4 5 6 // Присваивание объекта
const obj = {}; const computedProp = 'z'; [obj.a, obj.b, obj.c] = [1, 2, 3]; ({ x: obj.x, y: obj.y, [computedProp]: obj[computedProp] } = { x: 4, y: 5, z: 6 }); console.log(obj.a, obj.b, obj.c); // 1 2 3 console.log(obj.x, obj.y, obj.z); // 4 5 6 // Присваивание массива
let array = []; ({ x: array[0], y: array[1], z: array[2] } = { x: 4, y: 5, z: 6 }); console.log(array); // [4, 5, 6] let x = 10, y = 20;
[y, x] = [x, y]; console.log(x, y); // 20 10 const { a: X, a: Y } = { a: 1 };
console.log(X, Y); // 1 1 let a, b, c, x, y, z;
console.log({x, y, z } = { x: 4, y: 5, z: 6 }); // { x: 4, y: 5, z: 6 } console.log([a, b, c] = [1, 2, 3]); // [1, 2, 3] let a, b, c, x, y, z;
[a, b] = [c] = [1, 2, 3]; ( {x} = {y,z} = {x: 4, y: 5, z: 6} ); console.log(a, b, c); // 1 2 1 console.log(x, y, z); // 4 5 6 const [,,c] = [1, 2, 3];
const { y } = { x: 4, y: 5, z: 6 }; console.log(c, y); // 3 5 const [a, ...b] = [1, 2, 3];
const { x, ...y } = { x: 4, y: 5, z: 6 }; console.log(a, b); // 1 [2, 3] console.log(x, y); // 4 { y: 5, z: 6 } const { w = 7, x = 8, y, z } = { x: 4, y: 5, z: 6 };
const [ a = 9, b, c, d = 10 ] = [1, 2, 3]; console.log(w, x, y, z); // 7 4 5 6 console.log(a, b, c, d); // 1 2 3 10 const { w: WW = 10, x, y, z } = { x: 4, y: 5, z: 6 };
console.log(WW, x, y, z); // 10 4 5 6 const array = [ 1, [2, 3, 4], 5 ];
const obj = { x: { y: { z: 6 } } } const [ a, [ b, c, d ], e ] = array; const { x: { y: { z: w } } } = obj; console.log(a, b, c, d, e); // 1 2 3 4 5 consoel.log(x); // {y: {z: 6}} console.log(y) // {z: 6} console.log(w); // 6 function baz([x, y]) {
console.log(x, y); } baz([1, 2]); // 1 2 baz([1]); // 1 undefined baz([, 2]); // undefined 2 Узнать подробнее о курсе "React.js Developer". Зарегистрироваться на открытый урок по теме "Пишем приложение на React+Redux" можно здесь.
=========== Источник: habr.com =========== =========== Автор оригинала: Mahesh ===========Похожие новости:
Блог компании OTUS. Онлайн-образование ), #_programmirovanie ( Программирование ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 17:09
Часовой пояс: UTC + 5