Функция Object.assign () в JavaScript: Полное руководство

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

В JavaScript есть два типа конструкторов,

1. Встроенные конструкторы (массив и объект)
2. Пользовательские конструкторы (определяют свойства и методы для конкретных объектов).

Конструктор объекта создает оболочку объекта для данного значения.

Если значение равно null или undefined, он создаст и вернет пустой объект; В противном случае он вернет объект типа, соответствующего данному значению.

Если значение уже является объектом , он вернет значение.

При вызове в контексте, отличном от конструктора, Object ведет себя идентично новому Object () .

Свойства конструктора объекта

1. Object.length

   Он имеет значение 1.

2. Object.prototype
   

   Он позволяет добавлять свойства ко всем объектам типа Object. Методы конструктора объекта.

JavaScript Object.assign ()

Объект Javascript. assign () — это встроенная функция, используемая для копирования значений всех собственных перечислимых свойств из одного или нескольких исходных объектов в целевой объект. Метод Object.assign () принимает target и sources в качестве параметров и возвращает целевой объект.

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

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

Синтаксис для Метод assign () объекта Javascript выглядит следующим образом.

 Object.assign (target, ... sources) 

Параметры

Параметр target — это целевой объект.

Параметр sources — это объекты, необходимо клонировать.

Возвращаемое значение

Метод Object.assign () возвращает целевой объект.

Пример

Давайте рассмотрим простой пример путем клонирования объекта.

//app.jslet  obj = {имя: 'Крунал', фамилия: 'Латия'}; пусть cloneObj = Object.assign ({}, obj); консоль. log (cloneObj); 

В приведенном выше примере мы определили один объект, а затем создали клон этого объекта с новым объектом. Результат будет следующим.

Итак, у него есть скопировал все свойства из исходного объекта.

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

//app.jslet o1 = {a: 21}; let o2 = {b: 22}; let o3 = {c: 24}; Object.assign (o1, o2, o3); console.log (o1); 

Объединение объектов с одинаковыми свойствами

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

//app.jslet o1 = {a: 21, b: 22, c: 24}; let o2 = {b: 22, c: 24}; let o3 = {c: 24}; let finalObj  = Object.assign ({}, o1, o2, o3); console.log (finalObj); 

Неизменность метода Object.assign ()

Рассмотрим следующий пример. .

//app.jslet obj = {eleven: 'Millie Bobby Brown', mike: 'Finn Wolfhard',}; let objCopy = Object.assign ({}, obj); console.  log (objCopy); objCopy.mike = 'Noah Schnapp'; console.log (objCopy); console.log (obj); 

См. вывод.

  ➜ es git: (мастер) ✗ приложение узла {одиннадцать: 'Милли Бобби Браун', Майк: 'Финн Вулфхард'} {одиннадцать: 'Милли Бобби Браун', Майк: 'Ной Шнапп'} {одиннадцать: 'Милли Бобби Браун »  , mike: 'Finn Wolfhard'} ➜ es git: (master) ✗ 

В приведенном выше коде мы изменили значение свойства ‘mike’ в objCopy Object в ‘ Noah Schnapp ‘, и когда мы регистрируем измененный объект objCopy в консоли, изменения применяются только к objCopy.

Последняя строка кода проверяет, что объект obj не поврежден и не изменился.

Это означает, что мы успешно создали копию исходного объекта без каких-либо ссылок на него.

Ловушка Object.assign () в Javascript

Давайте немного обсудим неглубокое копирование. См. Следующий пример кода.

//app.jslet obj = {a: 11, b: {c: 21,},} let newObj = Object.assign ({}, obj);  console.log ('Первое использование метода Object.assign ()') console.log (newObj); console.log ('----------------------  --------- ') obj.a = 10; console.log (' Изменить свойство "a" объекта obj '); console.log (obj); console.log (newObj); console  .log ('-------------------------------') newObj.a = 19; console.log ('Измените  "a" свойство newObj '); console.log (obj); console.log (newObj); console.log (' --------------------  ----------- ') newObj.bc = 29; console.log (' Изменить свойство "c" newObj  's'); console. log (obj); console.log (newObj); 

См. вывод.

 ➜ es git: (master) ✗ node app Первое использование Object.assign (  ) method {a: 11, b: {c: 21}} ------------------------------- Измените объект "  a "свойство {a: 10, b: {c: 21}} {a: 11, b: {c: 21}} ---------------------  ---------- Измените свойство "a" newObj {a: 10, b: {c: 21}} {a: 19, b: {c: 21}} -------  ------------------------ Измените свойство "c" newObj "b" {a: 10, b: {c: 29}} {  a: 19, b: {c: 29}} ➜ es git: (master) ✗ 

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

А теперь давайте разберемся. Неглубокая копия и глубокая копия в Javascript.

Что такое неглубокая копия в Javascript?

Когда мы говорим, что делаем неглубокая копия массива или объекта, это означает, что мы создаем новые ссылки на примитивные значения внутри объекта, копируя их. Это означает, что изменения в исходном массиве не повлияют на скопированный массив, что могло бы произойти, если бы была скопирована только ссылка на массив (это произошло бы с оператором присваивания =).

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

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

Что такое глубокая копия в Javascript?

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

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

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

Глубокая копия объекта в Javascript

Object.assign () — стандартный способ копирования объекта в JavaScript. То же самое делает и оператор спреда. Обе методологии могут быть эквивалентно использованы для копирования перечислимых свойств объекта в другой объект, причем оператор распространения является более коротким из двух. Они также удобны для объединения объектов, поскольку оба метода автоматически перезаписывают свойства в целевом объекте, которые имеют те же ключи, что и в исходном объекте.

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

Оператор распространения и объект. Метод assign () может создавать только мелкие копии объектов. Это означает, что глубоко вложенные значения внутри скопированного объекта помещаются туда для ссылки на исходный объект. Если мы изменим глубоко вложенное значение скопированного объекта, мы, следовательно, в конечном итоге изменим значение в исходном объекте.

JSON.parse (JSON.stringify (object)) ;

Я уже написал одну статью о том, как мы можем анализировать JSON в Javascript. Предположим, вы не знаете, что делает json.parse (), тогда прочтите эту статью. Теперь это устраняет проблему вышеупомянутой проблемы.

Это устраняет проблему, которая у нас была ранее. Теперь у newObj.b есть копия, а не ссылка! Это способ глубокого копирования объектов.

См. Следующий пример кода.

//app.jslet obj = {a: 11, b: {c:  21,},} let newObj = JSON.parse (JSON.stringify (obj)); obj.bc = 29; console.log (obj); console.log (newObj); 

См. вывод.

 ➜ es git: (master) ✗ node app {a: 11, b: {c: 29}} {a: 11, b: {c: 21}} ➜ es  git: (master) ✗ 

Тестирование Object.assign () и оператора распространения

Оператор распространения объекта {… obj } похож на Object.assign (). Итак, вопрос в том, какой из них использовать? И оказывается, что ответ немного более тонок, чем вы могли ожидать.

Основная идея оператора распространения объекта и Object.assing () того же самого, чтобы создать новый простой объект с помощью собственные свойства существующего объекта.

Для проверки производительности мы будем использовать библиотеку тестов.

Вы можете установить библиотеку тестов, используя следующую команду.

 npm install --save benchmark 

Теперь напишите следующий код внутри файла app.js.

 const Benchmark = require ('benchmark  '); const suite = new Benchmark.Suite; const obj = {prop:' krunal ', attr:' ankit '}; suite.  add ('Оператор распространения', function () {({data: 'rushabh', ... obj});}).  add ('Object.assign ()', function () {Object.assign ({data: 3}, obj);}).  on ('цикл', функция (событие) {console.log (String (event.target));}).  on ('complete', function () {console.log ('Самый быстрый' + this.filter ('самый быстрый'). map ('name'));}).  run ({'async': true}); 

Вывод

 Оператор распространения x 11 986 798 операций/сек ± 4,60% (  Выборка 74 прогонов) Object.assign () x 11734,098 операций в секунду ± 5,52% (выборка 74 прогонов) Самый быстрый - оператор распространения, Object.assign () ➜ узел appSpread Operator x 14 660 760 операций в секунду ± 1,03% (выборка 84 прогонов) Объект  .assign () x 14 409 887 операций/сек ± 0,85% (выборка 85) Самый быстрый - узел Spread Operator➜ appSpread Operator x 14 382 964 операций/сек ± 1,30% (выборка 78 прогонов) Object.assign () x 13 730 209 операций/сек ± 1,00  % (Выборка 86 прогонов) Самый быстрый - узел Spread Operator➜ appSpread Operator x 14 540 831 операций/сек ± 1,19% (выборка 78 прогонов) Object.assign () x 14 520 784 операций/сек ± 0,69% (выборка 86 прогонов) Самая высокая скорость Object. assign () 

Вы можете видеть, что оператор Object.assign () и Spead взаимозаменяемы, и оба они быстрее. Но если вы предоставите пустой объект, то оператор Spread будет даже быстрее, чем Object.assign ().

Целью тестирования является оценка чего-либо путем сравнения со стандартной процедурой. Однако вопрос здесь в том, зачем нам нужен бенчмаркинг в случае программирования. Тестирование кода означает, насколько быстро выполняется код и где находится узкое место.

В этом примере мы видели сравнение между Object.assign () и Spread Operator, и мы экспериментировали с модуль тестирования.

Object.assign () изменяет объект на месте для запуска установщиков ES6. Если вы предпочитаете неизменяемые методы, то явным победителем станет оператор распространения объекта. С помощью Object.assign () вы всегда должны передавать пустой объект {} в качестве первого аргумента.

Еще одно связанное отличие состоит в том, что оператор распространения определяет новые свойства, тогда как Object.assign () устанавливает их. Object.assign () вызывает сеттеры, определенные в Object.prototype, тогда как оператор распространения — нет.

Итак, это для сравнения.

Заключение

Object.assign () и оператор распространения позволяют нам делать только мелкие копии объектов в JavaScript. Глубоко вложенные значения помещаются туда просто как ссылка на исходный объект.

Наконец, Object.assign () в примере Javascript завершен.

Рекомендуемые сообщения

Javascript Object.freeze ()

Javascript Object.toString ()

Javascript Object.values ()

Javascript Object.keys ()

Javascript Object.create ()