本文详细介绍 ECMAScript 2015 中对象的新特性，包括属性简写、计算属性名、Object.is 同值相等判断、Object.assign 属性合并以及对象扩展运算符。通过具体代码示例，解析这些新语法在简化代码和提升功能上的实际应用，帮助开发者更高效地处理对象操作。
1.对象的属性
1.1属性表示法
ECMAScript 2015允许在大括号内直接写入变量和函数，作为对象的属性和方法。这种写法更加简洁。
示例代码如下所示：
let name = '一碗周'
let job = '前端攻城狮'
// 属性表示法 直接写入变量
let obj1 = {
name,
job,
sayMe() {
console.log(name)
}
}
// 等同于
let obj2 = {
name: name,
job: job,
sayMe: function() {
console.log(name)
}
}
console.log(obj1, obj2);
2.计算属性名
在JavaScript中，定义属性时有两种方式：使用中括号[]或点运算符（.）：
// 方法一
obj.foo = true;
// 方法二
obj['a'+'bc'] = 123;
点运算符存在局限性，例如属性名包含空格（如first name）时，只能使用中括号方式定义。中括号方式允许使用变量或会导致语法错误的字符串直接量来定义属性。
例如：
let person = {},
lastName = "last name";
person["first name"] = "Nicholas";
person[lastName] = "Zakas";
console.log(person["first name"]); // "Nicholas"
console.log(person[lastName]); // "Zakas"
这两种情况只能通过中括号方式定义。在ES5中，可以在对象直接量中使用字符串直接量作为属性，例如：
let person = {
"first name": "Nicholas"
};
console.log(person["first name"]); // "Nicholas"
但当属性名存储在变量中或需要动态计算时，使用对象直接量无法定义属性。
在ES5之前，如果属性名是变量或需要动态计算，只能通过对象.[变量名]的方式访问。
let p = {
name : '李四',
age : 20
}
let attName = 'name';
console.log(p[attName]) //这里 attName表示的是一个变量名。
// 李四
此外，这种动态计算属性名的方式在字面量中无法使用。
let attName = 'name';
let p = {
attName : '李四', // 这里的attName是属性名，相当于各级p定义了属性名叫 attName的属性。
age : 20
}
console.log(p[attName]) // undefined
在ECMAScript 2015中，将属性名用[ ]括起来，括号内可以引用预先定义的变量。
let attName = 'name';
let p = {
[attName] : '李四', // 引用了变量attName。相当于添加了一个属性名为name的属性
age : 20
}
console.log(p[attName]) // 李四
在对象直接量中，中括号表示属性名需要被计算，其内容会被计算为字符串。
3.Object 的方法
3.1Object.is() 方法
ECMAScript 2015比较两个值是否相等，主要使用两个运算符：相等运算符（==）和严格相等运算符（===）。
- 然而，这两个运算符都存在缺陷：
- 使用相等运算符时，会自动转换数据类型。
严格相等运算符会导致NaN不等于自身，以及+0等于-0。
ECMAScript 2015提出了“Same-value equality ”（同值相等）算法来解决这些问题。Object.is就是实现该算法的新方法，用于比较两个值是否严格相等，其行为与严格比较运算符（===）基本一致。
语法结构如下所示：
Object.is(value1, value2);
参数说明：
value1：被比较的第一个值。value2：被比较的第二个值。
返回一个布尔值。
示例代码如下所示：
console.log(+0 === -0); //true
console.log(NaN === NaN); // false
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
3.2Object.assign()方法
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。
语法结构如下所示：
Object.assign(target, ...sources)
参数说明：
target：目标对象sources：源对象
需要注意的是，如果目标对象中的属性与源对象具有相同的键，则源对象的属性会覆盖目标对象的属性。后续源对象的属性会覆盖前面的源对象属性。
示例代码如下所示：
let sources = {
name: '一碗周',
job: '前端攻城狮'
}
let target = {}
// 使用 assign() 方法所有可枚举属性的值从一个或多个源对象分配到目标对象。
Object.assign(target, sources)
console.log(target);
// 验证是否为深复制
target.name = '一碗粥'
console.log(target, sources); //{ name: '一碗周', job: '前端攻城狮' } { name: '一碗粥', job: '前端攻城狮' }
4.super 关键字
我们知道，this关键字总是指向函数所在的当前对象，ECMAScript 2015又新增了另一个类似的关键字super，指向当前对象的原型对象。
// 定义一个要作为原型对象的对象
const proto = {
v: 'Hello'
}
// 定义一个对象
const obj = {
v: 'World',
printV1() {
console.log(this.v);
},
// 使用 super 关键字
printV2() {
console.log(super.v);
}
}
// 将obj 对象的原型修改为 prtot
Object.setPrototypeOf(obj, proto)
// this 的用法
obj.printV1() // World
// super 的用法
obj.printV2() // Hello
值得注意的是，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。目前，只有对象方法的简写法可以让JavaScript引擎确认定义的是对象的方法。
5.对象的扩展运算符
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象中。
示例代码如下所示：
// 对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。
let obj = {
name: '一碗周',
job: '前端攻城狮'
}
let newObj = {
...obj
}
console.log(newObj); // { name: '一碗周', job: '前端攻城狮' }
// 验证是否为深复制
newObj.name = '一碗粥'
console.log(obj, newObj); // { name: '一碗周', job: '前端攻城狮' } { name: '一碗粥', job: '前端攻城狮' }
由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组。
let arr = [1, 2, 3, 4, 5]
let obj = {
...arr
}
console.log(obj); // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
如果扩展运算符后面不是对象，则会自动将其转为对象。
console.log(
{
...1 // 等同于 {...Object(1)}
}
); // {}
console.log(
{
...true // 等同于 {...Object(true)}
}
); // {}
console.log(
{
...undefined // 等同于 {...Object(undefined)}
}
); // {}
console.log(
{
...null // 等同于 {...Object(null)}
}
); // {}
到此这篇关于ECMAscript新特性对象介绍的文章就介绍到这了,更多相关ECMAscript 对象介绍内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！