01.03.2023 в 18:37

Деструктуризация в Javascript

Деструктуризация — одна из самых крутых функций, представленных в ES6. Функция деструктурирования позволяет нам разбить объект или массив на его значения. Затем мы можем получить доступ к значениям, просто используя отдельные переменные. Таким образом становится легко получить доступ к элементам массива и объекта.

const arr=[5,8,10,67,34];

const [first,second]=arr

const obj={

name: "Titli",

id:1

}

const {name,id}=obj;

Деструктуризация объекта

Мы используем ключи в качестве имени переменных для деструктурирования объектов. Имена переменных должны совпадать с ключами объекта, иначе будет возвращено значение undefined. В отличие от деструктуризации массива, объекты идентифицируют значения по своим свойствам (ключам), а не по индексу.

const obj={
    id:1,
    name:"Shanaya",
    email:"shanaya23@gmail.com",
}

const {id,name,email}=obj;
console.log(id,name); // 1 Shanaya

Мы также можем деструктурировать объекты, когда они вложены.

const obj={
    id:1,
    name:"Shanaya",
    email:"shanaya23@gmail.com",
    mentee:{
        id:3,
        name:"Subhojit",
        email:"subh89@gmail.com"
    }
}

const {mentee:{name:menteeName}}=obj;
console.log(menteeName); // Subhojit

В приведенном выше примере мы видим, как мы можем получить доступ к значению из вложенного объекта посредством деструктурирования. Мы получаем доступ к значению имени подопечного, которое является объектом, вложенным в объект obj.

Мы также видим, как мы можем присвоить новое имя переменной значению и получить доступ к значению, используя это имя. Вместо использования ключа имени мы присваиваем значение имени внутри подопечного новой переменной с именем «menteeName», а затем получаем доступ к значению, используя «menteeName».

Деструктуризация массива

При деструктурировании массива мы разделяем значения, используя их индекс. Например,

const arr=[1,8,3,6,9];

const [first, second]=arr;

console.log(first,second);// 1 8

В приведенном выше фрагменте кода мы видим, как первая переменная указывает на первый элемент в массиве (arr[0]), а вторая переменная - на второй элемент в массиве (arr[1]). Деструктурированные переменные указывают на значения в тех позициях, в которых они размещены.

const arr=[1,8,3,6,9];

const [third,second,first,fourth,eighth]=arr;

console.log(first,second,third,eighth); // 3 8 1 9

Как мы видим в приведенном выше примере, мы присвоили переменным случайные имена для доступа к элементам массива. Переменные указывают на значения в соответствии с их индексом. Например, first указывает на arr[2], поскольку переменная с именем first находится под индексом 2. Аналогично, third указывает на arr[0], поскольку она расположена под индексом 0.

Теперь следующий важный вопрос: что, если мы хотим получить доступ к значению в массиве, пропустив начальные значения? Мы тоже можем это сделать.

const arr=[1,8,3,6,9];

const [,,third,,fifth]=arr;

console.log(third,fifth); // 3 9

Из приведенного выше примера мы видим, как мы можем получить доступ к значениям определенного индекса посредством деструктурирования.

Есть другой способ сделать это.

const arr=[1,8,3,6,9];

const {2:third,4:nine}=arr;

console.log(third,nine); // 3 9

Как мы знаем, массивы в javascript - это специальные объекты. Значения индексов в массивах действуют как ключи или свойства. Мы используем эти знания для более четкой структуры массивов. Мы присваиваем новое имя переменной элементам массива с указанным индексом и получаем доступ к значениям, используя эти имена переменных.

Что касается вложенной деструктуризации массивов, то это довольно просто. Давайте посмотрим на пример.

onst arr=[1,8,[3,6,8,16],9];

const {2:[first,second]}=arr;

console.log(first,second); // 3 6

Как мы видим, мы можем деструктурировать вложенный массив аналогичным образом. Теперь, когда мы рассмотрели почти все возможные способы деструктурирования, мы хотели бы закончить этот блог примером, в котором собраны все случаи.

const book = { 
        title: 'A Definitive Guide to Javascript',  
        authors: [{name: 'D. Flanagan', age: 49 }, { name: 'Y. Matsumoto', age: 57 }],  
        publisher: {name: 'O\'Reilly Media', location: 'LA'}
};


const {title,authors:[{name:author1},{name:author2}],publisher:{name:publisherName}}=book;


console.log(title); // A Definitive Guide to Javascript
console.log(author1); // D. Flanagan 
console.log(author2); // Y. Matsumoto
console.log(publisherName); // O'Reilly Media

Предлагаем вам ознакомится с дополнительной информацией о деструктуризации массивов и объектов.

#JavaScript #NodeJS

230

Войти на сайт

Деструктуризация в Javascript

Деструктуризация объекта

Деструктуризация массива