JavaScript
Назначение деструктуризации

Вступление

Синтаксис

• пусть [x, y] = [1, 2]
• пусть [во-первых, ... rest] = [1, 2, 3, 4]
• пусть [один,, три] = [1, 2, 3]
• let [val = 'значение по умолчанию] = []
• пусть {a, b} = {a: x, b: y}
• let {a: {c}} = {a: {c: 'inested'}, b: y}
• let {b = 'значение по умолчанию'} = {a: 0}

замечания

Аргументы функции деконструкции

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

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

Это также работает для массивов:

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

Переименование переменных при уничтожении

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

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

Разрушающие массивы

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

Мы можем установить значение по умолчанию в массиве деструктурирующего см примера Значения по умолчанию While деструктурирующего .

С массивом destructuring мы можем легко менять значения 2 переменных:

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

Мы можем указать пустые слоты, чтобы пропустить ненужные значения:

[a, , b] = [1, 2, 3] // a = 1, b = 3

Объекты разрушения

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

Основной синтаксис:

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

Разрушение и переименование:

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

Уничтожение по умолчанию:

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Уничтожение и переименование по умолчанию

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Уничтожение внутренних переменных

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

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

Как вы можете видеть, были созданы три новые переменные: name , age и location а их значения были захвачены у person объекта, если они совпадали с именами ключей.

Использование параметров отдыха для создания массива аргументов

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

Пример 1: необязательные аргументы в массив:

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

В примере 2 все аргументы представляют собой массив:

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

Консоль напечатала true, потому что myArguments - это массив, также ...myArguments внутри ...myArguments аргументов параметров преобразует список значений, полученных функцией (параметрами), разделенными запятыми, в полнофункциональный массив (а не объект типа Array как родной аргумент object).

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

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

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

Вложенное уничтожение

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

Уничтожение вложенных объектов

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

Уничтожение вложенных массивов

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

Разрушение не ограничивается одним шаблоном, мы можем иметь в нем массивы с n-уровнями вложенности. Аналогичным образом мы можем разрушить массивы с объектами и наоборот.

Массивы внутри объекта

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

Объекты внутри массивов

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);