Полный анализ задания деструктуризации серии ES6

ECMAScript 6
Полный анализ задания деструктуризации серии ES6

Чем больше вы знаете, тем больше вы не знаете
点赞Посмотри еще раз, аромат остался в руке, и слава

введение

Объекты и массивы являются двумя наиболее часто используемыми структурами данных в Javascript.Из-за популярности формата данных JSON они стали особенно важной частью языка Javascript. Во время кодирования мы часто определяем множество объектов и массивов, а затем организованно извлекаем из них соответствующие фрагменты информации. В ES6 добавлена ​​новая функция, упрощающая эту задачу: деструктуризация. Деструктуризация — это процесс разбиения структуры данных на более мелкие части.

Зачем нужна деконструкция

Давайте рассмотрим ситуацию, с которой наверняка сталкивалось большинство людей при программировании на Javascript.

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

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    console.log('学生名:' + student.name);
    console.log('数学成绩:' + (student.scores.math || 0 ));
    console.log('语文成绩:' + (student.scores.chinese || 0 ));
    console.log('英语成绩:' + (student.scores.english || 0 ));
}
showScore(student)

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

Назначение деструктуризации объекта

Синтаксическая форма деструктуризации объекта заключается в размещении литерала объекта слева от оператора присваивания, например:

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}
const {firstName,age} = details;

console.log(firstName); // Code
console.log(age);       // 22

В этом коде значение details.firstName хранится в переменной firstName, а значение details.age хранится в переменной age. Это самая основная форма деструктурирования объекта.

Используйте схему, чтобы объяснить процесс деконструкции:

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

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

const person = {
  name: 'jsPool',
  country: 'China'
};
const {name:fullname,country:place} = person;

console.log(fullname); // jsPool
console.log(place); // China

Здесь мы создаем две локальные переменные: полное имя, место и сопоставляем полное имя с именем и местом со страной.

По умолчанию

При использовании выражения присваивания деструктурирования, если указанное имя локальной переменной не существует в объекте, локальной переменной будет присвоено значение undefined, например:

const person = {
  name: 'jsPool',
  country: 'China'
};
let {age} = person;
console.log(age); // undefined

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

Если указанное свойство не существует, вы можете определить значение по умолчанию, добавив знак равенства (=) и соответствующее значение по умолчанию после имени свойства:

const person = {
  name: 'jsPool',
  country: 'China',
  sexual:undefined
};
let {age = 20,sexual:sex = 'male'} = person;
console.log(age); // 20
console.log(sex); // male

В этом примере для переменной age установлено значение по умолчанию 20, а для одноименной переменной секс установлено значение по умолчанию male. Это значение по умолчанию действует только в том случае, если объект person не имеет этого свойства или значение свойства не определено.

Разрушение присвоения вложенных объектов

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

Давайте еще раз посмотрим на первый пример в тексте. У нас есть данные об ученике. В данных об ученике объект используется для представления оценок по трем предметам (математика, китайский язык и английский язык). Мы отображаем информацию о баллах ученика на основе эти данные. Мы можем элегантно манипулировать им, деструктурируя присваивание:

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    const { name,scores:{ math = 0,chinese = 0, english = 0}} = student;
    console.log('学生名:' + name);
    console.log('数学成绩:' + math);
    console.log('语文成绩:' + chinese);
    console.log('英语成绩:' + english);
}
showScore(student)

Здесь мы определяем четыре локальные переменные: name, math, chinese, english. Кроме того, мы также указали значения по умолчанию для переменных math, chinese и english.

Назначение деструктурирования массива

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

let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street

В приведенном выше коде мы деконструировали значения, соответствующие индексам массива 0 и 1, из списка массивов и сохранили их в переменных houseNo и street соответственно.

При деструктуризации массива вы также можете опускать элементы напрямую и указывать имена переменных только для необходимых элементов:

let list = [221,'Baker Street','London'];
let [houseNo,,city] = list;
console.log(houseNo,city);// 221 , London

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

Используйте схему, чтобы объяснить процесс деконструкции:

По умолчанию

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

let list = [221,'Baker Street'];
let [houseNo,street,city = 'BJ'] = list;
console.log(houseNo,street,city);// 221 , Baker Street , BJ

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

Разрушение присваивания вложенных массивов

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

let colors = [ 'red' , [ 'green' , 'yellow' ] , 'blue' ];
let [ firstColor , [ secondColor ] ] = colors;
console.log(firstColor,secondColor); // red , green

В этом примере мы присваиваем соответствующие значения переменным firstColor и secondColor посредством вложенной деструктуризации массивов.

неопределенный элемент

В массиве остальные элементы массива могут быть присвоены определенной переменной с использованием синтаксиса ..., например:

let colors = ['red','green','blue'];
let [firstColor,...otherColors] = colors;
console.log(firstColor);  // red
console.log(otherColors); // ['green','blue']

В этом примере первый элемент массива colors присваивается firstColor, а остальные элементы присваиваются массиву otherColors, поэтому otherColors содержит два элемента: «зеленый» и «синий».

Гибридная деконструкция

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

let node = {
    name:'foo',
    loc:{
        start:{
            line:1,
            column:1
        }
    },
    range:[0,3]
}
let {
    loc:{start:{line}},
    range:[startIndex]
} = node;
console.log(line);       // 1
console.log(startIndex); // 0

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

Гибридная деструктуризация особенно эффективна при извлечении данных из JSON без необходимости выполнять всю деструктуризацию.

Ссылаться на

Рекомендуемая серия статей

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, добро пожаловать点赞и关注
  • Эта статья была впервые опубликована одновременно сgithub, доступны наgithubНайдите больше отличных статей вWatch & Star ★
  • Для последующих статей см.:план

Добро пожаловать в публичный аккаунт WeChat【前端小黑屋】, 1–3 высококачественные высококачественные статьи публикуются каждую неделю, чтобы помочь вам в продвижении вперед.

Категории