Разрушение данных в javascript:
Какие темы мы собираемся затронуть?
- Что такое деструктурирование данных?
- Где и как мы можем это использовать?
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
на экране вывода, в этом нет никаких сомнений, потому что роль упоминается так же, как мы упомянули ее в объекте.
Вывод:
- Разрушение происходит не только в объектах, но и в массивах и во многих других вещах.
- Убедитесь, что имена точно такие же в случае с объектами, но не в случае с массивом, они работают совсем по-другому, поэтому таких жестких требований нет.
Надеюсь, я дал вам достаточно информации о деструктурировании данных, и к этому времени вы уже хорошо с этим справитесь. Так что не стесняйтесь хлопать аплодисментами, если вам это нравится, и отзывы приветствуются.
Спасибо, ребята, давайте наверстать упущенное в новом.