В этом руководстве вы узнаете о назначении деструктуризации JavaScript с помощью примеров.
Деструктуризация JavaScript
Назначение деструктуризации, представленное в ES6, упрощает присвоение значений массива и свойств объекта отдельным переменным. Например,
до ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Из ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Примечание : порядок имени не имеет значения при деструктуризации объекта.
Например, вы можете написать указанную выше программу как:
let ( age, gender, name ) = person; console.log(name); // Sara
Примечание . При деструктуризации объектов следует использовать для переменной то же имя, что и соответствующий ключ объекта.
Например,
let (name1, age, gender) = person; console.log(name1); // undefined
Если вы хотите назначить разные имена переменных для ключа объекта, вы можете использовать:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Разрушение массива
Аналогичным образом можно выполнить деструктуризацию массива. Например,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Назначить значения по умолчанию
Вы можете назначить значения по умолчанию для переменных при использовании деструктуризации. Например,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
В приведенной выше программе arrValue имеет только один элемент. Следовательно,
- переменная x будет 10
- переменная y принимает значение по умолчанию 7
При деструктуризации объекта аналогичным образом можно передавать значения по умолчанию. Например,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Обмен переменных
В этом примере две переменные меняются местами с использованием синтаксиса деструктурирующего присваивания.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Пропустить предметы
Вы можете пропустить ненужные элементы в массиве, не назначая их локальным переменным. Например,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
В приведенной выше программе второй элемент опущен с помощью разделителя запятой ,.
Назначьте оставшиеся элементы одной переменной
Вы можете присвоить оставшиеся элементы массива переменной, используя синтаксис распространения … . Например,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Здесь oneприсвоено переменной x. А остальные элементы массива присваиваются переменной y.
Вы также можете присвоить остальные свойства объекта одной переменной. Например,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Примечание . Переменная с синтаксисом распространения не может иметь конечную запятую ,. Вы должны использовать этот элемент rest (переменную с синтаксисом распространения) в качестве последней переменной.
Например,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Вложенное назначение деструктуризации
Вы можете выполнять вложенную деструктуризацию для элементов массива. Например,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Здесь переменным y и z назначены вложенные элементы twoи three.
Чтобы выполнить вложенное назначение деструктуризации, вы должны заключить переменные в структуру массива (заключив внутрь ()).
Вы также можете выполнять вложенную деструктуризацию для свойств объекта. Например,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Чтобы выполнить вложенное назначение деструктуризации для объектов, вы должны заключить переменные в структуру объекта (заключив внутрь ()).
Примечание . Функция деструктурирования назначений была введена в ES6 . Некоторые браузеры могут не поддерживать использование назначения деструктуризации. Посетите службу поддержки Javascript Destructuring, чтобы узнать больше.
