目录

ES6 对话框
ES6 布尔值

ES6 对象



ES6 对象

ES6 对象

对象是键/值对的集合，可以在对象的整个生命周期中进行修改，类似于哈希映射或字典。对象允许我们在 JavaScript 中定义自定义数据类型。
与原始数据类型不同，我们可以表示使用对象的复杂或多个值。这些值可以是对象数组或标量值，也可以是函数。对象内的数据是无序的，值可以是任何类型。
可以使用花括号 {...} 和可选的属性列表来创建对象。属性是一个 "key:value" 对，其中键是字符串或属性名称，值可以是任何东西。

语法

创建空对象有两种语法:

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

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 在属性的键和值中提到了两次。
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() 方法

该方法用于复制从一个或多个源对象到目标对象的值和属性。它返回目标对象，包括从目标对象复制的属性和值。
语法 
Object.assign(target, sources)
示例 
  var obj1 = {1 : "Hello", 2: "World"}; 
    var obj2 = { 3 : "Welcome", 4: "to"};
    var obj3 = { 5 : "lidihuo"} 
      
    // Using Object.assign() 
   var final_obj = Object.assign(obj1, obj2, obj3); 
   console.log(final_obj);
输出 
{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'lidihuo'
}

对象克隆

克隆是将对象从一个变量复制到另一个变量的过程。我们可以使用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 : "lidihuo"}
var final_obj = {...obj1, ...obj2, ...obj3};
console.log(final_obj);
输出 
{
  '1': 'Hello',
  '2': 'World',
  '3': 'Welcome',
  '4': 'to',
  '5': 'lidihuo'
}

删除属性

可以使用 delete 运算符来移除或删除属性。让我们通过使用以下示例来了解如何删除属性。
示例 
var obj = new Object; 
obj.a = 50; 
obj.b = 200; 
 
delete obj.a; 
console.log (obj.a);
输出 
undefined

对象解构

它类似于数组解构，只是不是从数组中拉出值，而是可以拉出属性(或键)及其对应的值来自一个对象。
在解构对象时，我们使用键作为变量的名称。变量名称必须与对象的属性(或键)名称匹配。如果不匹配，则它会收到一个 undefined 值。这就是 JavaScript 知道我们要分配对象的哪个属性的方式。
要了解有关对象解构的更多信息，您可以单击此链接 ES6 对象解构。


ES6 对话框
ES6 布尔值