ECMAScript/ES6对象

精华

小牛编辑

172浏览

2023-03-14

对象是键/值对的集合，可以像哈希或字典一样在对象的整个生命周期中对其进行修改。在JavaScript中使用对象可以定义自定义数据类型。

与原始数据类型不同，使用对象表示复杂或多个值。这些值可以是对象数组或标量值，也可以是函数。对象内部的数据是无序的，值可以是任何类型。

可以使用大括号{?}以及可选的属性列表来创建对象。该属性是“键:值”对，其中键是字符串或属性名称，值可以是任何值。

语法

创建空对象有两种语法：

通过使用对象文字；
通过使用对象构造函数；

var user =  {};  // 'object literal' syntax  
var name = new Object();  //'object constructor' syntax

1.ES6对象文字语法扩展

与原始数据类型相似，对象也具有文字语法。对象文字是在JavaScript中创建对象的广泛使用的模式之一。

ES6通过以不同的方式扩展语法，使对象文字更加简洁和健壮。

下面来看看对象属性初始化器的简写方式。

1.1.对象属性初始化器

在ES6之前，对象文字是名称-值对的集合。例如，

在ES5中

function user(name, division) {  
    return {  
        name: name,  
        divison: division  
    };  
}

上面的函数user()接受两个参数，即name和division，并返回一个具有两个属性name和division的新对象。对象的属性name和division采用函数参数传入的值。

上面的语法看起来是重复的，因为name和division在属性的键和值中两次提到。

当对象属性与局部变量的名称相同时，ES6中的语法消除了重复。下面在ES6中重写上面的user()函数。

在ES6中

function user(name, division) {  
    return {  
        name,  
        divison  
    };  
}

在上面的代码片段中，JavaScript引擎将name和division参数的值分配给name和division属性。

同样，可以通过局部变量构造对象文字，如以下示例所示：

let uname = 'Anil',  
    udivision = 'First';  

let user = {  
   uname,  
   udivision  
};  
console.log(user.uname);  
console.log(user.udivision);

运行结果如下：

Anil
First

通过使用这种简写语法，JavaScript引擎在作用域中查找具有相同名称的变量。如果找到，则将变量的值分配给属性。但是，如果找不到它，则将发生参考错误。

1.2.计算属性名称

在ES6之前，可以使用方括号[]启用对象属性的计算属性名称。方括号表示法允许使用变量和字符串文字作为属性的名称。

ES6引入了一个新功能“计算属性名称”，它是对象文字语法的一部分，并且使用方括号[]表示法。它允许在方括号[]中放置一个表达式，该表达式将被计算并用作属性的名称。

下面通过使用一个示例来了解计算的属性名称：

ES5写法

var emp = {  
    id : 101,  
    name : 'XNT'  
}  
var department = 'dep_name';  
emp[department]='Sales';  
console.log(emp);

运行结果如下：

{ id: 101, name: 'XNT', dep_name: 'Sales' }

ES5写法

var department = 'dep_name';  
var emp = {  
    id : 102,  
    name : 'Anil',  
    [department]:'Production'  
}  
console.log(emp);

运行结果如下：

{ id: 102, name: 'XNT', dep_name: 'Production' }

1.3.简洁的方法语法

在ES6之前，为对象文字定义一种方法，必须指定完整函数的名称和定义，如以下示例所示：

let user = {  
    firstName : "Fiter",  
    lastName : "Su",  
    fullName : function(){  
        return this.firstname + " " + this.lastName;  
    }  
};

ES6使用速记语法，也称为简洁方法语法，通过删除冒号(:)和function关键字使对象文字的方法简洁。

使用此语法重写上面的示例中对象:user。

let user = {  
    firstName : "Fiter",  
    lastName : "Su",  
    fullName(){  
        return this.firstname + " " + this.lastName;  
    }  
};

2.合并ES6中的对象

可以通过以下两种方法在ES6中合并两个JavaScript对象：

Object.assign()方法
对象传播语法方法

下面来了解这两种方法用法。

2.1.通过使用Object.assign()方法

此方法用于将值和属性从一个或多个源对象复制到目标对象。它返回目标对象，包括从目标对象复制的属性和值。

语法

Object.assign(target, sources)

示例

var obj1 = {1 : "Hello", 2: "World"};   
 var obj2 = { 3 : "Welcome", 4: "to"};  
 var obj3 = { 5 : "XNTutor.com"}   

 // Using Object.assign()   
var final_obj = Object.assign(obj1, obj2, obj3);   
console.log(final_obj);

运行结果如下：

{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'XNTutor.com'
}

2.2.对象克隆

克隆是将对象从一个变量复制到另一个变量的过程。可以使用object.assign()方法克隆一个对象。

下面通过一个示例代码来理解：

 let obj1 = {  
  name: 'Fiter',  
  age: 22  
};  
let cloneobj = Object.assign({}, obj1);  

cloneobj.age = 25;  

console.log(obj1);  
console.log(cloneobj);

运行结果如下：

{ name: 'Fiter', age: 22 }
{ name: 'Fiter', age: 25 }

2.3.使用对象传播语法

它广泛用于需要多个值的变量数组中。由于JavaScript中的对象是键/值配对的实体，因此我们可以使用散布运算符将它们合并为一个。

语法

var new_obj = [...obj1, ...obj2, ...]

示例

var obj1 = {1 : "Hello", 2: "World"};  
var obj2 = { 3 : "Welcome", 4: "to"};  
var obj3 = { 5 : "Xntutor.com"}  

var final_obj = {...obj1, ...obj2, ...obj3};  
console.log(final_obj);

运行结果如下：

{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'Xntutor.com'
}

2.4.删除属性

使用delete运算符可以删除或删除属性。下面来以下一个示例代码了解如何删除属性。

var obj = new Object;   
obj.a = 50;   
obj.b = 200;   


delete obj.a;   
console.log (obj.a);

运行结果如下：

undefined

3.对象解构

它类似于数组解构，除了可以从对象中提取属性(或键)及其对应的值，而不是从数组中提取值。

销毁对象时，使用键作为变量的名称。变量名称必须与对象的属性(或键)名称匹配。如果不匹配，则它将收到未定义的值。这就是JavaScript知道我们要分配对象的哪个属性的方式。

要了解有关对象解构的更多信息，可以单击此链接ES6对象解构。