ES6 - 对象

JavaScript 支持扩展数据类型。JavaScript 对象是定义自定义数据类型的绝佳方式。

对象是包含一组键值对的实例。与原始数据类型不同，对象可以表示多个或复杂的值，并且可以在其生命周期内发生变化。这些值可以是标量值或函数，甚至是其他对象的数组。

定义对象的语法变化将进一步讨论。

对象初始化器

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

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

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

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

以下是访问对象属性的语法。

objectName.propertyName

示例:对象初始化器

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//访问对象值
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 运算符用于创建对象的实例。要创建对象，new 运算符后面跟着构造函数方法。

以下是定义对象的语法。

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

以下是访问属性的语法。

Object_name.property_key
或
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 −使用 new 语法创建对象实例。

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 role = {
    type: "Admin", // 属性的默认值
    displayType : function() {
        // 将显示角色类型的方法
        console.log(this.type);
    }
}
// 创建名为 super_role 的新角色类型
var super_role = Object.create(roles);
super_role.displayType(); // 输出:Admin

// 创建名为 Guest 的新角色类型
var guest_role = Object.create(roles);
guest_role.type = "Guest";
guest_role.displayType(); // 输出:访客

上面的示例定义了一个对象 -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 运算符删除属性。以下代码显示如何删除属性。

示例

// 创建一个新对象 myobj，它具有两个属性 a 和 b。
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

// 删除"a"属性
delete myobj.a;
console.log ("a" in myobj) // 得出"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) // 返回 true
console.log(val1 === val2) // 返回 true

在上面的例子中，val1 中的内容被分配给 val2，即 val1 中属性的引用与 val2 共享。由于对象现在共享对属性的引用，因此对于引用两个不同内存地址的两个不同对象，相等运算符将返回 true。因此，在比较相等性时，运算符将返回 false。

对象解构

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

示例 1

解构对象时，变量名称和对象属性名称必须匹配。

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//解构为相同属性名称
    let {name,cgpa} = student
    console.log(name)
    console.log(cgpa)

//解构为不同名称
    let {name:student_name,cgpa:student_cgpa}=student
    console.log(student_cgpa)
    console.log("student_name",student_name)
</script>

上述代码的输出将如下所示 −

Prijin
7.2
7.2
student_name Prijin

示例 2

如果变量和赋值位于两个不同的步骤中，则解构对象语法将被 () 包围，如示例 ({rollno} = student) 所示 −

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // 解构到已声明的变量
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // 为变量分配默认值

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

上述代码的输出将如下所示 −

示例 3

以下示例展示了如何使用 rest 运算符 进行解构以及如何解构嵌套对象。

<script>
   // 带有对象解构的 rest 运算符
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //嵌套对象
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

上述代码的输出将如下所示 −

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai

ES6 教程

ES6 有用资源

ES6 - 对象

对象初始化器

示例:对象初始化器

示例

Object() 构造函数

示例

示例

示例

构造函数

Object.create 方法

示例

Object.assign() 函数

删除属性

示例

比较对象

对象解构

示例 1

示例 2

示例 3

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！