Новшества объектных литералов в JavaScript ES6
Материал, перевод которого мы представляем вашему вниманию, посвящён исследованию особенностей объектных литералов в JavaScript, в частности — новшеств, которые появились в свежих версиях стандарта ECMAScript.
JavaScript обладает мощной и удобной возможностью создания объектов с использованием объектных литералов. Стандарт ES2015 (ES6) упрощает работу с объектами при создании приложений для современных браузеров (кроме IE) и для платформы Node.js.
Основы
Создание объектов в некоторых языках может требовать больших затрат ресурсов, под которыми мы имеем в виду и рабочее время программиста, и вычислительные ресурсы систем. В частности, речь идёт о том, что, прежде чем создавать объекты, необходимо описывать классы (скажем, с помощью ключевого слова class ). В JavaScript объекты можно создавать очень быстро и просто, без необходимости выполнения каких-либо предварительных действий. Рассмотрим пример:
В программировании часто используются «одноразовые» объекты. Они хранят настройки и другие данные, они применяются в качестве параметров функций, в качестве значений, возвращаемых функциями, и в других ситуациях. Объектные литералы JavaScript в подобных случаях оказываются очень кстати, а ES6 расширяет их возможности.
Инициализация объектов из переменных
Свойства объектов часто создают из переменных, назначая им те же имена, которые уже назначены этим переменным. Например:
В ES6 больше не нужно повторять имена переменных:
Этот приём может оказаться полезным для возвращаемых объектов при использовании паттерна Revealing Module, который позволяет создавать пространства имён для различных фрагментов кода для того, чтобы избежать конфликтов имён. Например:
Возможно, вы видели как этот приём используется в ES6-модулях:
Сокращённый синтаксис объявления методов объектов
При объявлении методов объектов в ES5 необходимо использовать ключевое слово function :
Теперь, в ES6, так больше можно не делать. Здесь допустим следующий сокращённый способ объявления методов:
Надо отметить, что здесь нельзя использовать стрелочные функции ES6 ( => ), так как у методов должны быть имена. Однако стрелочные функции можно использовать если явно назначать имена методам (как в ES5). Например:
Динамические ключи
В ES5 нельзя было использовать переменные в качестве имён ключей, хотя ключ, имя которого задаётся переменной, можно было добавить после создания объекта. Например:
В ES6 ключи можно назначать динамически, помещая выражение, определяющее имя, в квадратные скобки ( [] ). Например:
Для создания ключа можно использовать любое выражение:
Динамические ключи можно использовать и для методов, и для свойств:
Другой вопрос — надо ли создавать свойства и методы с динамически генерируемыми именами. Читабельность кода, в котором используется этот приём, может ухудшиться. Возможно, если вы сталкиваетесь с ситуациями, в которых динамические имена кажутся уместными, лучше будет подумать о применении для создания объектов фабричных функций или классов.
Деструктурирование
Деструктурирование — это извлечение свойств объектов и назначение их переменным. Часто в ходе разработки приложений необходимо извлечь значение свойства объекта и записать его в переменную. В ES5 нужно было описывать это следующим образом, пользуясь командами доступа к свойствам:
ES6 поддерживает деструктурирование. Можно создать переменную с тем же именем, которое носит соответствующее свойство объекта, и сделать следующее:
Переменные, в которые попадают значения свойств объекта, могут, на самом деле, иметь любые имена, но в том случае, если они отличаются от имён свойств, необходимо пользоваться конструкцией < propertyName: newVariable >:
Объекты, обладающие сложной структурой, в которые вложены массивы и другие объекты, тоже можно использовать в операциях деструктурирующего присваивания:
Поначалу всё это может показаться сложным, однако, с этим не так уж и тяжело разобраться, главное — помнить следующее:
Эта конструкция нормально воспринимается системой при объявлении переменных:
Если же переменные уже объявлены, надо заключать выражение в круглые скобки:
В результате, занимаясь деструктурированием, следует внимательно относиться к коду и не смешивать объявленные и необъявленные переменные.
Деструктурирование — это приём, который может пригодиться во многих ситуациях.
Параметры функций по умолчанию
Если функция нуждается в длинном списке аргументов, обычно проще передать ей один объект с параметрами. Например:
В ES5 было необходимо разбирать объекты с параметрами для того, чтобы, в том случае, если в таких объектах нет того, чего нужно, назначить соответствующим параметрам значения по умолчанию:
В ES6 любым параметрам можно назначать значения по умолчанию:
Затем можно воспользоваться деструктурированием для извлечения из объекта значений, и, при необходимости, для назначения значений по умолчанию:
Тут стоит отметить, что подобный код, возможно, будет сложнее читать, чем более традиционный, хотя это — вопрос личных пристрастий программиста.
Разбор объектов, возвращаемых функциями
Функции могут возвращать лишь одно значение, но это значение может быть объектом с сотней свойств или методов. В ES5 необходимо было сначала получить возвращаемый объект, а уже после этого можно было извлекать из него значения:
Деструктурирование упрощает этот процесс. Теперь всё это можно сделать без необходимости сохранения объекта в отдельной переменной и последующего его разбора:
Синтаксис оставшихся параметров и оператор расширения ES2018 (ES9)
=В ES2015 синтаксис оставшихся параметров и оператор расширения (и тот и другой выглядят как три точки, … ) применялись лишь при работе с массивами. В ES2018 похожий функционал можно использовать и для работы с объектами:
Похожий подход можно использовать и для передачи неких значений в функцию:
Обратите внимание на то, что в подобных ситуациях можно использовать лишь одно выражение с тремя точками, в конце списка. Кроме того, для объектов, вложенных в другие объекты, это не работает.
Оператор расширения можно использовать внутри объектов:
Синтаксис оставшихся параметров и оператор расширения пока пользуются не слишком широкой поддержкой. В настоящий момент ими, без дополнительных усилий, можно пользоваться в браузерах Chrome и Firefox, и при разработке для платформы Node.js версии 8.6 и выше.
Итоги
Объектные литералы всегда были полезной возможностью JavaScript. Новшества, появляющиеся в JavaScript начиная со стандарта ES2015, не несут в себе фундаментальных изменений, но они экономят время программиста и помогают писать более чистый и лаконичный код.
Уважаемые читатели! Какими способами создания JS-объектов вы пользуетесь чаще всего?
Основы языка JavaScript.
Лексемы
Лексемы (tokens) — это наименьшие отдельные слова, фразы, символы, которые может распознать JavaScript. Во время интерпретации JavaScript-кода браузер разбивает сценарии на лексемы, игнорируя при этом комментарии и лишние пробелы. Лексемы подразделяются на четыре категории: идентификаторы, ключевые слова, литералы и операторы. Как и в любом компьютерном языке, существует множество способов подачи компьютеру различных директив за счет различной компоновки лексем. Синтаксис (syntax) языка — это набор правил и ограничений, используемый при комбинировании лексем.
Идентификаторы
Идентификаторы (identifiers) — суть ни что иное как имена переменных, методов и объектов. Они состоят из комбинации букв и цифр. Некоторые имена уже встроены в язык JavaScript и поэтому зарезервированы от использования. Независимо от ключевых слов, можно определять собственные, притом значащие идентификаторы. Разумеется, для этого существует несколько правил:
Ключевые слова и зарезервированные слова
Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие ядро языка программирования. В JavaScript они выполняют особые функции, например, объявление новых переменных, функций, принятие решений на основе текущего состояния компьютера или организация цикла внутри приложения.
Зарезервированные слова (reserved words) — это идентификаторы, которые не могут использоваться в качестве имен переменных, функций, объектов и методов как сейчас, так и в будущем.
Литералы
Литералы (literals) — это числа или строки, представляющие постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария.
Целочисленные литералы
Целочисленные литералы могут быть представлены в десятичном (десятичная система счисления), восьмеричном (восьмеричная система счисления) или шестнадцатеричном (шестнадцатеричная система счисления) формате. Целочисленный литерал в десятичном формате может содержать любую последовательность цифр, но не начинаться с 0. Ноль в начале целочисленного литерала определяет восьмеричный формат. В восьмеричной записи целочисленный литерал может включать последовательность цифр от 0 до 7. Для определения шестнадцатеричного формата числа перед литералом должно ставится Ох или ОХ. Шестнадцатеричные целочисленные литералы могут содержать цифры от 0 до 9 и буквы а — f или А — F. Рассмотрим несколько примеров:
Литералы с плавающей точкой
Литералы с плавающей точкой представляют десятичные числа с дробной частью. Их можно выражать в стандартном и экспоненциальном форматах. Экспоненциальный формат подразумевает использование е или Е для определения порядка числа. И десятеричное число, и показатель степени могут быть со знаком или без знаковыми (положительные и отрицательные):
Логические литералы
В JavaScript реализован логический тип данных, поэтому поддерживаются два литерала true и false, представляющие соответственно значения логической 1 и 0. Если вы новичок в области программирования, не отчаивайтесь — очень скоро вы поймете всю важность true и false. Ключевые слова true и false должны записываться строчными буквами. Таким образом, TRUE и FALSE прописными буквами остаются доступными для применения в качестве собственных идентификаторов. Однако, во избежание недоразумений, использовать их в таком контексте не рекомендуется.
Строковые литералы
Строковый литерал — это ноль и более символов, заключенных в двойные (“”) или одиночные (“) кавычки. Несмотря на то что JavaScript разрешает использовать оба типа кавычек, для строки лучше применять один и тот же тип кавычек как в начале, так и в конце. Рассмотрим примеры строковых литералов:
Операции
Операции (operators) — это символы или идентификаторы, которые представляют способ оценки или манипуляции комбинациями выражений. Наиболее используемой общей операцией является далеко не операция присваивания. В примере х=10 как собственно 10, так и переменная х — это выражения. Когда JavaScript встречает операцию присваивания между двумя выражениями, выполняются действия в соответствие с правилами оператора присваивания. В рассматриваемом случае значение выражения в правой части присваивается переменной в левой части. Наряду с арифметическими, JavaScript поддерживает 30 других операций.
Шаблонные строки
Синтаксис
Описание
Многострочные литералы
Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:
То же с использованием шаблонных литералов:
Интерполяция выражений
Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:
Теперь, при помощи шаблонных литералов, вам доступен «синтаксический сахар», делающий подстановки вроде той более читабельными:
Вложенные шаблоны
В ES2015 с шаблонными литералами без вложения:
В ES2015 с вложенными шаблонными литералами:
Теговые шаблоны
Расширенной формой шаблонных литералов являются теговые шаблоны. Они позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. В итоге, функция должна вернуть собранную строку (или что-либо совсем иное, как будет показано далее). Имя функции может быть любым.
Функция тега не обязана возвращать строку, как показано в примере ниже:
Сырые строки
Теговые шаблоны и экранирование символов
Поведение в ES2016
В ECMAScript 2016 теговые шаблоны следуют правилам экранирования следующих символов:
Поведение в ES2018
Теговые шаблоны должны позволять встраивать языки (например, DSLs или LaTeX), в которых широко используются многие другие экранирования. Предложение Редакция шаблонных литералов (уровень 4, одобренный к добавлению в стандарт ECMAScript 2018) устраняет синтаксические ограничения экранирования теговых шаблонов в ECMAScript.
Однако, некорректное экранирование символов по-прежнему нужно отображать в «приготовленном» отображении. Оно показывается в виде undefined в «приготовленном» массиве:
Заметьте, что ограничение на экранирование символов проявляется лишь в теговых шаблонах, и не проявляется в нетеговых шаблонных литералах:
Путь к пониманию шаблонных литералов в JavaScript
Спецификация ECMAScript, вышедшая в 2015 году (ES6), добавила в JavaScript новую возможность — шаблонные литералы (template literals). Шаблонные литералы дают нам новый механизм создания строковых значений. Этот механизм отличается множеством мощных возможностей, среди которых — упрощение создания многострочных конструкций и использование местозаполнителей для внедрения в строки результатов вычисления выражений. Кроме того, тут имеется и ещё одна возможность — теговые шаблоны (tagged template literals). Это — расширенная форма шаблонных литералов. Теговые шаблоны позволяют создавать строки с использованием выражений, находящихся внутри строк, и с применением особых функций. Всё это расширяет возможности программистов по работе со строками, позволяя, например, создавать динамические строки, которые могут представлять собой URL, или писать функции для тонкой настройки HTML-элементов.
Из этого материала вы узнаете о различиях между обычными строковыми значениями, задаваемыми с помощью одинарных или двойных кавычек, и шаблонными литералами. Вы ознакомитесь с различными способами объявления строк с разными характеристиками, включая многострочные строки и динамические строки, меняющиеся в зависимости от значения некоей переменной или некоего выражения. Вы научитесь работать с теговыми шаблонами и увидите реальные примеры их использования.
Объявление строк
В этом разделе мы вспомним о том, как объявляются строки, описываемые с использованием одинарных или двойных кавычек, а затем взглянем на то, как то же самое делается при применении шаблонных литералов.
Строку в JavaScript можно представить как последовательность символов, заключённую в одинарные кавычки ( ‘ ‘ ):
Ещё один вариант объявления строк заключается в использовании двойных кавычек ( » » ):
В JavaScript между такими строками нет серьёзных различий. В других языках использование разных кавычек при объявлении строк может означать, например, то, что строки одного вида можно интерполировать, а другие — нет. Здесь мы понимаем под «интерполяцией» возможность вычисления значений выражений-местозаполнителей, играющих роль динамических частей строк и участвующих в формировании итоговых строковых значений.
Какие именно строки использовать, объявленные с одинарными или с двойными кавычками, это, по большей части, дело личных предпочтений программиста и используемых им соглашений по написанию кода. Но если в строке, ограниченной кавычками одного из этих видов, встречаются кавычки того же вида, их нужно экранировать. Кавычки же другого вида в подобных строках в экранировании не нуждаются.
Вызов пары методов log() приведёт к тому, что в консоль попадут две одинаковых строки.
Шаблонные литералы, с другой стороны, объявляют с использованием обратных кавычек ( ` ` ):
Здесь не нужно экранировать одинарные или двойные кавычки:
Но обратные кавычки в таких строках экранировать необходимо:
Шаблонные литералы имеют все возможности, которые есть у обычных строк. Поэтому вы, вероятно, можете заменить все строки в своём проекте на шаблонные литералы и при этом ничего не потерять. Однако чаще всего в соглашениях, касающихся написания кода, указывают, что шаблонные литералы должны использоваться только тогда, когда нужны их особые возможности. Обычные же строки всегда, ради поддержания единообразия кода, объявляют с использованием или одинарных, или двойных кавычек. Кодовую базу проекта, при написании которой следуют этому стандарту, будет легче читать разработчикам, с ней ранее не знакомым.
Теперь, когда мы поговорили об объявлении строк с использованием одинарных, двойных и обратных кавычек, мы можем перейти к разбору первой сильной стороны шаблонных литералов. А именно — к возможности описания многострочных строк.
Многострочные строки
В этом разделе мы сначала поговорим о том, как многострочные строки объявлялись до ES6, а потом остановимся на том, как решение этой задачи упрощают шаблонные литералы.
Изначально, если нужно было ввести в текстовом редакторе строковую переменную, состоящую из нескольких строк, использовался оператор конкатенации строк. Следующий пример конкатенации строк иллюстрирует эту идею:
Ещё один подход к записи подобных строк в редакторах кода заключается в использовании символа обратной косой черты ( \ ), который ставится в конце фрагментов строк, и после которого, с новой строки, располагаются новые фрагменты:
При таком подходе сохраняются, например, пробелы, находящиеся перед фрагментами строки, но значение переменной, если вывести его в консоль, снова будет представлено единственной строкой:
Создать настоящую многострочную строку можно, используя символ перевода строки ( \n ):
Если вывести эту константу в консоль, то выглядеть текст будет так же, как в редакторе:
Тут надо учитывать то, что если между символами обратных кавычек содержатся пробелы, используемые для выравнивания кода, эти пробелы попадут в итоговый шаблонный литерал. Рассмотрим следующий пример:
Хотя такой стиль написания кода упрощает его чтение, то, что попадёт в консоль после его вывода, будет выглядеть не очень-то привлекательно:
Теперь, разобравшись с многострочными строками, давайте поговорим о том, как в строки, объявленные разными способами, можно встраивать результаты вычисления различных выражений, то есть — поговорим об интерполяции выражений.
Интерполяция выражений
Раньше, до выхода ES6, для создания динамических строк, в формировании которых участвовали значения переменных или выражения, использовалась конкатенация:
Если вывести dynamicString в консоль, то получится следующее:
При выводе dynamicString в консоль получится следующий результат:
Распространённый пример встраивания значений в строки — это создание динамических URL. Использование для этой цели конкатенации приводит к появлению громоздких и неудобных конструкций. Например, вот функция, которая генерирует строку доступа OAuth:
Если вывести в консоль результат работы этой функции, то получится следующее:
При использовании интерполяции программистам больше не нужно внимательно следить за кавычками, ограничивающими фрагменты строки, и за тем, где именно расположен оператор конкатенации. Вот — тот же пример, переписанный с использованием шаблонных литералов:
Результат работы функции будет таким:
Для того чтобы убрать пробелы в начале и в конце строки, создаваемой с помощью шаблонного литерала, можно воспользоваться методом trim(). Например, в следующем фрагменте кода для создания HTML-элемента с настраиваемой ссылкой используется стрелочная функция:
Из итоговой строки будут удалены начальные и конечные пробелы, что позволит обеспечить правильность рендеринга элемента:
Интерполировать можно целые выражения, а не только переменные. Например — как здесь, где в строку встраивается результат сложения двух чисел:
Этот механизм может оказаться особенно полезным при использовании тернарного оператора, который позволяет проверять условия при формировании строки:
Теперь вы знаете о том, какую пользу можно извлечь из интерполяции выражений при применения шаблонных литералов. В следующем разделе мы пойдём ещё дальше и исследуем теговые шаблоны, поговорим о работе с выражениями, передаваемыми в области, соответствующие местозаполнителям.
Теговые шаблоны
Теговые шаблоны являются расширенной формой шаблонных литералов. Теговые шаблоны начинаются с теговой функции, которая разбирает шаблонный литерал, давая разработчику более высокий уровень контроля над процессом формирования динамических строк.
В результате выполнения этого кода в консоль попадёт следующее:
В популярных JavaScript-библиотеках можно найти несколько примеров использования теговых шаблонов. Так, в библиотеке graphql-tag используется шаблонный литерал gql для разбора строк запроса GraphQL и преобразования их в абстрактное синтаксическое дерево (abstract syntax tree, AST), понятное GraphQL:
Функции теговых шаблонов используются и в библиотеке styled-components, что позволяет создавать новые компоненты React из обычных элементов DOM и применять к ним дополнительные CSS-стили:
Кроме того, можно пользоваться стандартным методом String.raw, применяя его к теговым шаблонам для того чтобы предотвратить обработку управляющих последовательностей:
В консоль после выполнения этого кода попадёт следующее:
Итоги
В этом материале мы вспомнили основные сведения об обычных строковых литералах, оформляемых с помощью одинарных или двойных кавычек, а так же — поговорили о шаблонных литералах и о теговых шаблонах. Шаблонные литералы упрощают решение множества задач, связанных с обработкой строк. В частности, речь идёт о встраивании в строки различных значений и о создании многострочных строк без использования конкатенации или экранирования. Теговые шаблоны — это полезная продвинутая возможность шаблонных литералов, которая используется во многих популярных библиотеках.
А вы пользуетесь шаблонными литералами?
Объекты
Как мы знаем из главы Типы данных, в JavaScript существует 8 типов данных. Семь из них называются «примитивными», так как содержат только одно значение (будь то строка, число или что-то другое).
Объекты же используются для хранения коллекций различных значений и более сложных сущностей. В JavaScript объекты используются очень часто, это одна из основ языка. Поэтому мы должны понять их, прежде чем углубляться куда-либо ещё.
Объект может быть создан с помощью фигурных скобок <…>с необязательным списком свойств. Свойство – это пара «ключ: значение», где ключ – это строка (также называемая «именем свойства»), а значение может быть чем угодно.
Мы можем представить объект в виде ящика с подписанными папками. Каждый элемент данных хранится в своей папке, на которой написан ключ. По ключу папку легко найти, удалить или добавить в неё что-либо.
Пустой объект («пустой ящик») можно создать, используя один из двух вариантов синтаксиса:
Обычно используют вариант с фигурными скобками <. >. Такое объявление называют литералом объекта или литеральной нотацией.
Литералы и свойства
При использовании литерального синтаксиса <. >мы сразу можем поместить в объект несколько свойств в виде пар «ключ: значение»:
В объекте user сейчас находятся два свойства:
Можно сказать, что наш объект user – это ящик с двумя папками, подписанными «name» и «age».
Мы можем в любой момент добавить в него новые папки, удалить папки или прочитать содержимое любой папки.
Для обращения к свойствам используется запись «через точку»:
Значение может быть любого типа. Давайте добавим свойство с логическим значением:
Для удаления свойства мы можем использовать оператор delete :
Имя свойства может состоять из нескольких слов, но тогда оно должно быть заключено в кавычки:
Последнее свойство объекта может заканчиваться запятой:
Это называется «висячая запятая». Такой подход упрощает добавление, удаление и перемещение свойств, так как все строки объекта становятся одинаковыми.
Есть ещё один способ сделать константами свойства объекта, который мы рассмотрим в главе Флаги и дескрипторы свойств.
Квадратные скобки
Для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает:
Для таких случаев существует альтернативный способ доступа к свойствам через квадратные скобки. Такой способ сработает с любым именем свойства:
Сейчас всё в порядке. Обратите внимание, что строка в квадратных скобках заключена в кавычки (подойдёт любой тип кавычек).
Квадратные скобки также позволяют обратиться к свойству, имя которого может быть результатом выражения. Например, имя свойства может храниться в переменной:
Здесь переменная key может быть вычислена во время выполнения кода или зависеть от пользовательского ввода. После этого мы используем её для доступа к свойству. Это даёт нам большую гибкость.
Запись «через точку» такого не позволяет:
Вычисляемые свойства
Мы можем использовать квадратные скобки в литеральной нотации для создания вычисляемого свойства.
По сути, пример выше работает так же, как и следующий пример:
…Но первый пример выглядит лаконичнее.
Мы можем использовать и более сложные выражения в квадратных скобках:
Квадратные скобки дают намного больше возможностей, чем запись через точку. Они позволяют использовать любые имена свойств и переменные, хотя и требуют более громоздких конструкций кода.
Подведём итог: в большинстве случаев, когда имена свойств известны и просты, используется запись через точку. Если же нам нужно что-то более сложное, то мы используем квадратные скобки.
Свойство из переменной
В реальном коде часто нам необходимо использовать существующие переменные как значения для свойств с тем же именем.
В примере выше название свойств name и age совпадают с названиями переменных, которые мы подставляем в качестве значений этих свойств. Такой подход настолько распространён, что существуют специальные короткие свойства для упрощения этой записи.
Вместо name:name мы можем написать просто name :
Мы можем использовать как обычные свойства, так и короткие в одном и том же объекте:
Ограничения на имена свойств
Как мы уже знаем, имя переменной не может совпадать с зарезервированными словами, такими как «for», «let», «return» и т.д.
Но для свойств объекта такого ограничения нет:
Иными словами, нет никаких ограничений к именам свойств. Они могут быть в виде строк или символов (специальный тип для идентификаторов, который будет рассмотрен позже).
Все другие типы данных будут автоматически преобразованы к строке.
Например, если использовать число 0 в качестве ключа, то оно превратится в строку «0» :
Как мы видим, присвоение примитивного значения 5 игнорируется.
Мы более подробно исследуем особенности свойства __proto__ в следующих главах Прототипное наследование, а также предложим способы исправления такого поведения.
Проверка существования свойства, оператор «in»
В отличие от многих других языков, особенность JavaScript-объектов в том, что можно получить доступ к любому свойству. Даже если свойства не существует – ошибки не будет!
Также существует специальный оператор «in» для проверки существования свойства в объекте.
Обратите внимание, что слева от оператора in должно быть имя свойства. Обычно это строка в кавычках.
Если мы опускаем кавычки, это значит, что мы указываем переменную, в которой находится имя свойства. Например:
Это когда свойство существует, но содержит значение undefined :
В примере выше свойство obj.test технически существует в объекте. Оператор in сработал правильно.
Цикл «for…in»
К примеру, давайте выведем все свойства объекта user :
Обратите внимание, что все конструкции «for» позволяют нам объявлять переменную внутри цикла, как, например, let key здесь.
Упорядочение свойств объекта
Упорядочены ли свойства объекта? Другими словами, если мы будем в цикле перебирать все свойства объекта, получим ли мы их в том же порядке, в котором мы их добавляли? Можем ли мы на это рассчитывать?
Короткий ответ: свойства упорядочены особым образом: свойства с целочисленными ключами сортируются по возрастанию, остальные располагаются в порядке создания. Разберёмся подробнее.
В качестве примера рассмотрим объект с телефонными кодами:
Если мы делаем сайт для немецкой аудитории, то, вероятно, мы хотим, чтобы код 49 был первым.
Но если мы запустим код, мы увидим совершенно другую картину:
Термин «целочисленное свойство» означает строку, которая может быть преобразована в целое число и обратно без изменений.
То есть, «49» – это целочисленное имя свойства, потому что если его преобразовать в целое число, а затем обратно в строку, то оно не изменится. А вот свойства «+49» или «1.2» таковыми не являются:
…С другой стороны, если ключи не целочисленные, то они перебираются в порядке создания, например:
Таким образом, чтобы решить нашу проблему с телефонными кодами, мы можем схитрить, сделав коды не целочисленными свойствами. Добавления знака «+» перед каждым кодом будет достаточно.
Теперь код работает так, как мы задумывали.
Итого
Объекты – это ассоциативные массивы с рядом дополнительных возможностей.
Они хранят свойства (пары ключ-значение), где:
Чтобы получить доступ к свойству, мы можем использовать:
В JavaScript есть много других типов объектов:
Объекты в JavaScript очень мощные. Здесь мы только немного углубились в действительно огромную тему. Мы будем плотно работать с объектами и узнаем о них больше в следующих частях учебника.
Задачи
Привет, object
Напишите код, выполнив задание из каждого пункта отдельной строкой: