ES6 — Объекты

JavaScript поддерживает расширение типов данных. Объекты JavaScript являются отличным способом определения пользовательских типов данных.

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

Синтаксические варианты определения объекта обсуждаются далее.

Инициализаторы объектов

Как и примитивные типы, объекты имеют буквальный синтаксис: фигурные скобки ({и}). Ниже приводится синтаксис для определения объекта.

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
} 

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

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

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

objectName.propertyName 

Пример: инициализаторы объектов

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

Приведенный выше пример определяет объект person. Объект имеет три свойства. Третье свойство относится к функции.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Tom 
Hanks 
Hello!!

В ES6, присваивая значение свойства, которое соответствует имени свойства, вы можете опустить значение свойства.

пример

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

Приведенный выше фрагмент кода определяет объект baz . Объект имеет свойство foo . Значение свойства здесь опущено, поскольку ES6 неявно присваивает значение переменной foo ключу объекта foo.

Ниже приведен эквивалент ES5 приведенного выше кода.

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

bar

С этим сокращенным синтаксисом механизм JS ищет в области видимости переменную с тем же именем. Если он найден, то значение этой переменной присваивается свойству. Если он не найден, выдается ошибка ссылки.

Конструктор Object ()

JavaScript предоставляет специальную функцию конструктора Object () для создания объекта. Оператор new используется для создания экземпляра объекта. Для создания объекта за новым оператором следует метод конструктора.

Ниже приводится синтаксис для определения объекта.

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value 

Ниже приводится синтаксис для доступа к свойству.

Object_name.property_key                    
OR              
Object_name["property_key"]

пример

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Ford 
Mustang 
1987

Неназначенные свойства объекта не определены.

пример

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

undefined

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

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

пример

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Ford

Функция конструктора

Объект может быть создан с помощью следующих двух шагов —

Шаг 1 — Определите тип объекта, написав функцию конструктора.

Ниже приводится синтаксис для того же.

function function_name() { 
   this.property_name = value 
}

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

Шаг 2 — Создайте экземпляр объекта с новым синтаксисом.

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

Ключевое слово new вызывает конструктор функции и инициализирует ключи свойств функции.

Пример — Использование конструктора функций

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

Приведенный выше пример использует конструктор функции для определения объекта.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Ford 
F123 

Новое свойство всегда можно добавить к ранее определенному объекту. Например, рассмотрим следующий фрагмент кода —

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Ford 
F123

Метод Object.create

Объекты также можно создавать с помощью метода Object.create () . Это позволяет вам создавать прототип для объекта, который вы хотите, без необходимости определять функцию конструктора.

пример

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

Приведенный выше пример определяет объектные роли и устанавливает значения по умолчанию для свойств. Создаются два новых экземпляра, которые переопределяют значение свойств по умолчанию для объекта.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Admin 
Guest

Функция Object.assign ()

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

Ниже приводится синтаксис для того же.

Object.assign(target, ...sources)    

Пример — клонирование объекта

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Tom 
E1001

Пример — объединение объектов

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Примечание. В отличие от копирования объектов, при объединении объектов более крупный объект не сохраняет новую копию свойств. Скорее он содержит ссылку на свойства, содержащиеся в исходных объектах. Следующий пример объясняет эту концепцию.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11 

Удаление свойств

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

пример

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

false

Фрагмент кода удаляет свойство из объекта. В примере выводится значение false, поскольку оператор in не находит свойство в объекте.

Сравнение объектов

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

Пример 1 — Ссылки на разные объекты

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

В приведенном выше примере val1 и val2 — это два разных объекта, которые ссылаются на два разных адреса памяти. Следовательно, при сравнении на равенство оператор вернет false.

Пример 2 — Ссылка на один объект

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

В приведенном выше примере содержимое в val1 назначено для val2, то есть ссылки на свойства в val1 совместно используются с val2. Поскольку объекты теперь совместно используют ссылку на свойство, оператор равенства вернет true для двух разных объектов, которые ссылаются на два разных адреса памяти. Следовательно, при сравнении на равенство оператор вернет false.

Деструктуризация объекта

Термин « деструктурирование» относится к разрушению структуры предприятия. Синтаксис деструктурирующего присваивания в JavaScript позволяет извлекать данные из массивов или объектов в отдельные переменные. То же самое иллюстрируется в следующем примере.

пример

var emp = { name: 'John', Id: 3 } 
var {name, Id} = emp 
console.log(name) 
console.log(Id)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

John 
3

Примечание. Чтобы включить деструктурирование, выполните файл в узле как узел — harmony_destructuring file_name .