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);
输出
通过使用这种速记语法，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 值。这就是 JavaScript 知道我们要分配对象的哪个属性的方式。
要了解有关对象解构的更多信息，您可以单击此链接 ES6 对象解构。
