ES6对象介绍和用法示例

本文概述

• ES6中的对象文字语法扩展
• 合并ES6中的对象
• 对象分解

对象是键/值对的集合, 可以像哈希图或字典一样在对象的整个生命周期中对其进行修改。对象使我们可以在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的新对象文字。属性名称和除法采用函数参数的值。

上面的语法看起来是重复的, 因为名称和除法在属性的键和值中两次提到。

当对象属性与局部变量的名称相同时, 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引擎在作用域中查找具有相同名称的变量。如果找到, 则将变量的值分配给属性。但是, 如果找不到它, 则将发生参考错误。

计算的属性名称

在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关键字使对象文字的方法简洁。

通过重写对象用户, 在上面的示例中使用此语法。

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

合并ES6中的对象

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

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

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

通过使用Object.assign()方法

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

语法

Object.assign(target, sources)

例子

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

输出如下

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

对象克隆

克隆是将对象从一个变量复制到另一个变量的过程。我们可以使用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 new_obj = [...obj1, ...obj2, ...]

例子

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

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

输出如下

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

删除属性

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

例子

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

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

输出如下

undefined

对象分解

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

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

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