对象扩展后的一些变化
2021-01-20 本文已影响0人
F_wind
《深入理解ES6》阅读随笔
在 JavaScript 中,有一切皆为对象之说,可见其重要性。关于对象的扩展,这里简单列举了一些例子,囊括概念说明以及 ES5 到 ES6 的变化等。
简化语法
- 默认初始化参数简写:
function user(id, name) {
// ES5
var info = {
id: id,
name: name
}
// ES6
var infos = {
id,
name
}
}
- 表达式简写:
var user{
// ES5
getInfo:function(){
return this.id+":"+this.name
}
// ES6
getInfos(){
return this.id+":"+this.name
}
}
- 可计算属性名:在 ES6 中,可以动态生成对象的属性名,就像下面这个例子,可以自定义一个 name 变量的属性;
function user(id, name) {
var info = {
id: "new" + id,
[name]: "new" + name,
};
console.log(info)
}
user(1,"age") // 输出 { id: 'new1', age: 'newage' }
新增功能
- Object.is(value1, value2) :可以比较两个对象是否相等,重点解决 == 和 === 无法处理的情况,比如:
// ES5 中的错误结论
NaN === NaN // false
NaN == NaN // false
(+0 === -0) // true
(+0 == -0) // true
// 使用 Object.is() 可以得到正确结论
Object.is(NaN, NaN) // true
Object.is(+0, -0) // false
- Object.assign(obj1, obj2) :可以将 obj2 的所有内容浅拷贝到 obj1 中(除了后面新增的 super);
重复属性名:在 ES6 中重复定义的属性名采用之后声明覆盖之前声明的方式(ES5 中在非严格模式下会报异常);
原型方面
- 修改原型指向:在 ES5 中,只能通过 getPrototypeOf
的方式获取原型指向。而在 ES6 中,新增了 setPrototypeOf 的方式,用于修改原型的指向;
var t1 = {
sayHello: function () {
return 't1'
}
}
var t2 = {
sayHello: function () {
return 't2'
}
}
let tt = Object.create(t1)
console.log(tt.sayHello()) // 输出 t1
Object.setPrototypeOf(tt, t2)
console.log(tt.sayHello()) // 输出 t2
- 新增 super :解决原型多重指向的问题(这块内容个人感觉有点多,计划是放在明天或者后面有时间,单独用一篇文章来说一下);
对象属性名枚举时自动排序
- 数字升序;
- 字符串根据输入先后进行排序;
- symbol 也是根据输入先后进行排序(symbol 也是 ES6 的一个新特性,后面看到额时候再介绍)。