对象是键/值对的集合，可以像哈希或字典一样在对象的整个生命周期中对其进行修改。在JavaScript中使用对象可以定义自定义数据类型。
与原始数据类型不同，使用对象表示复杂或多个值。 这些值可以是对象数组或标量值，也可以是函数。对象内部的数据是无序的，值可以是任何类型。
可以使用大括号{?}以及可选的属性列表来创建对象。 该属性是“键:值”对，其中键是字符串或属性名称，值可以是任何值。
语法
创建空对象有两种语法：

  • 通过使用对象文字；
  • 通过使用对象构造函数；
    1. let user =  {};  // 'object literal' syntax  
    2. let name = new Object();  //'object constructor' syntax

    1. ES6对象文字语法扩展

    与原始数据类型相似，对象也具有文字语法。 对象文字是在JavaScript中创建对象的广泛使用的模式之一。
    ES6通过以不同的方式扩展语法，使对象文字更加简洁和健壮。
    下面来看看对象属性初始化器的简写方式。

    1.1. 对象属性初始化器

    在ES6之前，对象文字是名称-值对的集合。 例如，
    在ES5中
    1. function user(name, division) {  
    2.   return {  
    3.       name: name,  
    4.       divison: division  
    5.   };  
    6. }
    上面的函数user()接受两个参数，即name和division，并返回一个具有两个属性name和division的新对象。 对象的属性name和division采用函数参数传入的值。
    上面的语法看起来是重复的，因为name和division在属性的键和值中两次提到。
    当对象属性与局部变量的名称相同时，ES6中的语法消除了重复。下面在ES6中重写上面的user()函数。
    在ES6中
    1. function user(name, division) {  
    2.   return {  
    3.       name,  
    4.       divison  
    5.   };  
    6. }
    在上面的代码片段中，JavaScript引擎将name和division参数的值分配给name和division属性。
    同样，可以通过局部变量构造对象文字，如以下示例所示：
    1. let uname = 'Anil',  
    2.   udivision = 'First';  
    3. let user = {  
    4.  uname,  
    5.  udivision  
    6. };  
    7. console.log(user.uname);  
    8. console.log(user.udivision);
    运行结果如下：
    1. Anil
    2. First
    通过使用这种简写语法，JavaScript引擎在作用域中查找具有相同名称的变量。 如果找到，则将变量的值分配给属性。 但是，如果找不到它，则将发生参考错误。

    1.2. 计算属性名称

    在ES6之前，可以使用方括号[]启用对象属性的计算属性名称。方括号表示法允许使用变量和字符串文字作为属性的名称。
    ES6引入了一个新功能“计算属性名称”，它是对象文字语法的一部分，并且使用方括号[]表示法。 它允许在方括号[]中放置一个表达式，该表达式将被计算并用作属性的名称。
    下面通过使用一个示例来了解计算的属性名称：
    ES5写法
    1. let emp = {  
    2.   id : 101,  
    3.   name : 'XNT'  
    4. }  
    5. let department = 'dep_name';  
    6. emp[department]='Sales';  
    7. console.log(emp);
    运行结果如下：
    1. { id: 101, name: 'XNT', dep_name: 'Sales' }
    ES5写法 ```javascript let department = ‘dep_name’;
    let emp = {
    id : 102,
    name : ‘Anil’, 
  1. [department]:'Production'

}
console.log(emp);

  1. 运行结果如下：
  2. ```javascript
  3. { id: 102, name: 'XNT', dep_name: 'Production' }

1.3. 简洁的方法语法

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

  1. let user = {  
  2.     firstName : "Fiter",  
  3.     lastName : "Su",  
  4.     fullName : function(){  
  5.         return this.firstname + " " + this.lastName;  
  6.     }  
  7. };

ES6使用速记语法，也称为简洁方法语法，通过删除冒号(:)和function关键字使对象文字的方法简洁。
使用此语法重写上面的示例中对象:user。

  1. let user = {  
  2.     firstName : "Fiter",  
  3.     lastName : "Su",  
  4.     fullName(){  
  5.         return this.firstname + " " + this.lastName;  
  6.     }  
  7. };

2. 合并ES6中的对象

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

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

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

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

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

  1. Object.assign(target, sources)

示例

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

运行结果如下：

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

2.2. 对象克隆

克隆是将对象从一个变量复制到另一个变量的过程。可以使用object.assign()方法克隆一个对象。
下面通过一个示例代码来理解：

  1. let obj1 = {  
  2.   name: 'Fiter',  
  3.   age: 22  
  4. };  
  5. let cloneobj = Object.assign({}, obj1);  
  6. cloneobj.age = 25;  
  7. console.log(obj1);  
  8. console.log(cloneobj);

运行结果如下：

  1. { name: 'Fiter', age: 22 }
  2. { name: 'Fiter', age: 25 }

2.3. 使用对象传播语法

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

  1. let new_obj = [...obj1, ...obj2, ...]

示例

  1. let obj1 = {1 : "Hello", 2: "World"};  
  2. let obj2 = { 3 : "Welcome", 4: "to"};  
  3. let obj3 = { 5 : "Xntutor.com"}  
  4. let final_obj = {...obj1, ...obj2, ...obj3};  
  5. console.log(final_obj);

运行结果如下：

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

2.4. 删除属性

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

  1. let obj = new Object;   
  2. obj.a = 50;   
  3. obj.b = 200;   
  4. delete obj.a;   
  5. console.log (obj.a);

运行结果如下：

  1. undefined

3.对象解构

它类似于数组解构，除了可以从对象中提取属性(或键)及其对应的值，而不是从数组中提取值。
销毁对象时，使用键作为变量的名称。 变量名称必须与对象的属性(或键)名称匹配。 如果不匹配，则它将收到undefined的值。
在对象解构中，通过键而不是位置(或索引)提取值。通过以下示例演示来了解对象分解中的基本分配。
示例-简单分配

  1. const num = {x: 100, y: 200};  
  2. const {x, y} = num;  
  3. console.log(x); // 100  
  4. console.log(y); // 200

运行结果如下：

  1. 100
  2. 200

示例-基本对象销毁分配

  1. const student = {name: 'Fiter', position: 'First', rollno: '24'};  
  2. const {name, position, rollno} = student;  
  3. console.log(name); // Fiter  
  4. console.log(position); // First  
  5. console.log(rollno); // 24

运行结果如下：

  1. Arun
  2. First

3.1. 对象解构和默认值

与数组解构一样，如果从对象解压缩的值是：undefined，则可以将默认值分配给变量。
示例

  1. const {x = 100, y = 200} = {x: 500};  
  2. console.log(x); // 500  
  3. console.log(y); // 200

在上面的示例中，变量x和y的默认值为100和200。之后，变量x的值重新分配为500。但是变量y没有重新分配，因此保留了其原始值。 因此输出的是500和200，而不是100和200。
运行结果如下：

  1. 500
  2. 200

3.2. 分配新的变量名

可以为变量分配与对象属性不同的名称。参考如下代码示例：

  1. const num = {x: 100, y: 200};  
  2. const {x: new1, y: new2} = num;  
  3. console.log(new1); //100   
  4. console.log(new2); //200

在上面的示例中，已将属性名称x和y分配给了局部变量new1和new2。
运行结果如下：

  1. 100
  2. 200

3.3. 未声明分配

如果在声明变量时未分配其值，则可以在解构期间分配其值。 如下示例所示：

  1. let name, division;  
  2. ({name, division} = {name: 'FiterSu', division: 'First'});   
  3. console.log(name); // FiterSu  
  4. console.log(division); // First

在上面的示例中，应注意，当使用不带声明的变量解构赋值时，必须在赋值语句周围使用括号()。 否则语法将无效。
运行结果如下：

  1. FiterSu
  2. First

3.4. 对象解构和Rest运算符

通过在对象分解中使用rest运算符(…)，可以将对象的所有其余键放在新的对象变量中。
下面通过一个例子来理解。

  1. let {a, b, ...args} = {a: 100, b: 200, c: 300, d: 400, e: 500}  
  2. console.log(a);   
  3. console.log(b);   
  4. console.log(args);

运行结果如下：

  1. 100
  2. 200
  3. { c: 300, d: 400, e: 500 }

分配新的变量名称并同时提供默认值
从对象解压缩的属性可以分配给具有不同名称的变量。 如果解包值为：undefined，则会将默认值分配给它。
示例

  1. const {a:num1=100, b:num2=200} = {a:300};  
  2. console.log(num1); //300  
  3. console.log(num2); //200

运行结果如下：

  1. 300
  2. 200