Использование метода присваивания, циклов и оператора распространения

Объекты - это мощная часть JavaScript. Они вдохновляют JSON (нотация объектов JavaScript). Как фундаментальный компонент разработки приложений, есть много способов работы с ними.

Это краткое руководство предлагает понимание объектов JavaScript и способы их объединения с помощью простого JavaScript. Ни один из примеров или продемонстрированных концепций не требует специальных библиотек, фреймворков или другого кода. Эти методы будут работать в стандартных средах выполнения JavaScript. Также описаны достоинства каждой техники.

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

Примечание. Примеры в этом руководстве можно запускать прямо в браузере во время чтения. Используйте консоль DevTools для запуска примеров. Чтобы получить помощь по запуску DevTools, см. Руководства для Chrome, Edge, Firefox или Safari.

Объекты JavaScript

Во-первых, объект JavaScript - это набор пар ключ-значение. Сами значения могут быть примитивами JavaScript (строка / текст, число, логическое значение и т. Д.) Или другими объектами. Поскольку объекты могут быть бесконечно вложены в объекты, можно создавать важные структуры данных.

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

Замечание о ECMAScript

ECMAScript (ES) - это спецификация для JavaScript (то есть план). Он поддерживается ECMA International руководящим органом, известным как TC39. В течение многих лет спецификации оставались относительно неизменными. Ситуация изменилась в 2015 году, когда была выпущена новая волна JavaScript с ECMAScript 6 (ES6).

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

Объединение объектов с помощью Object.assign ()

Object.assign() был впервые выпущен в ES2015, поэтому его нельзя найти в устаревших базах кода, но он является обычным явлением в современных средах выполнения JavaScript.

Код прост:

Вот результат:

Object.assign() поддерживает любое количество параметров объекта, поэтому можно комбинировать сразу несколько объектов, например Object.assign(obj_a, obj_b, obj_c). Это простой подход к объединению объектов, но есть и некоторые неожиданные варианты поведения.

Предупреждение: перезапись атрибутов

Иногда разные объекты имеют общие имена ключей, что создает потенциальный конфликт. Какое ключевое значение следует соблюдать?

Когда следует использовать Object.assign ()?

Этот подход лучше всего подходит в ситуациях, когда известно, что имена ключей не конфликтуют, или предпочтительна перезапись значений.

Распространенным вариантом использования, когда предпочтительнее перезапись конфликтующих значений, является использование значений по умолчанию. Рассмотрим создание класса транспортных средств, в котором автомобиль по умолчанию имеет четыре колеса и четыре двери. Значения по умолчанию подходят для большинства седанов, но у купе только две двери. В этом случае предпочтительнее изменить значение по умолчанию «четырехдверный».

Объединение объектов с помощью петель

Объекты также можно комбинировать с петлями. Это более ручной процесс, который обеспечивает больший контроль над тем, как объединяются объекты.

Рассмотрим те же объекты, что и в примере Object.assign(), но обратите внимание, что простой цикл for используется для добавления объектов от одного к другому.

Результат этого точно такой же, как результат Object.assign(). Основное различие между двумя подходами - это контроль над тем, как происходит слияние (строки 16-18).

Когда следует использовать циклы for для объединения объектов?

Этот подход может быть эффективным всякий раз, когда необходим больший контроль над процессом слияния.

Обработка на заказ

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

Есть много других манипуляций с данными, которые могут быть выполнены во время слияния благодаря гибкости объектов JavaScript.

Устаревший код

Если вы работаете со старым кодом, например с кодом, который должен выполняться в Internet Explorer и других старых браузерах, этот подход является одним из лучших вариантов. Эти браузеры используют более старый стандарт ECMAScript 5. Object.assign недоступен в ECMAScript 5.

Перечислимость (скрытые свойства)

Каждое свойство объекта JavaScript определяется четырьмя базовыми свойствами конфигурации: enumerable, writable, configurable и value (подробности см. В Object.defineProperty()). Перечислимость объекта свободно переводится как «скрытый атрибут». Неперечислимые свойства объекта не возвращаются в Object.keys(), Object.assign() или других подобных функциях. Это означает, что атрибут все еще существует, но его нелегко увидеть или использовать.

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

Объединение объектов с оператором распространения

Синтаксис распространения был выпущен в ECMAScript 6 (ES6). Он не был разработан исключительно для слияния объектов, но он позволяет использовать уникальную технику, подобную Object.assign().

Нет разницы в результатах между этим подходом и Object.assign().

Когда следует использовать операторы распространения для объединения объектов?

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

Постарайтесь не использовать это только потому, что синтаксис может быть более приятным. Это работает, но такой подход встречается гораздо реже. Даже некоторые опытные разработчики, которые не работают с JavaScript каждый день, могут быть не знакомы с синтаксисом распространения. Некоторые опытные разработчики могут даже не быть знакомы с Object.assign(), если они не используют JavaScript каждый день, но гораздо легче понять, что это метод. Спросите себя, насколько просто найти в Google три точки (…) и их значение, особенно если вы не знаете, что в JavaScript есть операторы распространения.

Глубокое слияние

Object.assign() и оператор распространения - это методы поверхностного слияния. Неглубокое слияние объединяет атрибуты только на первом уровне объекта. Глубокое слияние объединяет объекты на первом уровне, но также объединяет вложенные атрибуты и объекты.

Нет удобного способа выполнить глубокое слияние с помощью простого JavaScript. Есть библиотеки, реализующие глубокое слияние. По опыту автора, необходимость в глубоком слиянии возникает нечасто. Часто нет необходимости включать библиотеку глубокого слияния в базу кода, когда более простые методы предлагают достаточные возможности.

Заключение

В этом руководстве описаны основные способы комбинирования объектов JavaScript. Работа с данными в объектах JavaScript может быть простой. Это также может быть сложно с расширенными структурами данных. Есть инструменты для обоих типов задач.

Комбинировать объекты данных JavaScript просто. Однако объекты данных - не единственный тип объекта в JavaScript.

Сам язык JavaScript использует прототипное наследование. В сверх-упрощенных / грубых терминах это означает, что все является объектом. Каждый объект имеет атрибут non-enumerable[[Prototype]] (__proto__), раскрывающий многие внутренние механизмы объекта JavaScript. Описание прототипного наследования выходит за рамки этой статьи, но его стоит изучить. Почему? Эти методы можно использовать для объединения любого объекта JavaScript, а не только данных.

Эта статья основана на оригинальном ответе Quora.