深入理解ES6 ---对象(object)

前言

在JavaScript中几乎每一个值都是某种特定的对象 ,例如数字是属于Number 类型的对象,字符串是String 类型的对象.可见对象在JavaScript中的重要性,而在ES6中着重通过多种方式加强对象的使用,通过简单的而语法扩展,提供更多操作对象及与对象交互的方法.

对象的字面量语法扩展

属性初始化的简写

在 ES5以及更早的版本中,对象字面量只是简单的键值对的集合,这意味着初始化属性值会有一些重复,例如

function createPerson(name,age){
    return {
        name:name,
        age:age
    };
}

这是一个简单的工厂函数,createPerson创建了一个对象,并且其属性名称和函数的参数相同,但是name 和age 重复了两遍,只是其中一个是对象属性的名称,另外一个是为属性赋值的变量.
在 ES6 中可以使用属性初始化的简写语法,能够消除这种属性值与局部变量之间的重复书写.
可以改写为如下:

function createPerson(name,age){
    return {
        name,
        age
    };
}

对象方法的简写
ES6中对象不但简化了对象字面量的简写方式,还有对象方法 的简写方式
例如:

var person = {
    name:"Joe",
    sayName:function(){
        console.log(this.name);
    }
}

可以简写为如下:

var person = {
    name:"Joe",
    sayName(){
        console.log(this.name);
    }
}

简写消除了分号和function关键字.
这种写法与之前唯一的不同是可以添加super 关键字

可计算属性名

在ES5 中,假设一个对象的属性名不符合命名规则,可以使用中括号来代替点去读写属性值.

在ES6 中强化了这一点,允许使用计算属性为对象的属性名

var person = {},
    lastName = "last name";

    person["first name"] = "Joe";
    person[lastName] = "Smith";

    console.log(person["first name"]);//Joe
    console.log(person["last name"]);//Smith

    var last = "last";
    console.log(person[last+" name"]);//Smith
object 新增的方法

Object.is()方法
在JavaScript是弱类型的语言,在判断两个值是否相等的时候需要使用 == 或 === 来判断 ,后者会判断类型,更受开发者喜爱,从而避免在比较是触发强制类型转换(当==比较时,类型不相等的情况下,都会转化为string类型来比较).
这可以解决大多数问题,但是也不完全准确,例如 +0 和 -0 ,在二进制表示是正好相反.,但比较结果却是一致,再比如 NaN (not a number)
和自身比较,就需要使用isNaN() 来判断.

Object.is()方法,除了这两点比较的结果和 === 比较的结果有所差异,其它比较都是表现一致.

console.log( +0==-0);//true
console.log( +0===-0);//true
console.log( Object.is(+0,-0));//false

console.log( NaN ==NaN);//false
console.log( NaN ===NaN);//false
console.log( Object.is(NaN,NaN));//true

Object.assign() 方法
assign 方法是用来在JavaScript中实现对象组合的一种方式
Object.assign 大致等同于

function mixin(receiver, supplier){
    Object.keys(supplier).forEach(function(key){
        receiver[key] = supplier[key];
    });
    return receiver;
}

Object.assign(receiver,supplier,…supplier);第一个参数为接收属性的对象,后面可以为任意多个参数,如果遇上同名属性,后者会覆盖前者。

重复的对象字面量 ,自有属性枚举顺序

在ES5 严格模式下 ,对象重复定义重名属性会有语法错误,ES6 严格模式改变了这一点,重名属性后者会覆盖前者。和ES5 默认模式下保持一致。
自由枚举顺序
ES6严格规定了对象的自有属性被枚举时的返回顺序,这会影响到Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回属性的方式,Object.assign() 方法处理属性的顺序也随之改变
自由属性被枚举顺序的基本规则如下:

  1. 所有数字键按升序排序。
  2. 所有字符串键按照它们被加入对象的顺序排序。
  3. 所有symbol 键 按照它们被加入对象的顺序排列

示例

var obj = {
    a:1,
    0:1,
    c:1,
    2:1,
    b:1,
    1:1
};
console.log(Object.getOwnPropertyNames(obj).join(""));//012acb
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值