Деструктивное присваивание объектов.
Все материалы по ES6
Лучше всего это рассмотреть на примере.
Представьте. что у нас есть некий объект и нам нужно получить доступ к его свойствам. В ES5 мы бы сделали просто - присвоили свойства объекта переменным вот таким образом:
var person = {
firstName : 'John',
lastName : 'Gray'
};
var firstName = person.firstName;
var lastName = person.lastName;
console.log( firstName, lastName );
В ES6 все это можно уместить в одну строку применив деструктивное присваивание объектов.
Для этого переменные мы объявим в фигурных скобках и в качестве значения присвоим объект.
Важно, чтобы названия переменных совпадали с названием свойств, в этом случае.
let person = {
firstName : 'John',
lastName : 'Gray'
};
let { firstName, lastName } = person;
console.log( firstName, lastName );
Если нам требуется использовать переменные с другим именем, то нам можно сделать вот так:
let person = {
firstName : 'John',
lastName : 'Gray'
};
let { firstName : first , lastName : last } = person;
console.log( first, last );
Мы просто указали новые названия переменных после двоеточия.
Возможно, было бы более понятным, если бы название переменной было слева, а значение свойств справа, но... Есть так, как есть.
Вместо переменной справа, мы можем всегда указать литерал объекта:
let { firstName : first , lastName : last } = { firstName : 'John',lastName : 'Gray'};
console.log( first, last );
В данном случае мы также в консоли получим John Gray.
Значения по умолчанию.
Значения по умолчанию можно указать, если у объекта нет таких свойств, или нет значения у такого свойства.
let { firstName : first , lastName : last, age = 35 } = { firstName : 'John',lastName : 'Gray'};
console.log( first, last, age );
Динамическое вычисление названий свойств.
Имена свойств можно определять динамически с помощью выражений в квадратных скобках.
let { ['first' + 'Name'] : first , lastName : last, age = 35 } = { firstName : 'John',lastName : 'Gray'};
console.log( first, last, age );
В консоли мы увидим тоже самое.
Извлечение значений свойств вложенных объектов.
Мы можем извлечь свойства объектов, являющихся свойствами других объектов.На примере. Создадим новый объект у которого свойство social будет являться объектом.
let user = {
firstName : 'John',
lastName : 'Gray',
social : {
facebook: 'GrayJohn-Facebook',
twitter: 'J-G-Twitter'
}
}
Таким образом, чтобы получить доступ к свойству фейсбук, нам необходимо -
let user = {
firstName : 'John',
lastName : 'Gray',
social : {
facebook: 'GrayJohn-Facebook',
twitter: 'J-G-Twitter'
}
}
let { firstName : first , lastName : last, social:{facebook}, age = 35 } = user;
console.log( first, last, facebook, age );
Таким образом с вложенными объектами, мы вначале указываем название основного свойства - social, а потом после двоеточия и в фигурных скобках - название вложенного свойства.
Если бы свойство facebook содержало бы в себе еще один объект, то мы сделали бы вот так:
let { firstName : first , lastName : last, social:{facebook : { имя_свойства } }, age = 35 } = user;
Если мы хотим изменить имя переменной
facebook, то мы можем указать новое имя свойства через двоеточие:
let { firstName : first , lastName : last, social:{ facebook : fb }, age = 35 } = user;
console.log( first, last, fb, age );
Результат в консоли не изменится.
Деструктивное присваивание объекта в качестве параметра функции.
Лучше всего рассмотреть на примере.Создадим функцию, которая будет принимать два параметра, один из которых -
config, будет объектом.
У этого объекта будет два свойства -
data и cach.
Если бы мы писали код на ES5, то поступили бы так:
function post ( url, config ) {
config.data;
config.cach;
};
В ES6 мы сделаем это иначе.
Вначале создадим переменную в которую поместим результат вызова функции
post с параметрами...
let user = {
firstName : 'John',
lastName : 'Gray',
social : {
facebook: 'GrayJohn-Facebook',
twitter: 'J-G-Twitter'
}
}
let result = post ( 'api/users', { data : user, cach : false });
И теперь используя деструктивное присваивание, мы можем вместо переменной (параметра функции) -
congig, сразу передать свойства data и cach в фигурных скобках:
let user = {
firstName : 'John',
lastName : 'Gray',
social : {
facebook: 'GrayJohn-Facebook',
twitter: 'J-G-Twitter'
}
}
let { firstName : first , lastName : last, social:{ facebook : fb }, age = 35 } = user;
console.log( first, last, fb, age );
function post ( url, { data, cach } ) {
console.log( data, cach );
};
let result = post ( 'api/users', { data : user, cach : false });
Если, вместо
data, мы хотим сразу получить доступ к свойства firstName и
lastName, то мы можем сделать таким образом:
function post ( url, { data : { firstName, lastName }, cach } ) {
console.log( firstName, lastName, cach );
};
let result = post ( 'api/users', { data : user, cach : false });
обратите внимание на то, что в параметре присутствует свойство
data, но мы его используем только для того, чтобы добраться до свойств firstName и lastName.
Если попробовать вывести в консоли свойство
data, то получим ошибку - Uncaught ReferenceError: data is not defined.
Деструктивное присваивание для возврата значений.
Для примера создадим функцию, которая будет возвращать литерал объекта.
function getUserInfo () {
return {
firstName : 'John',
lastName : 'Gray',
social : {
facebook: 'GrayJohn-Facebook',
twitter: 'J-G-Twitter'
}
};
};
let { firstName, lastName, social:{ twitter}} = getUserInfo();
console.log(firstName, lastName, twitter);
Здесь все очень похоже на то, что было выше. Ничего сложного, если понимать, то как происходит деструктивное присваивание.
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.
Удачного кодирования!
Комментариев нет:
Отправить комментарий