Что такое деконструкция?
Деконструкция полностью противоположна конструированию данных. Например, вместо построения нового объекта или массива он расщепляет существующий объект или массив один за другим, чтобы извлечь необходимые данные.
ES6 использует новый шаблон, чтобы соответствовать численным значениям, которые вы хотите извлечь, и назначение деконструкции принимает этот шаблон. Этот шаблон будет отображать структуру данных, которую вы деконструируете, и будут извлечены только те данные, которые соответствуют шаблону.
Деконструированный элемент данных находится в операторе назначения Справа от = это может быть любая комбинация массивов и объектов, что позволяет производить произвольное гнездование. Нет ограничения в количестве переменных, используемых для назначения значений этим данным.
Разрушение массива
Deconstruction массив использует массив в качестве элемента данных, и вы можете извлечь значения из этого массива, чтобы присвоить значения одной или нескольким переменным в соответствии с шаблоном массива (используется для сопоставления значений, которые вам необходимы из массива).
Схема массива используется для определения того, какие значения вы хотите извлечь на основе положения значений. Он должен быть в состоянии точно отобразить структуру массива, чтобы каждой переменной в шаблоне массива присваивается значение, соответствующее позиции в деконструированном массиве.
Позвольте мне привести несколько примеров, чтобы помочь нам понять:
Пример шаблона массива
Назначьте все значения в массиве отдельным переменным
// установить массив const vengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // деконструкция массива к переменной. Образец массива расположена слева от оператора назначения `=`, а структурированный массив справа от //. const [Ironman, Cap, Blackwidow] = Мстители; // inerman = 'tony stark' // cap = 'steve rogers' // blackwidow = 'natasha romanoff' // wut out inerman: inerman;
Извлеките все значения, кроме первого
Const Avengers = [«Тони Старк», «Стив Роджерс», «Наташа Романофф»]; // нам не нужно использовать Tony Const [, cap, blackwidow] = Мстители; // inerman = ошибка: не определенная // cap = 'steve rogers' // blackwidow = 'natasha romanoff' // output cap: cap;
Извлеките все значения, кроме второго
Const Avengers = [«Тони Старк», «Стив Роджерс», «Наташа Романофф»]; // CAP отсутствует const [Ironman,, Blackwidow] = Мстители; // inerman = 'tony stark' // cap = ошибка: undefined // blackwidow = 'natasha romanoff' // output blackwidow: blackwidow;
Извлеките все значения, кроме последнего
Const Avengers = [«Тони Старк», «Стив Роджерс», «Наташа Романофф»]; // Ironman vs Cap const [Ironman, Cap] = Мстители; // inerman = 'tony stark' // cap = 'steve rogers' // blackwidow = error: undefined // вывод Blackwidow: inerman;
Вложенные массивы
Эта схема сопоставления также поддерживает вложенные массивы, пока оператор назначения = шаблон массива слева соответствует структуре массива справа. Позвольте мне еще раз объяснить, что переменным слева будет назначено значение, соответствующее позиции в массиве справа. Независимо от того, как глубоко вы их гнездятся, вы все равно можете деконструировать их.
Деконструирование вложенных массивов
// деструкция вложенных массивов Const Avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Мстители и их партнеры Const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Мстители; // blackwidow = 'natasha romanoff' // inerman = 'tony stark' // Warmachine = 'James Rhodes' // cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Выходной театрхин: Warmachine;
Извлечь значение из глубоко вложенного массива
// Извлекать перцы Поттс константы из этого массива = [«Наташа Романофф», [[«Тони Старк», «Пеппер Поттс»], «Джеймс Родс»], [«Стив Роджерс», «Сэм Уилсон»]; // destructure const [, // пропустить «Наташа Романофф» [[, // пропустить «Тони Старк» ее // Пеппер Поттс присваивается переменной «hera»]]] = Мстители; // обратите внимание: вы также можете написать этот путь // const [, [[, hera]]] = Мстители; // вывод Hera: Hera; // hera = 'pepper potts'
Используйте оператора REST, чтобы захватить все оставшиеся предметы
Если вы хотите получить конкретный элемент массива и поместить оставшиеся элементы в массив, вы можете использовать оператора REST для его деконструкции его так :
// деконструируйте константы Мстителя через Operator rest = ['Natasha Romanoff', «Тони Старк», «Стив Роджерс»]; const [blackwidow, ... theothers] = Мстители; Боти; // blackwidow = 'natasha romanoff' // theothers = ['Tony Stark', 'steve Rogers'] // Вывод Theothers: Theothers;
Разрушение объекта
Деконструкция объекта еще более волшебна, особенно когда вам нужно взять ценности из сложного, глубоко вложенного объекта, что является более очевидным. Чтобы повторить, деконструкция объекта и деконструкция массива используйте те же правила (то есть создайте шаблон объекта в левой стороне оператора назначения, чтобы его положение переменной соответствовало позиции значения объекта на правой стороне).
В разрушении объекта вам необходимо указать имена атрибутов, которые необходимо извлечь, и имена переменных, которые будут назначены. Подобно деконструкции массива, нам нужно создать шаблон объекта, чтобы отобразить деконструированный объект в левой стороне оператора назначения.
Хотя в этом случае мы хотим извлечь значение свойства объекта (например: мы извлекаем value из { prop: value }). Соответственно, наш шаблон объекта должен иметь переменную, и положение этой переменной должно соответствовать положению значения свойства, которое мы собираемся извлечь.
Простой пример
Извлечь простое значение атрибута объекта
Мы можем сделать это, чтобы присвоить значение свойства ironMan of Object { ironMan: 'Tony Stark' } 'Tony Stark' a :
// деконструируйте значение свойства объекта и присваивайте его одной переменной `a`: const {ironman: a} = {ironman: 'Tony Stark'}; // Вывод A: A; // a = 'Тони Старк'Извлечь несколько значений атрибутов
Пока мы расширяем один и тот же шаблон, мы можем извлечь несколько значений атрибутов из объекта следующим образом:
// Настройка нашего объекта Const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure Object для отдельных переменных Const {Ironman: A, Cap: B, Blackwidow: C} = Мстители; // a = 'tony stark' // b = 'steve rogers' // c = 'natasha romanoff' // output a: a;Соблюдайте, как эта схема деконструкции точно соответствует деконструированному объекту.
Вложенное разрушение объекта
Подобно деконструкции вложенных массивов, мы можем деконструировать вложенные объекты, независимо от того, насколько они глубоки.
// Настройка нашего объекта const vengers = {blackwidow: 'natasha romanoff', inermancharcters: {pare: {inerman: 'Tony Stark', Hera: 'Pepper Potts',}, партнер: {Warmachine: 'Джеймс Броди'}}, Capcharacters: {cap: 'Steve Rogers', партнер: {Falcon: '{Falcon:' {Falcon: '{Falcon:' {Falcon: '{Falcon:' {kalcon: '{kalcon:' {falcon '}}}; // Destructure Object для отдельных переменных const {blackwidow: a, inermancharacters: {pare: {inerman: b, hera: c}, партнер: {warmachine: d}}, capcharacters: {cap: e, партнер: {falcon: f}}} = vengers; // a = 'natasha romanoff' // b = 'tony stark' // c = 'pepper potts' // d = 'Джеймс Броди' // e = 'Стив Роджерс' // f = 'Сэм Уилсон' // Выход A: a;Назовите назначенную переменную
Конечно, плохо устанавливать имена переменных, такие как имена переменных , и имена переменных должны иметь смысл.
Долгосрочное именование
// Настройка нашего объекта Const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure Object на отдельные переменные с значимыми именами Const {Ironman: Ironman, Cap: Cap, Blackwidow: Blackwidow} = Avengers; // blackwidow = 'natasha romanoff' // inerman = 'tony stark' // cap = 'steve rogers' // вывод Blackwidow: Blackwidow; Этот подход лучше, чем вышеприведенное имя A, B и C , но его все равно можно улучшить. { ironMan: ironMan } выглядит немного уродливым и не интуитивно понятным.
Синтаксически названный ярлыки
Если вы хотите назначить значение атрибута объекта переменной, и имя переменной совпадает с именем атрибута объекта, то в режиме назначения в левой стороне = вам нужно только просто написать имя атрибута следующим образом:
// Настройка нашего объекта const venger = {ironman: 'Tony Stark'}; // Destructure Object на отдельные переменные с значимыми именами const {Ironman // Экереален «Ironman: Ironman»} = venger; // Ironman = 'Tony Stark' // output Ironman: Ironman;Поскольку имя атрибута деконструированного объекта совпадает с назначенным именем переменной, нам нужно перечислить имя только один раз.
Краткая грамматика
Давайте немного ретвитуем предыдущий код, чтобы они выглядели более лаконичными и ясными:
// Настройка нашего объекта Const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure Object на отдельные переменные с значимыми именами Const {Ironman, Cap, BlackWidow} = Avengers; // Выход Ironman: Ironman;Извлечь глубоко вложенное свойство из объекта
Вещи еще интереснее, когда мы хотим извлечь глубоко вложенное свойство объекта:
// Установить наши объекты ObjectConst Avengers = {BlackWidow: 'Natasha Romanoff', Ironmancharacters: {pare: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, партнер: {Warmachine: 'James Brodie'}}, Capcharacters: {cap: 'Steve Rogers', партнер: {Falcon: 'falcon:' falcon: 'falcon:' falcon: 'falcon:' falcon: 'falcon:' falcon: 'falcon:' falcon: 'falcon:' falcon: 'falcon:' falcon: 'sambon:' sambon: }}; // Destructure глубоко вложенная ObjectConst {ironmanCharacters: {pare}} = Avengers; // pare = {// ironman: 'Tony Stark', // hera: 'pepper potts', //} // pourt pare: pare;Подожди, как ты прочитал этот код? Как определяется пара переменных?
Разделяя этот путь, мы видим, что оператор назначения = слева является картой деконструированного объекта:
const vengers = {ironmancharacters: {pare: {ironman: 'tony stark', hera: 'pepper potts',}}}; const {ironmancharacters: {pare}} = Avengers; // Выходная пара: пара; Просто используя const { couple } = avengers; Там нет способа извлечь ценность пары . Только путем сопоставления местоположения и имени атрибута объекта, который будет извлечен, может ли компилятор JS получить соответствующую информацию, найти все атрибуты объекта и точно извлечь желаемое значение, которое мы хотим.
Здесь следует также отметить , что пара использует ярлыки синтаксиса для названия переменных, что на самом деле похоже на это:
const {inermancharacters: {pare: pare}} = vengers;Так определяется пара , и ее значение - это значение, чье атрибут пара в объекте Мстителях .
Деконструировать атрибуты объекта
До сих пор мы деконструировали значение объекта для назначения значений одной переменной, и на самом деле мы также можем присвоить значения свойствам другого объекта.
const vengers = {blackwidow: 'natasha romanoff', inermancharacters: {pare: {ironman: 'tony stark', hera: 'pepper potts'}}}; const ironmanperperties = {family: {}}; ({ironmaracters: {caperperperties IronmanProperties.family// IronmanProperties.family = {// Ironman: 'Tony Stark', // hera: 'Pepper Potts' //} // Вывод IronmanPerperties.family:ironmanproperties.family; Здесь мы назначаем значение ironManCharacters.couple собственности ironManProperties.family . Вот два момента, которые нужно объяснить:
1. Назначение деконструкции должно быть включено в скобки
Когда мы деконструируем существующую переменную (например, IronmanProperties в примере выше), мы должны сделать это вместо того, чтобы объявлять новую переменную.
2. шаблон все еще соответствует
{ ironManCharacters: { couple... } } соответствует Ironmancharcters в Object Mvengers . Таким образом, вы можете извлечь ценность ironManCharacters.couple из объекта Мстителей , как вы хотите. Но теперь новый объект IronmanPerperties и его семейство недвижимости расположены за парой . Фактически, недвижимость ironManProperties.family этого объекта фактически назначена.
Вы все еще запутались, когда пытаетесь ясно объяснить эту ситуацию? Попробуйте приведенный выше код в JSFIDDLE , и все будет ясно.
Если вы не уверены, почему вы это делаете, пожалуйста, обратитесь к примеру в следующей статье. Эти примеры скажут вам, почему этот шаблон используется для деконструкции объекта JSON, называемого API, что позволяет вам оценить магию деконструкции!
значение по умолчанию
При деконструкции вы также можете указать значение по умолчанию с переменной:
// Настройка нашего объекта Const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // деструктура с использованием по умолчанию const {ironman, cap, blackwidow, thehulk = 'bruce banner'} = vengers; // inerman = 'tony stark' // cap = 'steve rogers' // blackwidow = 'natasha romanoff' // thehulk = 'bruce banner' // вывод Blackwidow: Blackwidow;Избегайте этих проблем во время деконструкции
Const, пусть, вар не используется при деконструкции назначения
Этот момент упоминался при разговоре о деконструкции и назначении свойств объекта, но все еще необходимо повторить его здесь, чтобы произвести глубокое впечатление.
Не может деконструировать объявленные переменные
То есть вы можете объявлять только переменные при деконструкции переменных.
// Настройка нашего объекта Const Avengers = {Ironman: «Tony Stark», Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // допустимая деструкция const {ironman} = vengers; Пусть {cap} = vengers; var {blackwidow} = vengers; // недействительная деструкция пусть Thehulk; {thehulk} = Мстители; // Ошибка // Вывод TheHulk: TheHulk;Почему не может быть деконструирована заявленная переменная? Это потому, что если вы используете Curly Braces { тогда JavaScript будет думать, что вы объявляете блок .
Решение состоит в том, чтобы заключить все деконструированное назначение в пару кронштейнов .
Как деконструировать и назначить объявленную переменную
// Настройка нашего объекта Const Avengers = {Ironman: «Tony Stark», Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // Действительный Халк позволил тебе; ({thehulk} = vengers); // thehulk = 'bruce banner' // выводить thehulk: thehulk;Теперь мы не начинаем с вьющихся скоб, поэтому JS не думает, что мы объявляем блок , чтобы мы могли достичь ожидаемого результата деконструкции.
Возвращает деконструированное значение напрямую
Когда первая переменная, которая должна быть возвращена в следующем, не объявляется сначала, непосредственно возвращается деконструированное значение, которое не достигнет ожидаемого эффекта. Например, в следующем коде возвращаемый целый объект Ironman не будет ожидаемым значением Тони Старка .
// Примечание: это не работает! Функция gettonyStark (Avengers) {return {ironman: {realName}} = Avengers; // возвращать объект Мстителей, а не значение realName} const vengers = {ironman: {realName: 'Tony Stark'}}; const tonystark = gettonystark (Мстители); // tonyStark = {// Ironman: {// RealName: 'Tony Stark' //} //}; // Вывод TonyStark: TonyStark;Чтобы извлечь значение из деконструированного объекта, вы должны сначала присвоить его переменной, а затем вернуть эту переменную, как показано в следующем коде:
// Примечание: это работает! функция gettonyStark (Avengers) {const {ironman: {realName}} = Avengers; вернуть realName; } const vengers = {ironman: {realName: 'Tony Stark'}}; const tonystark = gettonystark (Мстители); // TonyStark = 'Tony Stark' // Выход TonyStark: TonyStark;Этот способ разделения назначения и возврата на две строки кода действительно раздражает, а код уродливый и ненужный. К сожалению, JavaScript работает подобно - сначала вы должны присвоить деконструированное значение переменной, а затем вернуть его, и два шага должны быть сделаны отдельно.
Тем не менее, мы не сказали, что мы просто сделали это отдельно, и не сказали, что мы должны поместить его в две строки кода. Таким образом, написание его в одну строку, как следующая, также может достичь ожидаемых результатов:
функция gettonyStark (Avengers) {return ({inerman: {realName}} = vengers) && realName; } const vengers = {ironman: {realName: 'Tony Stark'}}; const tonystark = gettonystark (Мстители); // TonyStark = 'Tony Stark' // Выход TonyStark: TonyStark; Поскольку оператор JavaScript _short-circuit_ Circuit_logical (&& и ||) возвращает значение второго операнда на основе значения первого операнда, этот метод написания может достичь ожидаемого эффекта. Здесь первый операнд должен деконструировать выражение выражения и присвоить значение realName . RealName - второй операнд, поэтому его значение наконец возвращается.
Это не оптимально, но может быть достигнуто. Следуя о короткости кода, вы должны обратить внимание на читаемость кода.
Суммировать
В этой статье подробно объясняются основные принципы деконструкции задания. Деконструкция не только уменьшает объем вашего кода, но и принципиально меняет то, как вы его кодируете. Чем больше вы используете его, тем больше способов вы можете формировать данные и функции, которые были почти невозможно в прошлом. Я надеюсь, что эта статья будет полезна всем, чтобы выучить ES6.