Что такое деструктуризация данных?

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

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

Давайте разберемся подробнее на практическом примере:

Например, у нас есть один объект, как показано ниже:

let data = {
  firstName: "Namrata",
  lastName: "Sanja",
  gender: "Female",
  country: "India",
};

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

Без деструкции:

const fName = data.firstName;
const lName = data.lastName;
const gender= data.gender;
const country= data.country;

С деструктуризацией:

const { fName = firstName, lastName, gender, country } = data; 

Вы можете увидеть разницу между деструктурированием с и без.

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

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

Можем ли мы использовать деструктурирование в Reactjs?

Да, конечно, мы можем использовать деструктурирование в Reactjs. есть тот же синтаксис, что и выше.

Можем ли мы деструктурировать данные реквизита в Reactjs?

Да, мы можем деструктурировать данные реквизита.

Давайте посмотрим подробно на примере:

Без деструктуризации функциональной составляющей:

const fName = props.firstName;
const lName = props.lastName;
const gender= props.gender;
const country= props.country;

С деструктуризацией функциональной составляющей:

const { fName = firstName, lastName, gender, country } = props;

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

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

Если у вас есть какие-либо вопросы относительно деструктуризации или любых других вещей в Javascript, React и Redux. Пожалуйста, прокомментируйте ниже. создаст статью об этом подробно.

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

Удачного кодирования… :)