В JavaScript мы используем объекты для хранения нескольких значений в качестве сложной структуры данных. Вряд ли есть какие-либо приложения JavaScript, которые не имеют дело с объектами. Веб-разработчики обычно извлекают значения из свойства объекта для дальнейшего использования в логике программирования. С ES6, JavaScript представил деструктурию объекта, чтобы сделать его

Автор оригинала: TAPAS ADHIKARY.

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

Веб-разработчики обычно извлекают значения из свойства объекта для дальнейшего использования в логике программирования. С ES6, JavaScript представил Разрушение объекта Чтобы облегчить создание переменных от свойств объекта.

В этой статье мы узнаем о Разрушение объекта Пережив много практических примеров. Мы также узнаем, как использовать Распространение синтаксиса и Параметр отдыха Отказ Я надеюсь, тебе это нравится.

Мы создаем объекты с фигурными брекетами {...} и список свойств. Свойство – это пара клавиш, где ключ должен быть строкой или символом, а значение может быть любого типа, включая другой объект.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

Здесь мы создали объект пользователя с тремя свойствами: имя, адрес и возраст. Реальная потребность в программировании состоит в том, чтобы извлечь эти значения свойства и назначить их переменной.

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

let name = user.name;
let age = user.age;
console.log(name, age);

Это, несомненно, немного больше печатает. Мы должны явно упомянуть Имя и возраст недвижимость с Пользователь Объект в точке (.) Обозначения, затем объявляют переменные соответственно и назначить их.

Мы можем упростить этот процесс, используя новый Разрушение объекта Синтаксис представлен в ES6.

По умолчанию имя клавиши объекта становится переменной, которая содержит соответствующее значение. Таким образом, не требуется дополнительный код для создания другой переменной для назначения стоимости. Давайте посмотрим, как это работает с примерами.

Пример деструктарирующейся объекта

Давайте возьмем один и тот же Пользователь объект, который мы упоминали выше.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

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

const { name } = user;

console.log(name); // Output, Alex

Как видите, на левой стороне выражения мы выбираем клавишу свойств объекта ( имя в этом случае) и поместите его внутри {} Отказ Это также становится именем переменной для удержания значения свойства.

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

Итак, как мы извлекаем значения из более чем одного объекта свойства? Просто – мы продолжаем добавлять клавиши объекта внутри {} с запятыми, отделяющими их. В приведенном ниже примере мы разрушаем как Имя и возраст Свойства от Пользователь объект.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

const { name, age } = user;

console.log(name, age); // Output, Alex 43

Правило переменных декларации

Ключевые слова, позволяющие и const представляют собой значительную в синтаксисе разрушимости объекта. Рассмотрим пример ниже, где мы пропустили ключевое слово пусть или const. Это завершится в ошибке, Uncaughty syntaxeRror: неожиданный токен '=' Отказ

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

{ name  } = user // Uncaught SyntaxError: Unexpected token '='

Что, если мы заранее объявляем переменную, а затем попытайтесь разрушать одно и то же название ключа от объекта? Нет, не повезло здесь тоже. Это все еще синтаксически неверно.

let name;

{ name  } = user; // Uncaught SyntaxError: Unexpected token '='

В этом случае правильный синтаксис заключается в том, чтобы поставить выражение разрушения внутри скобок ( (...) ).

let name;

({ name  } = user);

console.log(name); // Output, Alex

Добавьте новую вариабельную и значение по умолчанию

Мы можем добавить новую переменную во время разрушения и добавить его значение по умолчанию. В примере ниже зарплата Переменная несуществует в Пользователь объект. Но мы можем добавить его в разрушительном выражении и добавить его значение по умолчанию.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}
const { name, age, salary=123455 } = user;

console.log(name, age, salary); // Output, Alex 43 123455

Альтернативный способ сделать вышеизложенное это:

let salary = user.salary ? user.salary : 123455;

Существует значительное преимущество для гибкости добавления переменной с помощью значения по умолчанию. Значение по умолчанию этой новой переменной не обязательно будет постоянным значением всегда. Мы можем вычислить значение его из других разрушенных значений свойств.

Давайте возьмем Пользователь Объект с двумя свойствами, first_name и last_name Отказ Теперь мы можем вычислить ценность несуществующего full_name используя эти два свойства.

const user = { 
    'first_name': 'Alex',
    'last_name': 'Brandos',
}
const { first_name, last_name, full_name=`${first_name} ${last_name}` } = user;

console.log(full_name); // Output, Alex Brandos

Разве это не элегантно и полезно!

Добавить псевдонимы

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

В приведенном ниже примере мы указали имя псевдонима для свойства Адрес как PermoneptAddress Отказ

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

const { address: permanentAddress } = user;

console.log(permanentAddress); // 15th Park Avenue

Обратите внимание, что попытка получить доступ к переменной Адрес Вот приведет к этой ошибке:

Разрушение вложенного объекта

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

Давайте рассмотрим Пользователь объект ниже. У этого есть недвижимость под названием Отдел со значением в качестве другого объекта. Но давайте не остановимся здесь! Отдел имеет свойство с ключом Адрес чья ценность является еще одним объектом. Довольно реальный сценарий, не так ли?

const user = { 
        'name': 'Alex',
        'address': '15th Park Avenue',
        'age': 43,
        'department':{
            'name': 'Sales',
            'Shift': 'Morning',
            'address': {
                'city': 'Bangalore',
                'street': '7th Residency Rd',
                'zip': 560001
            }
        }
}

Как мы извлечь ценность Отдел имущество? Хорошо, это должно быть прямо вперед.

const { department } = user;

И вот вывод, когда вы регистрируете Отдел :

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

const { department: { address } } = user;

Вот вывод, когда вы регистрируете Адрес :

В этом случае Отдел это ключ, на котором мы сосредоточены, и мы разрушаем Адрес ценность от него. Обратите внимание на {} вокруг клавиш, которые вы хотите разрушать.

Теперь пришло время принять его на следующий уровень. Как мы извлечь ценность Город от адреса отдела? Тот же принцип снова!

const { department: { address: { city } } } = user; 

Вывод при регистрации Город это «Бангалор».

Это может идти любой уровень вложенным.

Свойство динамического имени

Много раз вы не можете знать имя свойства (ключа) объекта во время ее разрушения. Рассмотрим этот пример. У нас есть Пользователь объект:

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

Теперь метод GetValue (ключ) принимает имя ключа свойств и должен вернуть его значение.

getValue('name') // Should return Alex
getValue('age') // Should return 43

Итак, как мы пишем определение GetValue (ключ) Способ с использованием синтаксиса разрушимости?

Ну, синтаксис очень похож на создание псевдонимов. Как мы не знаем ключ Имя к жесткому коду в синтаксисе разрушимости, мы должны приложить его с квадратными кронштейнами ( [...] ).

const getValue = key => {
    const { [key]: returnValue } = user;   
    return returnValue;
}

Разрушение к функциональному параметру

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

Давайте возьмем Пользователь Пример объекта еще раз.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

Предположим, нам нужна функция для возврата строки с использованием имени пользователя и возраста пользователя. Скажи что-то вроде Алекс 43 года, старый! Это возвращаемое значение, когда мы называем это:

logDetails(user); 

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

function logDetails({name, age}) {
    console.log(`${name} is ${age} year(s) old!`)
}

Разрушение функции возвращаемого значения

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

const getUser = () => {
    return{ 
        'name': 'Alex',
        'address': '15th Park Avenue',
        'age': 43
    }
}

const { name, age } = getUser();

console.log(name, age); // Alex 43

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

Разрушение циклов

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

const users = [
    { 
        'name': 'Alex',
        'address': '15th Park Avenue',
        'age': 43
    },
    { 
        'name': 'Bob',
        'address': 'Canada',
        'age': 53
    },
    { 
        'name': 'Carl',
        'address': 'Bangalore',
        'age': 26
    }
];

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

for(let { name, age } of users) {
    console.log(`${name} is ${age} years old!`);
}

Это выход:

Объект консоли

В JavaScript, Консоль это встроенный объект, поддерживаемый всеми браузерами. Если вы заметили, Консоль Объект имеет много свойств и методов, а некоторые очень популярны, как console.log () Отказ

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

const { log, warn, error } = console;

log('I log into the browser console');
warn('I am a warning');
error('I am an error');

Синтаксис спреда (также известный как оператор спреда) является еще одной отличной особенностью ES6. Как указывает имя, он принимает счетчику (например, массив) и расширяет (спреды) в отдельные элементы.

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

Spread Syntax помогает нам клонировать объект с самым простым синтаксисом с помощью фигурных скобок и трех точек {...} Отказ

const clone_some_object = {...some_object}

С распространением синтаксиса мы можем клонировать, обновлять и объединять объекты в неизменный способ. Неизмермость помогает уменьшить любые случайные или непреднамеренные изменения в оригинальный (источник) объект.

Создать клон объекта

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

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

const clone = {...user} // Output, {name: "Alex", address: "15th Park Avenue", age: 43}

clone === user; // Output, false

Вы можете альтернативно использовать объект.assign () создать клон объекта. Однако распространенный синтаксис гораздо более точен и гораздо короче.

Добавить свойства на объекты

Мы можем добавить новое свойство (пару клавише) на объект, используя Распространение синтаксиса Отказ Обратите внимание, что фактический объект никогда не изменяется. Новое свойство добавляется в клонированный объект.

В приведенном ниже примере мы добавляем новое свойство ( зарплата ) с использованием синтаксиса распространения.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

// Add a new property salary
const updatedUser = {...user, salary:12345}; // {name: "Alex", address: "15th Park Avenue", age: 43, salary: 12345}

// Original object is unchanged
console.log(user); // {name: "Alex", address: "15th Park Avenue", age: 43}

Обновлять свойства

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

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

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

const updatedUser = {...user, age:56}; // {name: "Alex", address: "15th Park Avenue", age: 56}

console.log(user); // {name: "Alex", address: "15th Park Avenue", age: 43}

Обновить вложенные объекты

Как мы уже видели, обновление объекта с синтаксисом спред простым, и оно не мутирует исходный объект. Тем не менее, это может быть немного сложно, когда вы пытаетесь обновить вложенный объект, используя синтаксис спреда. Давайте понять это с примером.

У нас есть Пользователь объект с недвижимостью Отдел Отказ Значение Отдел Собственность – это объект, который имеет еще один вложенный объект со своим Адрес имущество.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43,
    'department':{
        'name': 'Sales',
        'Shift': 'Morning',
        'address': {
            'city': 'Bangalore',
            'street': '7th Residency Rd',
            'zip': 560001
        }
    }
}

Теперь, как мы можем добавить новую недвижимость под названием, Номер со значением, скажем, 7 для Отдел объект? Ну, мы могли бы попробовать следующий код для достижения его (но это было бы ошибкой):

const updated = {
    ...user, 
    department: {'number': 7}
}

console.log(updated);

Когда вы выполняете его, вы поймете, что код заменит весь объект отдела с новым значением, как, {«Номер»: 7} Отказ Это не то, что мы хотели!

Как мы это исправить? Нам нужно распространить свойства вложенного объекта, а также добавить/обновить его. Вот правильный синтаксис, который добавит новую недвижимость Номер со значением 7 к Отдел объект без замены его значения:

const updated = {
    ...user, 
    department: {
        ...user.department, 
        'number': 7
    }
};

console.log(updated);

Выход следующий:

Объединить (или сливаться) два объекта

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

const merged = {...obj_1, ...obj_2};

Обратите внимание, что этот способ объединения выполняет Неглубокое слияние Отказ Это означает, что если существует общее свойство между объектами, значение свойства OBJ_2 заменит значение свойства OBJ_1 в объединенном объекте.

Давайте возьмем Пользователь и Отдел объекты для объединения (или объединения) их вместе.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

const department = {
    'id': '001',
    'Shift': 'Morning'
}

Объединить объекты, используя синтаксис спреда, как это:

const completeDetails = {...user, ...department};

console.log(completeDetails);

Вывод будет следующим:

Если мы изменим Отдел Объект, как это:

const department = {
    'name': 'Sales',
    'Shift': 'Morning'
}

Теперь попробуйте объединить их и наблюдать за комбинированным выходом объекта:

const completeDetails = {...user, ...department};

console.log(completeDetails);

Выход будет:

Имя Значение свойств Пользователь Объект заменен Имя Значение свойств Отдел Объект в объединенном выходе объекта. Так что будьте осторожны с этим таким образом.

На данный момент вам нужно реализовать Deep-Merge объектов самостоятельно или использовать библиотеку, такую как Лоташ добиться этого.

Отдых Параметр рода напротив Распространение синтаксис. Хотя Spread Syntax помогает расширить или распространять элементы и свойства, параметр покоя помогает собрать их вместе.

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

Давайте посмотрим на пример следующего Пользователь объект:

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

Мы знаем, как разрушать возраст Свойство, чтобы создать переменную и назначить его значение. Как насчет создания другого объекта одновременно с остальными свойствами Пользователь объект? Ну вот:

const {age, ...rest} = user;
console.log(age, rest);

Выход будет:

На выходе мы видим, что возраст Значение это 43 Отказ Параметр отдыха консолидирован остальные Пользователь объектные свойства, Имя и Адрес , в отдельном объекте.

Обобщить,

• Разрушение объекта – это новый синтаксис, представленный в ES6. Это помогает создавать переменные, извлекая свойства объекта в гораздо проще.
• Если вы работаете с (или планируете использовать) каркас/библиотеку, как угловой , реагировать или Vue , вы будете использовать большой синтаксис разрушительств объекта.
• Разрушение объекта и распространение синтаксиса не то же самое.
• Распространение Синтаксис (также известный как оператор спреда) используется для копирования перечислимых свойств объекта для создания этого клона. Мы также можем обновить объект или объединиться с другим объектом, используя синтаксис спред.
• Отдых Параметр своего рода противоположность Распространение синтаксис. Это помогает консолидировать (или собирать) оставшиеся объектные свойства в новый объект, в то время как деструктуризация выполняется.

Прежде чем идти

Я надеюсь, что вы нашли эту статью Insightful, и что она поможет вам начать использовать эти концепции более эффективно. Давайте подключемся. Вы найдете меня активным на Twitter (@tapasadhikary) Отказ Пожалуйста, не стесняйтесь дать следующее.

Вы можете найти все примеры исходного кода, используемые в этой статье в моем репозитории GitHUB – JS-Tips-Tricks Отказ Вы заинтересованы в том, чтобы делать некоторые практические кодировки на основе того, что мы узнали до сих пор? Пожалуйста, имейте Посмотрите на викторину здесь И вы можете найти это интересно.

Вы также можете понравиться эти статьи:

• Как узнать что-то новое каждый день как разработчик программного обеспечения
• Как найти содержание блога идей без усилий?
• Почему вам нужно сделать боковые проекты как разработчик?
• 16 боковых проектных репозиториев GitHub Вы можете найти полезное