《深入理解ES6》——扩展对象的功能性

川长思鸟来 2022-05-09 01:04 194阅读 0赞

# 对象字面量语法扩展 #

对象字面量之所以如此流行，是因为如果我们想要创建对象，不再需要编写冗余的代码，直接通过它简洁的语法就可以实现。而在ES6中，以下语法让对象字面量变得更强大、更简洁。

## 属性初始值的简写 ##

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

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

这段代码中的createPerson()函数创建了一个对象，其属性名称与函数的参数相同，在返回的结果中，name和age分别重复了两遍，只是其中一个是对象属性的名称，另外一个是为属性赋值的变量。

在ES6中，通过使用属性初始化的简写语法，可以消除这种属性名称和局部变量之间的重复书写。当一个对象的属性与本地变量同名时，不必再写冒号和值，简单地只写属性名即可。如下：

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

当对象字面量里只有一个属性的名称时，javascript引擎会在可访问作用域中查找其同名变量；如果找到，则该变量的值被赋给对象字面量里的同名属性。在本例中，对象字面量属性name被赋予了局部变量name的值。

## 对象方法的简写语法 ##

在ES5级早期版本中，如果为对象添加方法，必须通过指定名称并完整定义函数来实现：

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

在ES6中，语法更简单，消除了冒号和function关键字，如下：

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

# 新增方法 #

## Object.is()方法 ##

当你想在JavaScript中比较两个值时，可能习惯于使用相等运算符（==）或全等运算符（===），许多开发者更喜欢后者，从而避免在比较时触发强制类型转换的行为。但即使全等运算符也不完全准确，举个例子，+0和-0在JavaScript引擎中被表示为两个完全不同的实体，而如果使用全等运算符===对两者进行比较，得到的结果是两者相等；同样，NaN===NaN的返回值为false，需要使用isNaN()方法才可以正确检测NaN。

ES6引入Object.is()方法来弥补全等运算符的不准确运算。该方法接受两个参数，如果这两个参数类型相同且具有相同的值，则返回true。

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
    
    console.log(5 == 5);//true
    console.log(5 === 5);//true
    console.log(5 == "5");//true
    console.log(5 === "5");//false
    console.log(Object.is(5,5));//true
    console.log(Object.is(5,"5"));//false

## Object.assign()方法 ##

Object.assign()方法可以接受任意数量的源对象，并按指定的顺序将属性复制到接收对象中，所以如果多个源对象具有同名属性，则排位靠后的源对象会覆盖排位靠前的，如下：

## 重复的对象字面量属性 ##

ES5严格模式中加入了对象字面量重复属性的校验，当同时存在多个同名属性时会抛出错误。如下：

"use strict"
    
    var person = {
        name:"Nicholas",
        name:"Greg"  //ES5严格模式下会有语法错误
    };

但在ES6中重复属性检查被移除了，无论是在严格模式还是非严格模式下，代码不再检查重复属性，对于每一组重复属性，都会选择最后一个取值，如下：

"use strict"
    
    var person = {
        name:"Nicholas",
        name:"Greg"  //ES6严格模式下没有语法错误
    };
    
    console.log(person.name);//"Greg"

## 自有属性枚举顺序 ##

自有属性枚举顺序的基本规则如下：

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

var obj = {
        a:1,
        0:1,
        c:1,
        2:1,
        b:1,
        1:1
    };
    obj.d = 1;
    console.log(Object.getOwnPropertyNames(obj).join(""));//"012acbd"

## 改变对象的原型 ##

ES5中添加了Object.getPrototypeOf()方法来返回任意指定对象的原型，但仍缺少对象在实例化后改变原型的标准方法。所以，在ES6中添加了Object.setPrototypeOf()方法来改变这一现状，通过这个方法可以改变任意指定对象的原型，接受两个参数：被改变原型的对象及替代第一个参数原型的对象。如下：