ES 6 对象

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)

成功执行上述代码后,将显示以下输出:

bar

使用这种简写语法,JS引擎在包含范围内查找具有相同名称的变量。如果找到,则将该变量的值分配给该属性。如果未找到,则抛出参考错误。

Object()构造函数

JavaScript提供了一个名为Object()的特殊构造函数来构建对象。new运算符用于创建对象的实例。要创建对象,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"; //定义一个对象
myCar.model = "Mustang";
myCar.year = 1987;
console.log(myCar["make"]) //访问对象属性
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() 
//访问属性值

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

上面的示例定义了一个对象-roles并设置了属性的默认值。创建两个新实例,覆盖对象的默认属性值。
成功执行上述代码后,将显示以下输出:

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

删除属性

您可以使用delete运算符删除属性。以下代码显示了如何删除属性。

// 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。

对象去结构化

术语解构(destructuring)指分解实体的结构。JavaScript中的解构赋值语法可以将数组或对象中的数据提取到不同的变量中。以下示例说明了相同的内容。

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

成功执行上述代码后,将显示以下输出。

John 
3

- 要启用解构,请在节点中将该文件作为node  -  harmony_destructuring file_name执行。