当前位置: 代码迷 >> 综合 >> 学习ES6(十一)-- 对象
  详细解决方案

学习ES6(十一)-- 对象

热度:46   发布时间:2023-10-24 11:40:39.0

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

一个对象是含有一组密钥值对一个实例。与原始数据类型不同,对象可以表示多个或复杂的值,并且可以在其生命周期内进行更改。这些值可以是标量值或函数,甚至可以是其他对象的数组。

进一步讨论了用于定义对象的句法变体

 

对象初始化器

像原始类型一样,对象也具有文字语法:花括号({and})。以下是定义对象的语法。

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

对象的内容称为属性(或成员),属性由名称(或键)和value组成。属性名称必须是字符串或符号,值可以是任何类型(包括其他对象)。

与所有JavaScript变量一样,对象名称(可以是普通变量)和属性名称都区分大小写。您可以使用简单的点符号访问对象的属性。

访问对象属性的语法 objectName.propertyName

示例:对象初始化器

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

在ES6中,分配与属性名称匹配的属性值,可以忽略该属性值。

var foo = 'bar' 
var baz = { foo }  //等价于 var baz = { foo:foo } 
console.log(baz.foo) //输出 bar

上面的代码段定义了一个对象baz。该对象具有foo属性。由于ES6将变量foo的值隐式分配给对象的键foo,因此此处省略了属性值。

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(); 
//define an object 
myCar.make = "Ford"; 
myCar.model = "Mustang"; 
myCar.year = 1987;  
//access the object property 
console.log(myCar["make"])  //输出:Ford
console.log(myCar["model"]) //输出:Mustang
console.log(myCar["year"]) //输出:1987

对象的未分配属性是未定义的。

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"]) //输出:undefined

构造函数

可以使用以下两个步骤创建对象-

步骤1-通过编写构造函数定义对象类型。

function function_name() { this.property_name = value 
}

“this”关键字指向当前对象的使用和定义对象的属性。

步骤2-使用new语法创建对象的实例。

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

new关键字调用函数构造函数并初始化函数的属性键。

Object.create方法

也可以使用Object.create()方法创建对象。它允许您为所需的对象创建原型,而无需定义构造函数。

ar 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并设置属性的默认值。将创建两个新实例,这些实例将覆盖对象的默认属性值。

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]) 
}

示例-合并对象

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);   //输出{ a: 10, b: 20, c: 30 } 
console.log(o1); //输出{ 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);   //11
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);  //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"

比较对象

在JavaScript中,对象是引用类型。即使两个不同的对象具有相同的属性,它们也永远不会相等。这是因为它们指向完全不同的内存地址。只有那些共享公共引用的对象才能在比较时得出true。

示例1-不同的对象引用

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

val1val2是两个不同的对象,它们引用两个不同的内存地址。因此,在进行相等性比较时,运算符将返回false。

示例2-单个对象引用

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

在上面的示例中,将val1中的内容分配给val2,即与val2共享val1中属性的引用。由于这些对象现在共享对该属性的引用,所以相等运算符将为引用两个不同内存地址的两个不同对象返回true。因此,在进行相等性比较时,运算符将返回true

 

 

 

  相关解决方案