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

принципы

обучения JavaScript

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

Пример:

[a, b] = [50, 100];
console.log(а);
// ожидаемый результат: 50
console.log(б);
// ожидаемый результат: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(остальное);
// ожидаемый результат: [30, 40, 50]

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

Деструктуризация массива очень проста и лаконична. Используйте литерал массива в левой части выражения присваивания. Каждое имя переменной в литерале массива сопоставляется с одним и тем же индексом деструктурированного массива. Что означает элемент

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

let [a, b, c] = [1, 2, 3];
// а = 1
// б = 2
// c = 3

объявляет отдельные присваивания.

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

Пример: объявить переменные, присвоить значения отдельно

// Объявить переменные let a, b;
// Затем присваиваем значения [a, b] = [1, 2];
консоль.журнал(а); // 1
console.log(b); // 2

Деструктуризация значения по умолчанию

Если значение, полученное при деструктуризации, undefined , вы можете установить значение по умолчанию:

let a, b;
// Устанавливаем значение по умолчанию [a = 5, b = 7] = [1];
консоль.журнал(а); // 1
console.log(b); // 7В

приведенном выше примере мы устанавливаем значения по умолчанию как для a, так и для b. В этом случае, если значение a или b undefined , соответствующее значение будет присвоено установленному по умолчанию. Переменные (5 присваивается a, 7 присваивается b)

обмениваются значениями переменных

Раньше, когда мы обменивали две переменные, мы всегда использовали

//exchange abc = a;a = b;b = c

;

Однако при деконструкции При присваивании мы можем поменять значения двух переменных в выражении деструктуризации

let a = 1; let b = 3; // Обменять значения a и b [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

Деконструируем массив, возвращаемый функцией.

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

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

В приведенном выше примере ** возвращаемое значение [10, 20] функции c()** можно использовать в отдельной строке кода

, чтобы игнорировать возвращаемое значение (или пропустить определенный элемент)

Вы можете выборочно пропустить некоторые нежелательные возвращаемые значения

функции c (. ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

присваиваем оставшееся значение массива a; переменная

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

let [a, ...b] = [1, 2, 3];console.log(a); // 1console;

(

b ); // [2, 3]

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

Будьте осторожны: вы не можете поставить запятую в конце. Если есть лишняя запятая, будет сообщено об ошибке

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element. может не иметь завершающей запятой

Деструктуризация вложенного массива

Как и объекты, массивы могут быть вложенными.

Пример:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Используем вложенную деструктуризацию для назначения красного, зеленого и синего
// Используем вложенную деструктуризацию для назначения красного, зеленого и синего
const [шестнадцатеричный, [красный, зеленый, синий]] = цвет;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

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

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

let [a, b, c, d, e] = 'привет';/*
а = 'ч'
б = 'е'
с = 'л'
д = 'л'
е = 'о'
*/

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

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

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = сокращение для x; // 22;
console.log(z); //

новому имени переменной присваивается

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

let o = { p: 22, q: true };
пусть {p: foo, q: bar} = o;

консоль.журнал(фу); // 22;
console.log(bar); // истинный

код, как указано выше var {p: foo} = o получает имя свойства p объекта o, а затем присваивает его переменной с именем foo.

Деструктуризация значения по умолчанию

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

let { a = 10, b = 5 } = { a: 3 };

консоль.журнал(а); // 3
console.log(b); // 5

Присвойте значение новому имени объекта и укажите значение по умолчанию.

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

let { a: aa = 10, b: bb = 5 } = { a: 3 };

консоль.журнал(аа); // 3
console.log(bb); // 5

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

Массивы и объекты можно использовать вместе в структурах

const props = [.
  { id: 1, имя: 'Физз' },
  { id: 2, имя: «Живая лента» },
  { id: 3, имя: 'FizzBuzz' },
];

const [, , {имя}] = реквизит;
console.log(name); // "FizzBuzz"

не полностью деконструирован

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj; // Не деконструировать x

// х = не определено
// y = 'world'

присваивает объекту оставшееся значение

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// а = 10
// б = 20
// rest = {c: 30, d: 40}

Деструктуризация вложенного объекта (деструктуризацию можно игнорировать)

let obj = {p: ['hello', {y: 'world'}] };
пусть {p: [x, {y}] } = obj;
// x = 'привет'
// y = 'мир'
let obj = {p: ['привет', {y: 'мир'}] };
let {p: [x, { }] } = obj;//игнорируем y
// x = 'hello'

Примечание.

Будьте осторожны при использовании объявленных переменных для

демонстрации ошибок деструктуризации:

let x;{x} = {x: 1}.

Движок JavaScript воспримет {x} как блок кода, что приведет к синтаксису. ошибка. Мы хотим избежать написания фигурных скобок в начале строки, чтобы JavaScript не интерпретировал их как блок кода.

Правильный

способ

записи

:

пусть

функция add([x, y]) {
	return x + y;}add([1, 2]);

В приведенном выше коде параметр функции add представляет собой массив на поверхности, но при передаче параметра параметр массива разбивается на переменные x и y. Внутри функции это то же самое, что и прямая передача x и y.

использование

деструктурирующего присваивания. Существует множество способов

обмена значениями переменных,

пусть x = 1;
пусть у = 2;
[x, y] = [y, x];

записи

не только краток, но и легко читается, а семантика ясна.

Функция

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

// Возврат функции массива example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // Возвращаем объектную функцию example() {
  возвращаться {
    фу: 1,
    бар: 2
  };
  }let { foo, bar } = example();

деструктуризации

данных JSON

Пример:

let jsonData = {.
  идентификатор: 42,
  статус: «ОК»,
  данные: [867, 5309]
};

пусть {идентификатор, статус, данные: номер} = jsonData;

console.log(id, статус, номер);
// 42, "OK", [867, 5309]

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

Рекомендации по теме: Учебное пособие по JavaScript.

Вышеизложенное поможет вам понять детали назначения деструктуризации JavaScript. Для получения дополнительной информации, пожалуйста, обратите внимание на php. Другие статьи по теме на китайском сайте!