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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/DFF1993/article/details/82894272

对象字面量语法扩展

    对象字面量之所以如此流行,是因为如果我们想要创建对象,不再需要编写冗余的代码,直接通过它简洁的语法就可以实现。而在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()方法可以接受任意数量的源对象,并按指定的顺序将属性复制到接收对象中,所以如果多个源对象具有同名属性,则排位靠后的源对象会覆盖排位靠前的,如下:

var receiver = {};

object.assign(receiver,
    {
      type:"js",
      name:"file.js"
    },
     {
      type:"css"
    }
};

console.log(receiver.type);//"css"
console.log(receiver.name);//"file.js"

重复的对象字面量属性

    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()方法来改变这一现状,通过这个方法可以改变任意指定对象的原型,接受两个参数:被改变原型的对象及替代第一个参数原型的对象。如下:

let person = {
    getGreeting(){
      return "Hello";
    }
};

let dog = {
    getGreeting(){
      return "Woof";
    }
};

//以person对象为原型
let friend = Object.create(person);
console.log(friend.getGreeting());//"Hello"
console.log(Object.getPrototypeOf(friend) === person);//true

//将原型设置为dog
Object.setPrototypeOf(friend,dog);
console.log(friend.getGreeting());//"Woof"
console.log(Object.getPrototypeOf(friend) === dog);//true

猜你喜欢

转载自blog.csdn.net/DFF1993/article/details/82894272