Введение в деструктуризация JavaScript

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

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

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

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

const [a, b] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 2

Присвоение переменной из вложенного массива

const [a, [b]] = [1, [3, 2], 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 3

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

const [a,, c] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(c); // Output: 3

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

const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7]
console.log(rest); // Output: [3, 4, 5, 6, 7]

Мы также можем определить значения по умолчанию в случае, если значение из массива отсутствует, в этом примере ниже мы деструктурируем массив с 2 значениями, однако у нас есть третья переменная C который будет назначен значению по умолчанию 3 Анкет

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // Output: 1 2 3

Всякий раз, когда значение присутствует в массиве, переменная не будет назначена значению по умолчанию, а значению в массиве. Ниже мы видим переменную C присваивается значению из массива, которое является 4 Анкет

const [a, b, c = 3] = [1, 2, 4];
console.log(a, b, c); // Output: 1 2 4

Переменные обмена с деструктуризацией массива

let name1 = 'Louise';
let name2 = 'Ellie';

console.log(name1, name2); // Louise Ellie 
[name1, name2] = [name2, name1];
console.log(name1, name2); // Ellie Louise 

Разрушение объекта позволяет вам получить значения со свойства объекта и назначать их переменным. Следующие примеры применяют это по -разному:

Присвоение переменной из объекта

const {name, age} = {name: 'Ellie', age: 27};
console.log(name); // Output: Ellie
console.log(age); // Output: 27

Присвоение переменной из вложенного объекта

const details = {
  name: 'Louise',
  age: 25,
  languages: {
    frontEnd: ['HMTL', 'CSS', 'JavaScript', 'React'],
    backEnd: ['Node.js', 'Express.js'],
    database: ['PostgreSQL', 'MongoDB'],
  }
}

const {name, age, languages: { frontEnd, backEnd, database }} = details;
console.log(frontEnd); // Output: ["HMTL", "CSS", "JavaScript", "React"]
console.log(backEnd); // Output: ["Node.js", "Express.js"]
console.log(database); // Output: ["PostgreSQL", "MongoDB"]

Присвоение остальной части объекта переменной

const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // Output: 12
console.log(b); // Output: 43
console.log(rest); // Output: {c: 67, d: 17}

С разрушением объекта также возможно установить значения по умолчанию, а также переименовать значения. Значения переименования обычно полезны, когда внутри объектов есть недопустимые идентификаторы свойств. в примере ниже имя назначается FirstName переменная и Любит Программирование переменная назначена ложный как значение по умолчанию.

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27};
console.log(firstName); // Output: Ellie
console.log(age); // Output: 27
console.log(likesProgramming); // Output: false

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27, likesProgramming: true};
console.log(likesProgramming); // Output: true

Разрушение объекта, принятого как аргумент функций. В примере ниже, имя , возраст и Страна являются разрушенными правыми в аргументе функции. (Это также будет возможно с массивами).

const details = {
  name: "Max",
  age: 23,
  country: "Spain"
};

const showDetails = ({ name, age, country }) => {
  console.log("Name: " + name, "Age: " + age, "Country: " + country);
};

showDetails(details); // Output: Name: Max Age: 23 Country: Spain 

Также возможно переименовать и установить значения по умолчанию внутри функций. В примере ниже, имя Значение присваивается переменной FirstName и Любит Программирование Переменная имеет значение по умолчанию ложный Анкет

const showDetails = ({name: firstName, age, likesProgramming = false}) => {
  console.log('First Name: ' + firstName + ', ' + 'Age: ' + age + ', ' + 'Likes Programming: ' + likesProgramming);
}

const details = {name: 'Ellie', age: 27};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: false

Здесь мы добавляем свойство Любит Программирование установить в Верно Внутри Детали Поэтому, как только мы запустим ShowDetails Функция. Он больше не будет использовать значение по умолчанию. Вместо этого он разрушит свойство из объекта.

const details = {name: 'Ellie', age: 27, likesProgramming: true};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: true

Возвращенный объект из функции может быть разрушен сразу после того, как функция была вызвана, как показано ниже. (Это также будет возможно с массивами).

const showDetails = () => ({name: 'Knox', age: 20, city: 'New York'});

const {name, city} = showDetails();

console.log(name); // Output: Knox
console.log(city); // Output: New York

Спасибо за чтение! Увидимся в следующем, счастливого кодирования! 😃

Оригинал: “https://dev.to/marlonry/introduction-to-javascript-destructuring-4012”