Об использовании деструктуризации объектов JavaScript нужно знать

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

Введение

Мы используем объекты JavaScript для хранения данных и последующего их извлечения. Мы храним данные (также известные как информация) key-valueпарами. Пара ключ-значение также известна как object properties.

Вот employeeобъект с тремя свойствами: идентификатор, имя, отдел в качестве ключей и 007, «Джеймс» и «Шпион» в качестве значений.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Начиная с ES6 (ECMAScript 2015), JavaScript предоставляет механизм для обработки свойств объектов гораздо более инновационным способом. Механизм называется Destructuring(также известный как деструктурирующее присваивание). Это скорее новый синтаксис, добавленный в язык, чем функция.

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

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

Самое простое использование деструктуризации объекта — получение значения ключа свойства из объекта.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Традиционно мы будем использовать нотацию с точкой (.) или нотацию с индексом ([]) для извлечения значений из объекта. Фрагмент кода ниже показывает пример получения значения объекта idи nameиз employeeобъекта с использованием точечной нотации.

const id = employee.id;
const name = employee.name;

Без сомнения, он работает идеально. Но подумайте об утомительном наборе текста (или копировании-вставке-редактировании), когда вам приходится делать это для многих значений свойств? Вот где на помощь приходит синтаксис деструктурирующего присваивания.

Чтобы деструктурировать значение из объекта, вы используете такой синтаксис:

const { id, name } = employee;

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

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

⭐ Используйте деструктурирование для извлечения значений из вложенного объекта.

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

Вот наш employeeобъект, где значением deptключа является объект. У него есть свойство с ключом address, значением которого является другой объект. Отлично, здесь мы имеем дело с вложенным объектом.

const employee = {
  id: 007,
  name: 'James',
  dept: {
    id: 'D001',
    name: 'Spy',
    address: {
      street: '30 Wellington Square',
      city: 'Chelsea'  
    }
  }  
}

Давайте получим значение addressсвойства традиционно.

const address = employee.dept.address;

Это работает, и выход есть,

{
    "street": "30 Wellington Square",
    "city": "Chelsea"
}

Теперь давайте спустимся еще на один уровень вниз и получим значение streetсвойства.

const street = employee.dept.address.street;

Конечно, мы набрали больше, и на выходе,

30 Wellington Square

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

const { dept: { address } } = employee;
console.log(address);

и за streetимущество,

const { dept: { address: { street } } } = employee;
console.log(street);

Давайте перейдем к следующему.

⭐ Определите новую переменную с деструктуризацией объекта

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

Возьмем этот employeeобъект для примера,

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

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

const age = employee.age ? employee.age : 25;

Если мы найдем ageсвойство, получим доступ к его значению и присвоим его переменной else, присвоим значение по умолчанию 25. Итак, как мы будем делать это с синтаксисом деструктурирования объекта, который мы изучили до сих пор?

Это довольно просто.

const { name, age=25 } = employee;
console.log(age);

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

Подожди. В деструктурирующей части есть больше магии, чтобы показать! Как насчет создания совершенно новой переменной и присвоения значения, вычисленного с использованием значений свойств объекта? Звучит сложно? Вот пример,

const {name, dept, message = `${name} is ${dept}`} = employee;
console.log(message);

Мы создаем messageпеременную и присваиваем значение, вычисленное с использованием nameзначений deptсвойств employeeобъекта. Мощный, а?

Выход,

James is Spy

⭐ Как использовать псевдонимы для деструктуризации объектов JavaScript?

При деструктуризации объектов JavaScript вы можете дать своим деструктурированным переменным aliasимя. Это очень удобно для уменьшения вероятности конфликтов имен переменных.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Предположим, что в вашем исходном коде уже есть переменная с именем dept. Поэтому, если мы используем одно и то же имя переменной при деструктурировании, возникнет конфликт имен.

Вместо этого вы можете использовать псевдоним для создания переменной с этим новым именем. Например, в этом случае мы можем использовать псевдоним department.

const { dept: department } = employee;
console.log(department); //Spy

Обратите внимание, что мы деструктурировали псевдоним, а не фактическое имя ключа, которое еще не определено.

console.log(dept);

Выход,

Я поделился этим использованием в качестве байта знаний в Твиттере некоторое время назад,

 

ПОДПИСЫВАЙТЕСЬ на меня в Твиттере, чтобы получать больше советов и материалов.

⭐ Обработка свойства динамического имени с деструктуризацией объекта

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

Давайте разберемся на примере (тот же объект сотрудника)

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

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

Вот фрагмент кода, демонстрирующий, как мы можем вызвать функцию.

const id = getPropertyValue('id');
const name = getPropertyValue('name');

console.log(id, name); // 7 'James'

Давайте определим это сейчас.

function getPropertyValue(key) {
    const { [key]: returnValue } = employee;   
    return returnValue;
}

Обратите внимание на квадратные скобки ([..]) вокруг keyв присваивании деструктуризации. Ключ, который мы передаем функции, оценивается, и значение извлекается из объекта. Разве это не круто. Это эффективное использование.

⭐ Деструктурировать объекты в аргументе функции и возвращаемом значении

Вы должны изучить это использование, если хотите изучить любые современные фреймворки/библиотеки на основе JavaScript, такие как React, Vue, Svelte, Angular и т. д. Вы можете использовать деструктуризацию объекта для передачи значений свойств в качестве аргументов функции.

Объект сотрудника,

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Теперь давайте создадим простую функцию, которая создает сообщение, используя значения свойств nameи deptдля входа в консоль браузера.

function logEmployee({name, dept}) {
  console.log(`${name} is ${dept}`); 
}

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

Теперь вы можете вызвать функцию как,

logEmployee(employee); // James is Spy

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

function getUser() {
  return {
    'name': 'Alex',
    'age': 45
  }
}

Теперь, если вам интересно получить значение ageсвойства, вы можете сделать это так:

const { age } = getUser();
console.log(age); // 45

Это действительно экономит много дополнительного набора текста и времени.

⭐ Используйте деструктуризацию объектов в циклах

Последнее (но не менее важное) использование, которое мы обсудим, — деструктуризация в циклах. Давайте подумаем о массиве объектов сотрудников. Мы хотим перебрать массив и использовать значения свойств каждого объекта сотрудника.

const employees= [
  { 
      'name': 'Alex',
      'address': '15th Park Avenue',
      'age': 43
  },
  { 
      'name': 'John',
      'address': 'USA',
      'age': 33
  },
  { 
      'name': 'Ravi',
      'address': 'Bangalore',
      'age': 16
  }
];

Вы можете использовать for-ofцикл, чтобы просмотреть employeesобъект, а затем использовать синтаксис присваивания деструктуризации объекта, чтобы получить детали. Давайте зарегистрируем имя и возраст каждого сотрудника в консоли браузера.

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

Выход,

Это так аккуратно. Мы все уже любим деструктурировать объекты.

Выводы

Время драгоценно. Чем больше вы экономите на этом, тем больше вы можете производить больше. Синтаксис деструктуризации объекта поможет вам сэкономить это время. Пожалуйста, используйте его на практике, если еще не сделали этого.

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

• https://github.com/atapas/youtube/tree/main/code-with-tapas/object-destructuring

Ссылка: https://blog.greenroots.info/javascript-object-destructuring-usages-you-must-know

#javascript

What is GEEK

Buddha Community

Об использовании деструктуризации объектов JavaScript нужно знать

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

Введение

Мы используем объекты JavaScript для хранения данных и последующего их извлечения. Мы храним данные (также известные как информация) key-valueпарами. Пара ключ-значение также известна как object properties.

Вот employeeобъект с тремя свойствами: идентификатор, имя, отдел в качестве ключей и 007, «Джеймс» и «Шпион» в качестве значений.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Начиная с ES6 (ECMAScript 2015), JavaScript предоставляет механизм для обработки свойств объектов гораздо более инновационным способом. Механизм называется Destructuring(также известный как деструктурирующее присваивание). Это скорее новый синтаксис, добавленный в язык, чем функция.

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

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

Самое простое использование деструктуризации объекта — получение значения ключа свойства из объекта.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Традиционно мы будем использовать нотацию с точкой (.) или нотацию с индексом ([]) для извлечения значений из объекта. Фрагмент кода ниже показывает пример получения значения объекта idи nameиз employeeобъекта с использованием точечной нотации.

const id = employee.id;
const name = employee.name;

Без сомнения, он работает идеально. Но подумайте об утомительном наборе текста (или копировании-вставке-редактировании), когда вам приходится делать это для многих значений свойств? Вот где на помощь приходит синтаксис деструктурирующего присваивания.

Чтобы деструктурировать значение из объекта, вы используете такой синтаксис:

const { id, name } = employee;

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

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

⭐ Используйте деструктурирование для извлечения значений из вложенного объекта.

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

Вот наш employeeобъект, где значением deptключа является объект. У него есть свойство с ключом address, значением которого является другой объект. Отлично, здесь мы имеем дело с вложенным объектом.

const employee = {
  id: 007,
  name: 'James',
  dept: {
    id: 'D001',
    name: 'Spy',
    address: {
      street: '30 Wellington Square',
      city: 'Chelsea'  
    }
  }  
}

Давайте получим значение addressсвойства традиционно.

const address = employee.dept.address;

Это работает, и выход есть,

{
    "street": "30 Wellington Square",
    "city": "Chelsea"
}

Теперь давайте спустимся еще на один уровень вниз и получим значение streetсвойства.

const street = employee.dept.address.street;

Конечно, мы набрали больше, и на выходе,

30 Wellington Square

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

const { dept: { address } } = employee;
console.log(address);

и за streetимущество,

const { dept: { address: { street } } } = employee;
console.log(street);

Давайте перейдем к следующему.

⭐ Определите новую переменную с деструктуризацией объекта

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

Возьмем этот employeeобъект для примера,

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

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

const age = employee.age ? employee.age : 25;

Если мы найдем ageсвойство, получим доступ к его значению и присвоим его переменной else, присвоим значение по умолчанию 25. Итак, как мы будем делать это с синтаксисом деструктурирования объекта, который мы изучили до сих пор?

Это довольно просто.

const { name, age=25 } = employee;
console.log(age);

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

Подожди. В деструктурирующей части есть больше магии, чтобы показать! Как насчет создания совершенно новой переменной и присвоения значения, вычисленного с использованием значений свойств объекта? Звучит сложно? Вот пример,

const {name, dept, message = `${name} is ${dept}`} = employee;
console.log(message);

Мы создаем messageпеременную и присваиваем значение, вычисленное с использованием nameзначений deptсвойств employeeобъекта. Мощный, а?

Выход,

James is Spy

⭐ Как использовать псевдонимы для деструктуризации объектов JavaScript?

При деструктуризации объектов JavaScript вы можете дать своим деструктурированным переменным aliasимя. Это очень удобно для уменьшения вероятности конфликтов имен переменных.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Предположим, что в вашем исходном коде уже есть переменная с именем dept. Поэтому, если мы используем одно и то же имя переменной при деструктурировании, возникнет конфликт имен.

Вместо этого вы можете использовать псевдоним для создания переменной с этим новым именем. Например, в этом случае мы можем использовать псевдоним department.

const { dept: department } = employee;
console.log(department); //Spy

Обратите внимание, что мы деструктурировали псевдоним, а не фактическое имя ключа, которое еще не определено.

console.log(dept);

Выход,

Я поделился этим использованием в качестве байта знаний в Твиттере некоторое время назад,

 

ПОДПИСЫВАЙТЕСЬ на меня в Твиттере, чтобы получать больше советов и материалов.

⭐ Обработка свойства динамического имени с деструктуризацией объекта

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

Давайте разберемся на примере (тот же объект сотрудника)

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

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

Вот фрагмент кода, демонстрирующий, как мы можем вызвать функцию.

const id = getPropertyValue('id');
const name = getPropertyValue('name');

console.log(id, name); // 7 'James'

Давайте определим это сейчас.

function getPropertyValue(key) {
    const { [key]: returnValue } = employee;   
    return returnValue;
}

Обратите внимание на квадратные скобки ([..]) вокруг keyв присваивании деструктуризации. Ключ, который мы передаем функции, оценивается, и значение извлекается из объекта. Разве это не круто. Это эффективное использование.

⭐ Деструктурировать объекты в аргументе функции и возвращаемом значении

Вы должны изучить это использование, если хотите изучить любые современные фреймворки/библиотеки на основе JavaScript, такие как React, Vue, Svelte, Angular и т. д. Вы можете использовать деструктуризацию объекта для передачи значений свойств в качестве аргументов функции.

Объект сотрудника,

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Теперь давайте создадим простую функцию, которая создает сообщение, используя значения свойств nameи deptдля входа в консоль браузера.

function logEmployee({name, dept}) {
  console.log(`${name} is ${dept}`); 
}

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

Теперь вы можете вызвать функцию как,

logEmployee(employee); // James is Spy

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

function getUser() {
  return {
    'name': 'Alex',
    'age': 45
  }
}

Теперь, если вам интересно получить значение ageсвойства, вы можете сделать это так:

const { age } = getUser();
console.log(age); // 45

Это действительно экономит много дополнительного набора текста и времени.

⭐ Используйте деструктуризацию объектов в циклах

Последнее (но не менее важное) использование, которое мы обсудим, — деструктуризация в циклах. Давайте подумаем о массиве объектов сотрудников. Мы хотим перебрать массив и использовать значения свойств каждого объекта сотрудника.

const employees= [
  { 
      'name': 'Alex',
      'address': '15th Park Avenue',
      'age': 43
  },
  { 
      'name': 'John',
      'address': 'USA',
      'age': 33
  },
  { 
      'name': 'Ravi',
      'address': 'Bangalore',
      'age': 16
  }
];

Вы можете использовать for-ofцикл, чтобы просмотреть employeesобъект, а затем использовать синтаксис присваивания деструктуризации объекта, чтобы получить детали. Давайте зарегистрируем имя и возраст каждого сотрудника в консоли браузера.

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

Выход,

Это так аккуратно. Мы все уже любим деструктурировать объекты.

Выводы

Время драгоценно. Чем больше вы экономите на этом, тем больше вы можете производить больше. Синтаксис деструктуризации объекта поможет вам сэкономить это время. Пожалуйста, используйте его на практике, если еще не сделали этого.

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

• https://github.com/atapas/youtube/tree/main/code-with-tapas/object-destructuring

Ссылка: https://blog.greenroots.info/javascript-object-destructuring-usages-you-must-know

#javascript

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company