предисловие
первоначальное намерение: В настоящее время читаю"Глубокое понимание Es6"Эта книга, я не полностью изучил грамматику Es6 раньше, я также использую занятую стадию, чтобы повторно изучить ее и организовать свои заметки, чтобы поделиться со всеми.Если вам это не нравится, не распыляйтесь.
подходит для толпы: Первичная разработка интерфейса, большие обходы.
Структура контента: Базовый синтаксис -> плюсы и минусы синтаксиса -> сценарии применения
Зачем использовать деструктурирование
В Es5 мы обычно делаем это, когда хотим получить определенные данные от объекта или массива объектов. Взгляните на пример ниже
let person = {
name: "蛙人",
age: 24
}
let name = person.name
let age = person.age
В приведенном выше примере вы можете видеть, что мы начинаем сpersonполученный от объектаnameа такжеageсвойство и присваивается вновь объявленной переменнойnameа такжеage, Не проблема объявить две переменные таким образом, если в будущем их будет больше.
Поэтому в Es6 предусмотрены функции деструктуризации объектов и массивов, и процесс разбиения структур данных упрощается, а требуемую информацию можно получить из более мелких частей после разбиения. Давайте взглянем
деструктуризация объекта
let person = {
name: "蛙人",
age: 24
}
let { name, age } = person
console.log(name) // 蛙人
console.log(age) // 24
В приведенном выше примереperson.nameЗначение присваиваетсяnameПеременная,person.ageЗначение присваиваетсяageПеременная. Просто здесь используется сокращенный синтаксис для объектов.Если вы не понимаете новые возможности объектов, пожалуйста, посмотрите мою последнюю статью.«Какие функции расширяет объект Es6? 》
Не забудьте инициализировать значение
При использованииvar,let,constИспользуется для объявления деструктуризации, необходимо инициализировать значение переменной справа. Давайте посмотрим на пример
var { name, age }; // 语法抛出错误
let { name, age }; // 语法抛出错误
const { name, age }; // 语法抛出错误
В приведенном выше примере мы видим, что есть объявления для деструктуризации присваиваний и без инициализации значения, тогда будет выдана ошибка. Если не используется для деструктуризации,varа такжеletОбъявленная переменная может быть инициализирована без начального значения, ноconstОбъявленная переменная должна быть инициализирована, иначе выдается ошибка. Если вы не понимаетеvar,let,constразница, см. меня«Разница между var, let и const, которую вы можете понять с первого взгляда»
Примечание. Если значение в правой части назначения деструктурирования равно
nullorundefinedвыдает ошибку, помните.
присваивание деструктуризации
В приведенном выше примере мы закончили деструктурирование, так что же такое присваивание деструктурирования? То есть мы также используем синтаксис деструктурирования при присвоении значений переменным. см. пример ниже
let name = "小王"
let age = 18
let person = {
name: "蛙人",
age: 24
};
// 使用解构赋值为变量赋值
({ name, age } = person);
console.log(name) // 蛙人
console.log(age) // 24
В приведенном выше примере мы сначала определяемnameа такжеageпеременной и инициализируйте значение, а затем передайте метод присваивания деструктуризации вnameа такжеageпеременная отpersonОбъект считывается и переназначается.注意，一定要用一对小括号包裹解构赋值语句,JavaScriptДвижок будет рассматривать фигурные скобки как блок кода, а грамматика предусматривает, что блок кода не может появляться в левой части оператора присваивания.После заключения в круглые скобки блок кода может быть преобразован в выражение, которое может реализовать деструктурирование назначение.
Затем мы используем деструктурирующие выражения присваивания для параметров функции.
let name = "小王"
let age = 18
let person = {
name: "蛙人",
age: 24
};
function getObj(data) {
console.log(data == person) // true 这里的data就是person，表达式的值就是 =右侧的的值
}
getObj({ name, age } = person)
console.log(name) // 蛙人
console.log(age) // 24
В приведенном выше примере вызовgetObjВ функцию передается деструктурирующее выражение присваивания, потому чтоJavaScriptЗначением выражения является значение справа, поэтому объект параметра в функцииpersonобъект, а также будетnameа такжеageПереназначение переменной.
При использовании деструктурирующего присваивания, если указанное имя переменной не существует в объекте, то переменнаяundefinedиз. Взгляните на пример ниже
let person = {
name: "蛙人",
age: 24
}
let { name, age, sex} = person;
console.log(name, age, sex) // 蛙人 24 undefined
В приведенном выше примере выражение присваивания деструктурирования имеетsexпеременная, но очевидно, что она не существует в объектеsexсвойства, то этоsexпеременная будет присвоенаundefined.
Когда указанное свойство не существует, мы можем установить значение по умолчанию, такое же, как значение по умолчанию параметра функции. Взгляните на пример ниже
let person = {
name: "蛙人",
age: 24
}
let { name, age, sex = "male" } = person;
console.log(name, age, sex) // 蛙人 24 male
В приведенном выше примере, даваяsexУстановите значение по умолчанию, только когдаpersonКогда у объекта нет такого свойства или когда свойство не определено, в силу вступает значение по умолчанию, которое совпадает со значением по умолчанию функции.Если вы не понимаете, вы можете прочитать мою статью.«Вы действительно понимаете функциональные особенности в ES6? 》.
Деструктуризация псевдонимов присваивания
В приведенном выше коде наши выражения деструктуризации такие же, как переменная и такое же имя атрибута, поэтому иногда мы не хотим деконструировать то же имя атрибута, что нам делать?Выражение деструктуризации соглашается поддерживать псевдонимы. Взгляните на пример ниже
let person = {
name: "蛙人",
age: 24
}
let { name: userName, age: userAge } = person
console.log(userName) // 蛙人
console.log(userAge) // 24
В приведенном выше примере приведенное выше выражение деструктурирования будетnameсвойства хранятся вuserName,Будуageсвойства хранятся вuserAge, то вы не можете получить доступnameа такжеage, потому что они больше не являются переменными.
Псевдоним назначения деструктурирования также поддерживает параметры по умолчанию.
let person = {
name: "蛙人",
age: undefined
}
let { name: userName, age: userAge = 24 } = person
console.log(userName) // 蛙人
console.log(userAge) // 24
Я не буду говорить больше здесь, это то же самое, что и параметры по умолчанию, упомянутые выше.
Многоуровневая вложенная деструктуризация объекта
Присваивание деструктурирования также поддерживает несколько уровней вложенности, а синтаксис такой же, как у литералов объектов, упомянутых выше, которые можно разделить и разрушить более подробно. Взгляните на пример ниже
let person = {
name: "蛙人",
age: 24,
hobby: {
name: "写代码"
}
}
let { hobby: { name: code = "code" } } = person
console.log(code) // 写代码
В приведенном выше примере вы можете видеть, что приведенный выше синтаксис многоуровневой деструктуризации аналогичен обычному деструктурированию, за исключением того, что он вложен на один уровень.{}Просто фигурные скобки. Мы разобрали вышеhobbyсвойства, а затем продолжить деконструкцию в глубинуnameсвойство и присваиваем ему значение по умолчанию, а затем присваиваем ему псевдоним переменнойcode.
Демонтаж минных заграждений объектов требует внимания
Будьте осторожны при использовании многоуровневой вложенной деструктуризации, вы, скорее всего, случайно создадите недопустимое выражение, то есть уничтожите пустые фигурные скобки, но этот синтаксис также допустим, и он ничего не сделает и не выдаст ошибку. Давайте взглянем.
let person = {
name: "蛙人",
age: 24,
hobby: {
name: "写代码"
}
}
let { hobby: {} } = person
В приведенном выше заявлении вы можете увидеть глубокую деструктуризациюhobbyСправа от собственности находится{}скобки, но без объявления каких-либо переменных, это утверждение также разумно и не вызовет ошибки. Официальный ответ: этот синтаксис может быть объявлен устаревшим в будущем, нам просто нужно знать, что нельзя писать так.
деструктуризация массива
Синтаксис деструктурирования массива подобен синтаксису деструктурирования объекта, за исключением того, что деструктурирование массива использует[]Литеральная деструктуризация синтаксиса, см. пример ниже.
let colors = ["red", "blue", "green"]
let [ red, blue ] = colors
console.log(red, blue) // red blue
Самая большая разница между деструктуризацией массива и деструктуризацией объекта заключается в том, что деструктуризация объекта неупорядочена, а деструктуризация массива упорядочена., давайте рассмотрим пример.
let colors = ["red", "blue", "green"];
let [ blue ] = colors
console.log(blue) // red
let ObjColors = {
red: "red",
blue: "blue",
green: "green"
}
let { blue } = objColors
console.log(blue) // blue
В приведенном выше примере мы видим, что массив уничтожен.blueпеременнаяredзначение, поэтому деструктурирование массива основано на позиции, одна позиция соответствует одному значению, и мы не можем получить значение непосредственно в объекте, как литерал объекта, нет необходимости следовать порядку. Деструктуризация массива требует последовательной деструктуризации.
Если мы хотим получить только второе значение массива, мы можем игнорировать переменную первого значения и просто написать заполнитель. Взгляните на пример ниже
let colors = ["red", "blue", "green"]
let [ , blue ] = colors
console.log(blue) // blue
В приведенном выше примере получается только второе значение, поэтому первое значение массива уничтожается, не объявляется только заполнитель, а затем записьblueпеременная, поэтому вы можете получить только второе значение.
Деструктуризация массива аналогична деструктуризации объекта.Деструктуризация массива, объявленная с помощью var, let и const, должна инициализировать значение, иначе будет выдана ошибка. Я уже говорил, что когда я разбирал противоположную сторону, помните.
Значение деструктуризации массива по умолчанию
Значения по умолчанию для деструктуризации массива такие же, как и значения по умолчанию для деструктурирования объекта, если в массиве нет такого значения или установлено значениеundefinedТогда вступит в силу значение по умолчанию.
let person = ["蛙人", 24]
let [ name, age, sex = "male" ] = person
console.log(name, age, sex) // 蛙人 24 male
Многоуровневая вложенная деструктуризация массива
Многоуровневое вложенное разрешение массива аналогично многоуровневому вложенному разрешению объекта, то есть синтаксис другой, используется массив[]Разбирать по порядку. Давайте посмотрим на пример
let person = ["蛙人", 24, ["写代码", "撩妹", "羽毛球"]]
let [ name, age, [firstHobby] ] = person
console.log(name, age, firstHobby) // 蛙人 24 写代码
В приведенном выше примере вы можете видеть, что при деконструкции нескольких слоев используйте[]Квадратные скобки идут все глубже и глубже и извлекают нужные нам данные слой за слоем.
Синтаксис деструктуризации массива и деструктуризации объекта аналогичен, просто нужно обратить внимание на использование деструктуризации массива.[], деструктуризация объектов использует{}, и их минные поля одинаковы.Если я использую деструктурирование, я должен инициализировать значение справа, иначе будет сообщено об ошибке.
Гибридная деконструкция
Вышеупомянутое завершено, деструктуризация одного объекта, упомянутая выше, теперь мы можем выполнить некоторую смешанную деструктуризацию, которая требует как деструктуризации данных, так и деструктуризации объекта. см. пример ниже
let person = {
name: "蛙人",
age: 24,
sex: "male",
hobby: ["写代码", "撩妹", "羽毛球"]
}
let { name, sex, hobby: [, , lastHobby] } = person
console.log(name, sex, lastHobby) // 蛙人 male 羽毛球
В приведенном выше примереpersonэто объект, в котором определяется личная информация. Затем при деконструкции ниже используются деструктуризация объекта и деструктуризация массива, и тогда мы знаем, что деструктуризация массива может быть деструктурирована только в соответствии с позицией, поэтому используйте заполнитель массива, чтобы получить значение последнего массива.
Итак, какая польза от стольких вышеперечисленных грамматик? В каком сценарии он используется? Давайте рассмотрим эти сценарии применения грамматики.
Сценарии применения
деструктуризация объекта
Обычно в Es5, например, если мы хотим сделать функцию отображения личной информации, мы сначала пишем функцию, а затем передаем объект, в этой функции нам нужно объявить и присвоить кучу переменных, и эти значения идут из переданного объекта. Взгляните на пример ниже
function informationFn(data) {
let name = data.name;
let age = data.age;
let sex = data.sex;
let email = data.email;
let phone = typeof data.phone != "undefined" ? data.phone : "暂无";
}
let person = {
name: "蛙人",
age: 24,
sex: "男",
email: "xxxxxx@163.com",
phone: undefined
}
informationFn(person)
В приведенном выше примере вы можете видеть, что, хотя с кодом проблем нет, его слишком много, что приводит к избыточному коду.Теперь мы используем синтаксис Es6 для реализации вышеуказанных функций.
function informationFn({ name, age, sex, email, phone = "暂无" }) {
console.log(name, age, sex, email, phone)
}
let person = {
name: "蛙人",
age: 24,
sex: "男",
email: "xxxxxx@163.com",
phone: undefined
}
informationFn(person)
В приведенном выше примере мы использовали деструктуризацию объекта синтаксиса Es6 и деструктурирование значений по умолчанию, чтобы реализовать его снова.Вы можете видеть, что код очень лаконичен.
Деструктуризация массива и присваивание
В Es5, если мы хотим реализовать обмен значениями между двумя переменными, мы должны полагаться на первую переменную для достижения этого.
let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
console.log(a, b) // 2 1
Однако в Es6 есть присваивание деструктуризации массива, которое совершенно не нужно, посмотрим, как это реализовать.
let a = 1;
let b = 2;
[ a, b ] = [b, a]
console.log(a, b)
В приведенном выше примере выражение на правой стороне задания деструктации является временной массивом. Он сначала рассчитает правый боковой массив и, наконец, назначает правый боковой массив в предыдущую переменную массива.
благодарный
Спасибо, что открыли эту статью в своем плотном графике. Я надеюсь, что она может быть вам полезна. Если у вас есть какие-либо вопросы, вы можете поправить меня.
Если вы считаете, что это хорошо, то ставьте лайк.
Если вам интересно, вы также можете добавить мой личный vx для связисвяжитесь со мной