Понимание назначения деструктуризации JavaScript

Объекты и массивы JavaScript

Понимание назначения деструктуризации JavaScript

Массив JavaScript ES6 и деструктуризация объектов

Введение

Синтаксис объекта деструктурирование присваивания, который был добавлен в ES6, представляет собой полезное сокращение JavaScript, которое чаще всего используется в ReactJs, VueJs и Angular, что позволяет нам легко извлекать несколько данных из массивов. », объекты и карты и присвойте эти данные любым переменным. Это также позволяет нам указать значение по умолчанию, когда данные отсутствуют.

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

Извлечение значений из объекта традиционным способом

Предположим, у нас есть объект страны:

let country = {
    name:'Morocco',
    population: 37820938
}

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

let name = country.name;
let population = country.population;

Фрагмент выше не является СУХИМ, потому что он содержит много повторяющегося кода.
Представьте, что если мы хотим извлечь 4 свойства объекта, нам нужно написать 4 строки кода.

Извлечение значений из объекта посредством деструктурирования

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

let { name , population } = country;
console.log(name,population);   // Morocco 37820938

Обратите внимание, как мы извлекли множество свойств всего одной строкой.

Извлечение значений из вложенного объекта посредством деструктурирования

Вложенный объект — это когда ключ ссылается на другой объект, например, на свойство адреса ниже.

let person = {
    name: 'Youssef',
    age: 22,
    address: {
        city:'Safi',
        country:'Morocco'
    }
}

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

let {name, address: {city} } = person;
console.log(name, city);     // Youssef Safi

Как мы видим, деструктуризация — это более простой и чистый способ ссылки на значения объектов.

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

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

Методы копирования объектов в JavaScript
Поверхностное копирование, глубокое копирование и структурированное клонированиеmedium.com

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

Извлечение значений из массива традиционным способом

Предположим, у нас есть массив стран

let countries = ['Morocco', 'Usa', 'Japan'];

Традиционно мы извлекаем элементы массива с помощью индекса.

let first  = countries[0];  // Morocco
let second = countries[1];  // Usa
let third  = countries[2];  // Japan

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

Простая деструктуризация массива

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

let [first, second, third] = countries;
console.log(first, second, third);    // Morocc Usa Japan

Элизион

При деструктурировании Elision позволяет пропускать элементы, используя синтаксис Array дырок:

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

// get first element
let [firstElement] = countries;
// get second element
let [ , secondElement] = countries;
// get third element
let [ , , thirdElement] = countries;

В последнем примере мы использовали запятые для пропуска переменных при деструктуризации.

Получить значения из вложенного массива посредством деструктурирования

Вложенный массив — это массив, содержащий один или несколько внутренних массивов.
пример:

let nestedArray = [['Jack', 'Germany'], 'Japan'];

Чтобы выполнить вложенное назначение деструктурирования, вы должны заключить переменные в структуру массива (включив внутрь [] ).

let [ [name], country] = nestedArray;
console.log(name, country); // Jack Japan

Это то же самое, что деструктурирование объекта, которое мы видели выше.

Деструктуризация псевдонимов

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

let name = 'Jack';
let person = {
    name: 'Mark',
    age: 38,
}
let { name, age } = person; // SyntaxError: Identifier 'name' has already been declared

Создайте новую переменную, используя оператор псевдонима (:)

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

let { name: personName, age } = person;
console.log(personName, age); // Mark 38

По сути, мы извлекаем свойство name из объекта person как переменную personName, а не как переменную name.

Присвоить значение переменной

Что, если у нас уже есть переменная в нашем коде, и мы хотим изменить значение этой переменной с помощью деструктуризации, использование let или const приведет к ошибке, и мы не хотим использовать псевдоним

let name = 'Jack';
let person = {
    name: 'Mark',
    age: 38,
};

Допустим, мы хотим изменить значение переменной name на свойство name объекта person.

({ name } = person);
console.log(name); // Mark

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

Добавьте новое свойство к объекту с помощью оператора псевдонима (:)

let person1 = {};
let person2 = {
    name: 'Mark',
    age: 38,
};

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

({ name: person1.name } = person2 );
console.log(person1.name); // Mark

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

Добавить новый элемент в массив с помощью оператора псевдонима (:)

let person = {
    name: 'Mark',
    age: 38,
};
let Names=[];

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

({ name: Names[0] } = person);
console.log(Names[0]); // Mark

Остальное свойство ( `... )`

Свойство rest позволяет извлекать оставшиеся элементы объекта или массива. Всегда рассмотрите возможность использования оператора rest в качестве последнего элемента.

Использование rest с объектами

let person = {
    name: 'Mark',
    age: 38,
    gender: 'male',
};
let {gender, ...newOjbect} = person;
console.log(newOjbect);    // { name: 'Mark', age: 38 }

Использование rest с массивами

let countries = ['USA', 'Morocco', 'Japan', 'Germany'];
let [first, second, ...theRest] = countries;
console.log(theRest);          // [ 'Japan', 'Netherlands' ]

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

Значение по умолчанию

Каждое деструктурированное свойство может иметь значение по умолчанию. Значение по умолчанию используется, когда свойство отсутствует или имеет неопределенное значение. Не используется, если свойство имеет значение null.

Допустим, мы хотим получить свойство id из объекта person и хотим установить значение по умолчанию, если оно не существует.

let person = {
    name: 'Mark',
    age: 38,
};

Традиционные способы установки значения по умолчанию

let id = person.id ? person.id : 1;
// Or
let id = person.id ?? 1;

Значение деструктуризации объекта по умолчанию

let { id = 1} = person;
console.log(id); // 1

Значение деструктуризации массива по умолчанию

let countries = ['Japan'];
let [first, second = 'Canada', ...theRest] = countries;
console.log(first);    // 'Japan'
console.log(second);   // Canada
console.log(theRest);  // []

Как мы видим, undefined запускает значения по умолчанию.

Ключи вычисляемых свойств

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

let ServerID = 'adass';
let { [ServerID]: id } = { adass: 123 }; 
console.log(id);       // 123

Деструктуризация внутри функциональных сигнатур

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

Предположим, у нас есть функция, которая получает человека в качестве аргумента:

let person = {
    name: 'Mark',
    age: 38,
};
function personToString({ name, age,id = 1 }) {
    return `${id}: ${name} is ${age} years old`;
}

Разрушение в цикле for-of

let countries=[
    {
        name:'USA',
        population:332403650
    },
    {
        name:'Morocco',
        population:37820938
    }
];
for( {name, population} of countries){
    console.log(`${name} has a population of ${population}`);
}

Привязать значения к объектам

JavaScript заставит источник присваивания стать объектом, если он еще им не является.

let { length: nameLength} = 'Morocco'; 
console.log(nameLength);  // 7
let {toString: proto} = 123;
console.log(Number.prototype.toString === proto);  // true

Приведение к объекту внутренней операцией ToObject(), а не Object().
ToObject выдает ошибку, если реструктурированное значение не определено или равно null.

let { name } = undefined // TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined.

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

let { name } = undefined ?? {} 
console.log(name) // undefined

Полусложный пример деструктуризации Javascript

Предположим, мы хотим извлечь:

Улица по адресу первого человека в виде переменной fPStreet.
Идентификатор первого лица без установки значения по умолчанию.
Идентификатор второго человека используется как переменная sPersonId и устанавливается значение по умолчанию 2.

В одной строке кода.

let [{addresses:[{street:fPStreet}],id},{id: sPersonId='2'}]=people;
console.log(fPStreet,id , sPersonId); // 123 Main St 1 2

Заключение

Синтаксис деструктуризации объектов — это отличный инструмент, которым могут воспользоваться разработчики. Он экономит ваше время и улучшает читаемость кода, а также предотвращает ошибки, предоставляя резервные значения по умолчанию.
Я рад использовать эту статью, чтобы поделиться с вами тем, насколько полезна деструктуризация объектов.
Спасибо за чтение, пожалуйста, дайте мне знать, если вы нашли это полезным, и поделитесь со мной своими мыслями в Твиттере на @ AyoubMabrouk_.

Понимание назначения деструктуризации JavaScript

Объекты и массивы JavaScript