ES6对象介绍和用法示例 _ES6对象

本文概述

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

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

通过使用对象文字
通过使用对象构造函数

var user ={}; // 'object literal' syntaxvar 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);

输出如下

AnilFirst

通过使用这种简写语法, 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对象介绍和用法示例】可以通过以下两种方法在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对象解构。