Разрушение данных в javascript:

Какие темы мы собираемся затронуть?

  1. Что такое деструктурирование данных?
  2. Где и как мы можем это использовать?

1. Что такое деструктурирование данных?

Деструктуризация – это удобный способ извлечения нескольких значений из данных, хранящихся в (возможно, вложенных) объектах и ​​массивах.

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

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

2. Где и как мы можем это использовать?

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

Деструктуризация с помощью массивов:

Итак, позвольте мне показать вам, что даже сам первый пример может удивить многих людей. Давайте запустим наш редактор кода и посмотрим:

const user = ["abhinandan", 3,"admin"]; //[name, loginCount, role]
var name = user[0];
var loginCount = user[1];
var role = user[2];
console.log(`userName is: ${name}, has login: ${loginCount} times and his role is: ${role}`);

СОВЕТ. Тип данных должен быть одинаковым с обеих сторон.

Выглядит нормально, и вы, возможно, уже догадались о выводе, но все же вы можете проверить его ниже:

//Output:
"userName is: abhinandan, has login: 3 times and his role is: admin"

Но что, если я скажу, что тот же самый код, который мы можем написать в меньшем количестве строк, может сэкономить часть вашего времени, как мы это сделаем? Давайте посмотрим это вместе.

const user = ["abhinandan", 3,"admin"]; //[name, loginCount, role]
var [name, loginCount, role] = user; //L.H.S(array) = R.H.S(array)
console.log(`userName is: ${name}, has login: ${loginCount} times and his role is: ${role}`);

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

//Output:
"userName is: abhinandan, has login: 3 times and his role is: admin"

Деструктуризация с помощью объектов:

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

const myUser = {
    name: "abhinandan",
    loginCount: 3,
    role: "admin"
}
console.log(myUser.loginCount);

СОВЕТ. Тип данных и имена должны быть точно такими же, как в объекте.

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

//Output:
3

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

const myUser = {
    name: "abhinandan",
    loginCount: 3,
    role: "admin"
}
const {name, loginCount, role} = myUser; //object = object
console.log(role);

Если вы запустите это, вы увидите роль на экране.

//Output:
admin

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

const myUser = {
    name: "abhinandan",
    loginCount: 3,
    role: "admin"
}
const {name, myLoginCount, role} = myUser; //object = object
console.log(myLoginCount);

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

//Output:
undefined

Он показывает anundefined , почему так?

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

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

Вывод:

  1. Разрушение происходит не только в объектах, но и в массивах и во многих других вещах.
  2. Убедитесь, что имена точно такие же в случае с объектами, но не в случае с массивом, они работают совсем по-другому, поэтому таких жестких требований нет.

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

Спасибо, ребята, давайте наверстать упущенное в новом.