Добро пожаловать в шестую статью моих заметок по JavaScript.

В этой статье мы поговорим о: деструктурировании объекта массива, параметрах функции деструктурирования, операторе спреда

Все содержание взято из замечательного курса Йонаса Шмедтманна Полный курс JavaScript 2022: от нуля до эксперта!

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

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

Классный метод, он у нас тоже был на питоне. Помните, что нам все еще нужно использовать const для объявления переменных.

Что произойдет, если мы не возьмем все значения массива?

Он просто берет столько, сколько вы даете с самого начала.

Как взять 1-й и 3-й тогда?

const [first, , third] = restaurant.categories;

Просто поставив запятую.

Как переключать значения элементов?

Мы можем сделать это с помощью старой доброй переменной temp или есть более крутой способ сделать это.

const [first, second] = restaurant.categories;
[first, second] = [second, first]

Круто, да?

Разрушение вложенных массивов

const nested = [5, 6, [7,8]]
const [i, , [k, l]] = nested;
cl(k , l); // 7, 8

Что произойдет, если мы запросим больше переменных, чем есть в массиве

const [p, q, r] = [8, 9];
// 8, 9, undefined

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

const [p = 1, q = 1, r = 1] = [8, 9];
// 8, 9, 1

Мужчина! деструктуризация потрясающая, эта функция особенно полезна, когда она используется с веб-API.

Разрушение объектов

У нас есть такой объект ресторана:

Деструктуризация объектов немного отличается от массивов,

  • Мы должны использовать имя свойств
  • Мы должны использовать фигурные скобки
const {name, openingHours, categories} = restaurant;

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

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

Мы можем даже переименовать их

const {name: restaurantName, openingHours: hours, categories: cats} = restaurant;
cl(restaurantName, hours, cats);

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

// menu property does not exist
const {menu = [], starterMenu: starters = [‘soup’]} = restaurants;

В этом примере мы дали значение по умолчанию и переименовали его. Создатели Js действительно думали о многом.

Мутирующие переменные

let a = 111;
let b = 999;
const obj = {a: 1, b: 2, c: 3};
let {a, b} = obj; //ERROR we redefined the variables
{a, b} = obj; //ERROR when curly braces are in the left side js thinks it is a code block and gives
//Uncaught syntax error: Unexpected token ‘=’
// The correct way
({a, b} = obj);

Разрушение объектов внутри объектов

const {openingHours: {fri: {open, close}}} = restaurant;
cl(openingHours, fri, open, close)

Мы можем идти все глубже и глубже, как это

Мы даже можем давать другим именам элементы для exp (open: o, close: c)

Деструктурировать объекты в параметрах функции

const obj = {
time: 14:00;
name: ‘Baris’;
}
const destructure = ({time, name}) => {
cl(time);
cl(name);
}

или со значениями по умолчанию

const destructure = ({time: ‘14:00’, name: ‘Baris’}) => {
cl(time);
cl(name);
}

Теперь, даже если мы используем функцию без нескольких определенных параметров, функция все равно будет работать.

Оператор спреда

const arr = [1, 2];
const newArr = [3, 4, …arr];
cl(arr) // [1, 2]
cl(newArr) // [3, 4, 1, 2]

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

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

Создание поверхностной копии

const copy = […original];

Объединение 2 массивов

const joined = […arr1, …arr2];

Мы можем использовать оператор распространения с итерируемыми структурами данных. Давайте проверим, какие они:

  • массивы
  • струны
  • карты
  • наборы

Важное примечание. Объекты не являются повторяемыми.

const name = ‘Baris’;
const letters = […name, ‘ ‘, ‘B’, ‘.’];
cl(letters) //it is like cl(‘B’, ‘a’ …)
// B a r i s B .

если мы напишем

const name = `${…letters} alli`;

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

Вы можете передавать значения в функцию с помощью оператора распространения

functionCall(…parameters);

Копирование объекта с оператором распространения

const newObj = {
foundedIn: 1998,
…restaurant,
founder: ‘Guiseppe’,
}

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

Посмотрите первую статью в этой ветке js notes!

См. предыдущую статью этой ветки js notes!

См. следующую статью в этой ветке js notes!

Подпишитесь на меня в Twitter 💣🔥

Почитайте обо мне и многих других замечательных технических блоггерах в разделе Dev Genius»