Привет, ребята, поэтому я продолжаю изучать особенности ES6 и просто самые важные вещи, которые нужно знать в JavaScript, такие как IIFE, «строгий», закрытие, подъем и т. Д., И я продолжаю избегать определенных тем, поскольку это выглядит устрашающе. и сбивает с толку, например:
как вы можете видеть, мы передаем один и тот же аргумент объекта (покемона) двум разным функциям и получаем совершенно разные результаты.
Итак, приступим. «Деструктуризация - это выражение JavaScript, которое позволяет распаковывать значения из массивов или свойства из объектов в отдельные переменные» -MDN, поэтому давайте начнем с нескольких базовых примеров.
Я также делаю видео на YouTube (не очень хорошие), проверьте это, если вы просто предпочитаете формат видео: D. Однако я постараюсь подробно описать все здесь, чтобы не было необходимости просматривать это. "ВИДЕО"
Впереди много кода!
1. Базовая деструктуризация массива
Итак, мы начнем с деструктуризации массива, поэтому допустим, нам нужно преобразовать значения массива в отдельные переменные. Самый простой способ сделать это - написать
variable = Array[index]
но когда у нас есть несколько назначений, это может сделать код немного более подробным.
Итак, чтобы разрушить массив, мы сначала объявляем переменные в нашем случае `pikachu, pidgey, charizard`, затем мы просто записываем эти переменные в квадратных скобках и присваиваем им весь массив так:
[pikachu, pidgey, charizard] = pokemonTypes;
как вы заметите, у нас есть 4 члена массива, но только 3 переменные, означает ли это, что charizard получает последние два значения? огонь и трава. (будучи фанатом покемонов, это было бы немного больно, особенно если бы он левитировал или что-то в этом роде), но это не так, charizard получает только члена-корреспондента, который стреляет. Итак, чтобы получить «остаток» членов, в деструктурирующем назначении есть что-то, называемое «элементом отдыха», оно выглядит следующим образом:
[pikachu, pidgey, …hackedCharizard] = pokemonTypes;
Итак, hackedCharizard становится остальным элементом, что означает, что он получает остальные элементы после второго члена массива, давая ему значения fire и grass. остальной элемент должен быть последним элементом, в противном случае вы получите ошибку.
Теперь предположим, что мы хотим пропустить один из членов массива, мы можем сделать это, просто пропустив переменную на его месте, как показано ниже.
[pikachu, , …hackedCharizard] = pokemonTypes;
Итак, мы пропустили pidgey, если мы проверим значение pidgey, это даст нам undefined. мы также можем дать нашим переменным значения по умолчанию, если у массива нет соответствующего ему члена.
let pokemonTypes = [‘electric’, ‘flying’, ‘fire’]; [pikachu, pidgey , charizard, venusaur = ‘NONE’] = pokemonTypes; // [‘electric’,’flying’,’fire’,’NONE’] pokemonTypes = [‘electric’, ‘flying’, ‘fire’,’grass’]; [pikachu, pidgey , charizard, venusaur = ‘NONE’] = pokemonTypes; // ['electric','flying','fire','grass']
Но когда у нас есть член массива для присвоения ему значения, он переопределяет наше значение по умолчанию.
Я думаю, что это все, что нужно для деструктуризации массива, если я что-то пропустил, дайте мне знать, я с радостью обновлю.
2. Замена двух переменных с помощью деструктуризации.
Таким образом, еще одно интересное использование деструктуризации - это перестановка значений переменных, мы просто записываем переменные в квадратных скобках на LHS и записываем переменные, которые нам нужны, в том порядке, в котором вы нуждаетесь, в RHS.
Это также можно сделать с 3-мя переменными или любым числом.
3. Базовое разрушение объекта.
При деструктуризации объекта мы записываем переменные в фигурных скобках вместо квадратных скобок, также обратите внимание, как мы можем записывать переменные в любом порядке, потому что имя переменной точно такое же, как и свойство объекта. Обратитесь к следующему разделу, чтобы узнать о расширенном использовании.
4. Именование переменных и разрушение вложенных объектов.
В этом разделе мы в основном попытаемся переименовать переменную, а также выполнить вложенную деструктуризацию. Для этого мы должны написать имя переменной, а затем пользовательскую переменную, как это.
let { name: MXIV } = pokemon;
console.log(`Name :: ${MXIV}`); // pikachu
когда вы переименовываете переменную, мы больше не можем использовать исходную переменную, в нашем случае мы больше не можем использовать «имя», а только «MXIV».
Затем давайте попробуем деструктурировать вложенные свойства, для этого мы должны написать свойство, затем colin, затем фигурные скобки, а затем имя вложенного свойства, чтобы дать ему имя настраиваемой переменной, мы просто записываем имя свойства, затем colin и, наконец, имя настраиваемой переменной, вот так:
let { ability: {
primary: primaryAbility,
hidden: hiddenAbility
}
} = pokemon;
console.log(`ability :: ${primaryAbility}`); // Static
console.log(`ability :: ${hiddenAbility}`); // Lightning Rod
5. Разница между деструктуризацией массива и объекта.
В случае деструктуризации массива мы можем объявить наши переменные, не назначая их немедленно, но когда вы попытаетесь сделать то же самое для объектов, вы не сможете сделать то же самое.
let obj = { prop1: ‘mxiv’, prop2: ‘UAE’ };
let name, location;
// { prop1: name, prop2: location } = obj //gives error
// you need place the assignment in round brackets
({ prop1: name, prop2: location } = obj);
6. Фильтрация аргументов функций с помощью деструктуризации.
Это говорит само за себя, идея состоит в том, что иногда у вас просто нет всех параметров функции, и вместо того, чтобы делать вызов, передавая пустые параметры или null, лучше использовать деструктуризацию и присвоить значение по умолчанию прямо в определении аргумента. .
7. Фильтрация ответа на вызов API с помощью деструктурирования.
И снова одно из лучших применений деструктуризации. Я не хотел выполнять вызов API, но в приведенном выше примере функция getAbilities () возвращает объект со скрытой и основной способностью. Вы можете напрямую фильтровать их вместо того, чтобы писать `response.property или response.property.nestedProperty`
8. Итерация «for of» с использованием деструктуризации.
Итак, главное, что нужно знать, - это разница между «for of» и «for in». Когда мы используем «for of», мы получаем значение элемента массива, а не индекс.
let arr = [10,20,304,50];
for( let i in arr) { console.log(i); } // 0 1 2 3
for( let i of arr) { console.log(i); } // 10 20 304 50
Итак, в нашем случае вместо «i» у нас есть назначение деструктуризации.
