ES6 - 对象

ES6 对象

JavaScript支持扩展数据类型。JavaScript对象是定义自定义数据类型的好方法。

一个对象是一个包含一组键值对的实例。与原始数据类型不同，对象可以表示多个或复杂的值，并可以改变其使用期限。值可以是标量值或函数，甚至可以是其他对象的数组。

进一步讨论定义对象的句法变体。

对象初始化器

像原始类型一样，对象具有字面语法：curly bracesv（{和}）。以下是定义对象的语法。

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())

上面的例子定义了一个对象人。该对象有三个属性。第三个属性是指一个函数。

在成功执行上述代码时，会显示以下输出。

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（）的构造函数来构建对象。新运算符用于创建对象的实例。要创建一个对象，新的操作符后面跟着构造方法。

以下是定义对象的语法。

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中，对象是引用类型。两个不同的对象永远不会相等，即使它们具有相同的属性。这是因为它们指向一个完全不同的内存地址。只有那些共享公共参考的对象才能比较真实。

示例1 - 不同的对象引用

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

在上面的例子中，val1和val2是两个不同的对象，它们指向两个不同的内存地址。因此，在比较平等时，运营商将返回错误。

示例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。因此，在比较平等时，运营商将返回错误。

对象解构

解构这个术语是指分解一个实体的结构。JavaScript中的解构赋值语法可以将数组或对象中的数据提取到不同的变量中。以下示例说明了这一点。

实例

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

在成功执行上述代码时，会显示以下输出。

John
3

注意 - 要启用解构，请将节点中的文件作为node - harmony_destructuring file_name执行。