ES6 对象

17 Mar 2025 | 5 分钟阅读

对象是键/值对的集合，可以在对象生命周期中修改，类似于哈希映射或字典。对象允许我们定义 JavaScript 中的自定义数据类型。

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

可以使用花括号 {...} 和一个可选的属性列表来创建一个对象。属性是一个 "键:值" 对，其中键是一个字符串或属性名称，值可以是任何东西。

语法

有两种语法可以创建空对象

使用对象字面量
使用对象构造函数

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

ES6 中的对象字面量语法扩展

与原始数据类型类似，对象也有字面量语法。对象字面量是在 JavaScript 中创建对象的常用模式之一。

ES6 通过以不同的方式扩展语法，使对象字面量更简洁且更强大。

让我们看看对象属性初始化程序的简写。

对象属性初始化程序

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

在 ES5 中

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

上面的函数 user() 接受两个参数，分别是 name 和 division， 并返回一个包含两个属性 name 和 division 的新对象字面量。属性 name 和 division 获取函数参数的值。

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

ES6 中的语法消除了当对象属性与局部变量的名称相同时的重复。让我们通过重写上面的 user() ES6 中的函数来理解这一点。

在 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 引擎会在作用域中查找具有相同名称的变量。如果找到，则将变量的值分配给该属性。但如果找不到，则会发生引用错误。

计算属性名称

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

ES6 引入了一个新特性 '计算属性名称'， 它是对象字面量语法的一部分，它使用方括号 [] 表示法。它允许我们在方括号 [] 中放置一个表达式，该表达式将被计算并用作属性的名称。

让我们通过以下示例理解计算属性名称

在 ES5 中

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

输出

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

在 ES6 中

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

输出

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

简洁的方法语法

在 ES6 之前，定义对象字面量的方法，我们必须指定完整函数的名称和定义，如以下示例所示

示例

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

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

让我们在上面的示例中使用此语法，通过重写对象 user。

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

在 ES6 中合并对象

可以使用两种方法在 ES6 中合并两个 JavaScript 对象，如下所示

Object.assign() 方法
对象展开语法方法

让我们尝试理解这两种方法。

使用 Object.assign() 方法

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

语法

示例

    var obj1 = {1 : "Hello", 2: "World"}; 
    var obj2 = { 3 : "Welcome", 4: "to"};
    var obj3 = { 5 : "javaTpoint"} 
      
    // Using Object.assign() 
   var final_obj = Object.assign(obj1, obj2, obj3); 
   console.log(final_obj);

输出

{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'javaTpoint'
}

对象克隆

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

让我们尝试通过以下示例理解它

示例

    let obj1 = {
    name: 'Anil',
    age: 22
  };
  let cloneobj = Object.assign({}, obj1);
  
  cloneobj.age = 32;
  
  console.log(obj1);
  console.log(cloneobj);

输出

{ name: 'Anil', age: 22 }
{ name: 'Anil', age: 32 }

使用对象展开语法

它广泛用于预期多个值的变量数组中。由于 JavaScript 中的对象是键值对实体，我们可以使用展开运算符将它们合并为一个。

语法

示例

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

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

输出

{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'javaTpoint'
}

删除属性

可以使用 delete 运算符删除属性。让我们通过以下示例了解如何删除属性。

示例

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

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

输出

undefined

对象解构

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

当解构对象时，我们使用键作为变量的名称。变量名称必须与对象的属性（或键）名称匹配。如果它不匹配，那么它将收到一个 undefined 值。这就是 JavaScript 知道我们要分配对象的哪个属性的方式。

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

下一个主题对象解构

← 上一步下一步 →

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ES6 教程

ES6 函数

ES6 数组

ES6 对象

ES6 类

ES6 字符串

高级特性

ES6 其他

面试题

ES6 对象

语法

ES6 中的对象字面量语法扩展

对象属性初始化程序

计算属性名称

简洁的方法语法

在 ES6 中合并对象

使用 Object.assign() 方法

对象克隆

使用对象展开语法

删除属性

对象解构

相关帖子

对象解构

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器