Простой и легкий доступ к свойствам вложенных объектов…
Добро пожаловать в мир JS Bifrost, вы глубоко погружаетесь в просвещенный мир JavaScript. Это следующая статья из серии. Мы обсудим недавно введенный оператор в JavaScript - «Необязательная цепочка».
Что происходит, когда мы имеем дело с -
данными - легко перемещаться.
Вложенные данные - проходить немного сложно.
Больше уровней вложенности в данные - Болезненно пересекать; Больше строк кода.
Ааа ... слишком много работы ??? 😰
Повесить там. ДОПОЛНИТЕЛЬНАЯ ЦЕПЬ вам на помощь !!!
Необязательный оператор цепочки был добавлен в JavaScript и включен в ES2020.
Что такое необязательная цепочка (?.) ??
Необязательная цепочка - это новая функция JavaScript, которая помогает легко получить доступ к свойствам вложенных объектов.
Необязательное объединение реализуется с помощью комбинации операторов? (вопросительный знак) и. (точка).
Прежде чем углубляться в реализацию Optional Chaining, давайте разберемся с концепциями null и undefined для четкого понимания оператора Optional Chaining.
Рассмотрим пример объекта player.
let player = {
id: 1234567,
name: "AMBUSHER",
tag: null
}
null:
null значение означает отсутствие значения, которое упоминается как слово «null». «» (пустая строка) или пробел не являются нулевыми значениями. Запись или поле, в котором ничего не было введено (оставлено пустым), имеет нулевое значение.
например, tag свойство - это null
undefined:
undefined означает свойство, объект или значение, которое не определено или отсутствует.
например, rewards - это свойство undefined, которого нет в player Object
Теперь, когда мы знаем null и undefined, давайте посмотрим, как их использовать.
Как пользоваться??
Используя ?. operator, мы можем перемещаться по глубоко вложенным объектам.
Существует 3 синтаксиса:
1. obj?.property
Возвращает свойство obj , если obj существует, в противном случае возвращает null или undefined.
2. obj?.[property]
Этот синтаксис работает так же, как и первый синтаксис, но в этом случае свойство всегда следует указывать в квадратных скобках с двойными («propName») или одинарными («propName») кавычками .
3. obj?.method()
Вызывает метод () из obj , если obj существует, в противном случае возвращает значение null или undefined.
Мы также можем записать этот синтаксис как obj.method?.().
Теперь, когда мы знакомы с синтаксисом Optional Chaining, давайте шаг за шагом разберемся с проверкой:
- Если o bject отсутствует, он вернется как undefined.
2. Если object упоминается как null, тогда вывод дает null.
3. Если object существует, то он проверяет, имеет ли свойство объекта значение null или undefined. Если свойство не является неопределенным или нулевым, тогда оно возвращает значение свойства или вызов метода.
Поскольку мы видели все способы использования оператора Optional Chaining (?.), давайте разберемся, как он работает .. ??
Как это работает??
Необязательный оператор цепочки проверяет, является ли объект перед оператором ?. нулевым или неопределенным.
Если объект не является пустым или неопределенным, тогда он проверяет свойство объекта, указанного после оператора ?.. Если это действительно, тогда он будет возвращать значение свойства, в противном случае - null или undefined.
Использование синтаксиса obj?.property
Рассмотрим пример объекта employee, который имеет свойства id, name, address (включая город, штат, страну).
В качестве примеров ниже рассмотрим объект employee выше.
В приведенном выше примере он проверяет, является ли объект employee null или undefined. Если передано, будет проверяться следующее свойство после?. оператор, иначе вернет null или undefined в зависимости от своего значения.
Пример 1:
В примере 1 проверяется наличие объекта employee. Поскольку он присутствует здесь, он продолжит работу и проверит свойство name, которое также доступно. Тогда выводом будет значение свойства name, которое является «Glee».
Пример 2:
В примере 2 сначала проверяется наличие объекта employee, он присутствует, поэтому он проверяет свойство / объект адреса, который снова присутствует там, затем проверяет свойство города, которое является не введен пользователем (это означает, что город свободен). Вот почему возвращается как null.
Пример 3:
В примере 3 этот работает так же, как и предыдущий, сначала проверяет объект сотрудника, а затем проверяет свойство или объект адреса, а затем проверяет свойство pinCode, которое не определено в объекте адреса. Вот почему возвращается как неопределенное.
На данный момент мы увидели как реализовать опциональную цепочку, не намного ли это проще, чем мы думали… ?? 🤗
Давайте посмотрим, как реализованы два других синтаксиса…
Рассмотрим пример объекта player, который имеет такие свойства, как id, name, tag, status (который включает свойства ранга и уровня).
Пример
Вывод:
В приведенном выше примере мы использовали все 3 синтаксиса. Давайте разбираться по одному.
player?.tag
В первом случае объект player существует, поэтому он проверяет свойство tag объекта проигрывателя. свойство тега определено, но это null (не присвоено никакого значения). Вот почему возвращается значение null.
player?.["name"]
Во втором случае свойство указывается в квадратных скобках [] в двойных кавычках («»). Здесь player объект существует и свойство name также доступно со значением «Ambusher». Затем возвращается как Ambusher.
player.someNonExistingMethod?.()
В третьем случае мы используем метод как свойство и вызываем метод. Здесь сначала проверяется доступность player объекта, а затем проверяется someNonExistingMethod() именованное свойство , которое не определено. Вот почему он возвращается как неопределенный.
Мы также можем записать указанное выше утверждение как player?.someNonExistingMethod(). Это даст тот же результат, что и в приведенном выше заявлении.
Если method () определен в объекте и мы обращаемся к нему с помощью
player.methodName?.()илиplayer?.methodName(), он будет выполнен.
Как получить доступ к свойствам вложенного объекта
В приведенном выше случае мы можем получить доступ к rank как player?.status?.rank или player.status?.rank, и он вернет значение рейтинга «Ace».
Как мы видели, реализация всех типов синтаксиса очень проста для понимания и проста в реализации. Тем не менее, если у вас нет четкого представления о необязательной цепочке, давайте взглянем на нее на диаграмме…
На приведенной выше блок-схеме показано четкое изображение факультативной цепочки. Если obj не равен null или undefined, только тогда он может продолжить проверку свойств. Он работает так же для вложенных объектов.
Теперь, когда мы глубоко разобрались с оператором Optional Chaining, надеюсь, вы сочтете его простым и легким в реализации.
Вывод
Необязательная цепочка - это простой и легкий способ обхода сложных вложенных объектов с помощью оператора using?.. Вопросительный знак? и точка. делает вещи отсортированными как всегда, и то же самое происходит и с Optional Chaining😄.
Иногда проблема кажется более сложной и трудной, но когда мы входим в нее, это оказывается проще, чем мы думаем, и мы делаем это возможным. Однозначно мы получим решение НЕ ВАЖНО НАСКОЛЬКО СЛОЖНАЯ ПРОБЛЕМА…
Если вам понравилось читать эту статью, поделитесь, пожалуйста :) Спасибо.
Изучите «JS Bifrost», чтобы увидеть еще серию статей о JavaScript !!!
использованная литература
Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
