📜  ES6对象

📅  最后修改于: 2021-01-01 04:03:50             🧑  作者: Mango

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
    };
}

上述函数的用户()采用两个参数,这是名称分裂,并返回一个新的对象字面量具有两个属性名称分裂。属性名称除法采用函数参数的值。

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

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

在ES6中

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

在上面的代码片段中,JavaScript引擎将namedivision参数的值分配给namedivision属性。

同样,我们可以通过局部变量构造对象字面量,如以下示例所示:

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使用速记语法,也称为简明方法语法,通过删除冒号(:)函数关键字来使对象字面量的方法简明扼要。

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

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 : "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中的对象是键/值配对的实体,因此我们可以使用spread运算符将它们合并为一个。

句法

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

   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

对象分解

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

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

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