Деструктуризация JavaScript и оператор распространения – объяснение на примере кода

1656021019 destrukturizacziya javascript i operator rasprostraneniya – obyasnenie na primere koda

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

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

Давайте окунуться.

Что такое деструктуризация массива JavaScript?

Скажем, у нас есть массив, содержащий пять чисел, например:

let array1 = [1, 2, 3, 4, 5]
Массив с пятью числами

Чтобы получить элементы из массива, мы можем сделать что-то вроде получения числа в соответствии с его индексами:

array1[0];
array1[1];
array1[2];
array1[3];
array1[4];
Получение элементов массива

Но этот метод стар и неуклюж, и есть лучший способ сделать это – с помощью деструктуризации массива. Это выглядит так:

let [ indexOne, indexTwo, indexThree, indexFour, indexFive ] = array1;
Использование деструктуризации массива

Оба вышеописанных метода дадут одинаковый результат:

Скриншот-2021-08-07-105209

Теперь у нас есть пять элементов в массиве и мы их печатаем. Но что если мы хотим пропустить один элемент между ними?

let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;

Здесь мы пропустили indexThirdи между indexTwo и indexFour есть пустое пространство.

let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;

console.log(indexOne);
console.log(indexTwo)
console.log(indexFour)
console.log(indexFive)
Пропуск третьего элемента
Скриншот-2021-08-07-105709

Вы можете видеть, что мы не получаем третий элемент, потому что мы установили его пустым.

Что такое деструктуризация объекта JavaScript?

Эта деструктуризация хорошо работает с объектами. Позвольте привести вам пример.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 200,
    height: '20 meters',
    weight: '70 KG'
}
Объект JavaScript

Скажем, мы хотим, чтобы имя, зарплата и вес этого объекта были распечатаны в консоли.

console.log(object.name)
console.log(object.salary)
console.log(object.weight)
Получение названия, зарплаты и веса от объекта

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

Но этот код иногда становится тяжело понять. Вот когда деструктуризация пригодится:

let { name, salary, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)
Деструктуризация объектов

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

Скриншот-2021-08-07-111356

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

let object = {
    name: "Nishant",
    age: 24, 
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Здесь мы имеем название и вес, присутствующие в объекте, но не зарплату:

Скриншот-2021-08-07-111659

Мы получим неопределенное значение заработной платы.

Чтобы устранить эту проблему, мы можем установить значение по умолчанию, когда деструктурируем объект.

let object = {
    name: "Nishant",
    age: 24, 
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary = 200, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)
Установка значения по умолчанию для зарплаты
Скриншот-2021-08-07-111907

Вы видите, что мы получаем 200 в качестве зарплаты. Это работает только тогда, когда у нас нет этого ключа в объекте, и мы хотим установить значение по умолчанию.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary = 200, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Разместите зарплату в объект, и вы получите 300 в качестве зарплаты.

Скриншот-2021-08-07-112128

Как использовать деструктуризацию объекта с функциями

Скажем, у нас есть функция, печатающая все данные в массиве на консоль.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData(){
    
}

printData(object)
Функция печати данных в консоли

Мы передаем объект как параметр в функции, когда она вызывается:

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData(object){
    console.log(object)
}

printData(object)

Обычно мы делаем нечто подобное – передаем объект и регистрируем его в консоли.

Скриншот-2021-08-07-115047

Но опять же мы можем сделать то же самое, используя деструктуризацию.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData({name, age, salary, height, weight}){
    console.log(name, age, salary, height, weight)
}

printData(object)
Использование деструктуризации в функциях

Здесь мы деструктурируем объект по имени, возрасту, зарплате, росту и весу в параметрах функции и печатаем все в одной строке.

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

Скриншот-2021-08-07-115329
Печать данных объекта с помощью деструктуризации

Давайте рассмотрим последний пример.

function sample(a, b) {
    return [a + b, a * b]
}

let example = sample(2, 5);
console.log(example)
Функция сложения и умножения двух чисел

Здесь у нас есть функция, принимающая два числа. Он возвращает массив, который добавляет их и умножает их и регистрирует их в консоли.

Скриншот-2021-08-07-120108

Вместо этого воспользуемся деструктуризацией.

Мы можем деструктурировать его на переменные сложения и умножения, как это:

let [addition, multiplication] = sample(2, 5);
console.log(addition)
console.log(multiplication)
Использование деструктуризации
Скриншот-2021-08-07-120325

И на выходе вы можете увидеть, что мы получаем дополнение и умножение обоих чисел.

Что такое оператор распространения в JavaScript?

Распространение означает распространение или расширение. А оператор распространения в JavaScript обозначается тремя точками.

Этот оператор распространения имеет много разных приложений. Давайте посмотрим на них один за другим.

Примеры оператора распространения

Скажем, у нас есть два массива и мы хотим их объединить.

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = array1.concat(array2);
console.log(array3)
Объединение двух массивов с помощью метода concat
Скриншот-2021-08-07-112601

Мы получаем комбинацию обоих массивов, это массив1 и массив2.

Но есть более простой способ сделать это:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = [...array1, ...array2]
console.log(array3)
Объединение двух массивов с помощью оператора Spread

В этом случае мы используем оператор распространения для объединения обоих массивов.

Скриншот-2021-08-07-113020

И вы видите, мы получим тот же результат.

Представим другой вариант использования, когда нам нужно вставить массив1 между элементами массив2.

Например, мы хотим вставить массив2 между вторым и третьим элементом массив1.

Итак, как нам это сделать? Мы можем сделать нечто подобное:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]

console.log(array2);
Вставка массива1 между 7 и 8 массива2
Скриншот-2021-08-07-113502

И вы видите, мы получаем array1 элементы между 7 и 8.

Теперь давайте объединим два объекта вместе с помощью оператора распространения.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}
Два объекта готовы к объединению

У нас здесь два объекта. Один содержит имя, возраст и зарплату. Второй содержит фамилию, рост и вес.

Давайте объединим их вместе.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

let object3 = {...object1, ...object2}
console.log(object3);
Объединение двух объектов в третий объект

Теперь мы объединили оба объекта с помощью оператора распространения, и мы зарегистрировали значение консоли.

Скриншот-2021-08-07-114101
Сочетание предыдущих объектов

Вы можете видеть, что мы получаем сочетание обоих объектов.

Наконец мы также можем скопировать один массив в другой с помощью оператора распространения. Позвольте мне показать вам, как это работает:

let array1 = [1, 2, 3, 4, 5]
let array2 = [...array1]
console.log(array2);
Копирование массива 1 в массив 2

Вот мы копируем массив1 в массив2 с помощью оператора распространения.

Скриншот-2021-08-07-120757

Мы ведем журнал массив2 в консоли, и мы получаем элементы массив1.

Вывод

Это все, уважаемые! В этой статье мы узнали о деструктуризации массивов и объектов и операторе распространения.

Вы также можете просмотреть мое видео на Youtube о деструктуризации массивов и объектов и оператора распространения, если хотите дополнить свое обучение.

Счастливого обучения.

Добавить комментарий

Ваш адрес email не будет опубликован.