ES6对象扩展

时间 2019-11-11

原文原文链接

前面的话

　　随着JS应用复杂度的不断增长，开发者在程序中使用对象的数量也在持续增加，所以对象使用效率的提高就变得相当重要。ES6经过多种方式来增强对象的使用，经过简单的语法扩展，提供更多操做对象及与对象交互的方法。本章将详细介绍ES6对象扩展node

对象类别

　　在浏览器这样的执行环境中，对象没有统一的标准，在标准中又使用不一样的术语描述对象，ES6规范清晰定义了每个类别的对象，对象的类别以下es6

　　一、普通(Ordinary)对象数据库

　　具备JS对象全部的默认内部行为数组

　　二、特异(Exotic)对象浏览器

　　具备某些与默认行为不符的内部行为mongoose

　　三、标准(Standard)对象函数

　　ES6规范中定义的对象，例如，Array、Date等。标准对象既能够是普通对象，也能够是特异对象this

　　四、内建对象es5

　　脚本开始执行时存在于JS执行环境中的对象，全部标准对象都是内建对象spa

对象简写

【属性初始值简写】

　　在ES5中，对象字面量只是简单的键值对集合，这意味着初始化属性值时会有一些重复

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

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

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

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

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

　　在JS中，为对象字面量的属性赋同名局部变量的值是一种常见的作法，这种简写方法有助于消除命名错误

【对象方法简写】

　　在ES5中，若是为对象添加方法，必须经过指定名称并完整定义函数来实现

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

　　而在ES6中，语法更简洁，消除了冒号和function关键字

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

　　在这个示例中，经过对象方法简写语法，在person对象中建立一个sayName()方法，该属性被赋值为一个匿名函数表达式，它拥有在ES5中定义的对象方法所具备的所有特性

　　两者惟一的区别是，简写方法可使用super关键字，而普通方法不能够

　　[注意]经过对象方法简写语法建立的方法有一个name属性，其值为小括号前的名称

可计算属性名

　　在ES5版本中，若是想要经过计算获得属性名，就须要用方括号代替点记法

var person = {},
lastName = "last name";
person["first name"] = "huochai";
person[lastName] = "match";
console.log(person["first name"]); // "huochai"
console.log(person[lastName]); // "match"

　　变量lastName被赋值为字符串"last name"，引用的两个属性名称中都含有空格，于是不可以使用点记法引用这些属性，却可使用方括号，由于它支持经过任何字符串值做为名称访问属性的值。此外，在对象字面量中，能够直接使用字符串字面量做为属性名称

var person = {
    "first name": "huochai"
};
console.log(person["first name"]); // "huochai"

　　这种模式适用于属性名提早已知或可被字符串字面量表示的状况。然而，若是属性名称"first name"被包含在一个变量中，或者须要经过计算才能获得该变量的值，那么在ES5中是没法为一个对象字面量定义该属性的

　　在ES6中，可在对象字面量中使用可计算属性名称，其语法与引用对象实例的可计算属性名称相同，也是使用方括号

var lastName = "last name";
var person = {
    "first name": "huochai",
    [lastName]: "match"
};
console.log(person["first name"]); // "huochai"
console.log(person[lastName]); // "match"

　　在对象字面量中使用方括号表示的该属性名称是可计算的，它的内容将被名称求值并被最终转化为一个字符串，于是一样可使用表达式做为属性的可计算名称

var suffix = " name";
var person = {
    ["first" + suffix]: "huochai",
    ["last" + suffix]: "match"
};
console.log(person["first name"]); // "huochai"
console.log(person["last name"]); // "match"

　　这些属性被求值后为字符串"first name"和"last name"，而后它们可用于属性引用。任何可用于对象实例括号记法的属性名，也能够做为字面量中的计算属性名

判断相等

【Object.is()】

　　在JS中比较两个值时，可能习惯于使用相等运算符(==)或全等运算符(===)，使用后者能够避免触发强制类型转换的行为。可是，即便使用全等运算符也不彻底准确

console.log(+0 === -0);//true
console.log(NaN === NaN);//false

　　ES6引入了Object.is()方法来弥补全等运算符的不许确运算。这个方法接受两个参数，若是这两个参数类型相等且具备相同的值，则返回true，不然返回false

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.is()方法来讲，其运行结果在大部分状况中与"==="运算符相同，惟一的区别在于+0和-0被识别为不相等而且NaN与NaN等价。可是大可没必要抛弃等号运算符，是否选择用Object.is()方法而不是==或===取决于那些特殊状况如何影响代码

对象合并

【Object.assign()】

　　混合(Mixin)是JS实现对象组合最流行的一种模式。在一个mixin方法中，一个对象接收来自另外一个对象的属性和方法，许多JS库中都有相似的minix方法

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

　　mixin()函数遍历supplier的自有属性并复制到receiver中(此处的复制行为是浅复制，当属性值为对象时只复制对象的引用)。这样一来，receiver不经过继承就能够得到新属性

function EventTarget() { /*...*/ }
EventTarget.prototype = {
    constructor: EventTarget,
    emit: function() { /*...*/ },
    on: function() { /*...*/ }
};
var myObject = {};
mixin(myObject, EventTarget.prototype);
myObject.emit("somethingChanged");

　　在这段代码中，myObject继承EventTarget.prototype对象的全部行为，从而使myObject能够分别经过emit()方法发布事件或经过on()方法订阅事件

　　这种混合模式很是流行，于是ES6添加了object.assign()方法来实现相同的功能，这个方法接受一个接收对象和任意数量的源对象，最终返回接收对象

function EventTarget() { /*...*/ }
EventTarget.prototype = {
    constructor: EventTarget,
    emit: function() { /*...*/ },
    on: function() { /*...*/ }
}
var myObject = {}
Object.assign(myObject, EventTarget.prototype);
myObject.emit("somethingChanged");

【对象合并】

　　Object.assign()方法不叫对象复制，或对象拷贝，而叫对象合并，是由于源对象自己的属性和方法仍然存在

var target = { a: 1 };
var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3}

　　Object.assign()方法能够接受任意数量的源对象，并按指定的顺序将属性复制到接收对象中。若是目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

【浅拷贝】

　　在对象合并的过程当中，Object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

　　Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，若是源对象某个属性的值是对象，那么目标对象拷贝获得的是这个对象的引用

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

【展开运算符】

　　在ES7中，支持对象展开运算符的写法，来替代Object.assign()

Object.assign({}, state, {visibilityFilter: action.filter})
//等同于
{ ...state, visibilityFilter: action.filter }

　　[注意]在某些状况下，展开运行符的写法不生效

　　在nodejs中使用mongoose数据库筛选数据时要使用Object.assign()。若是使用...t，会输出一些无用的值

"$__": {
    "strictMode": true,
    "selected": {
        "_id": 0,
        "content": 0
    },
    "getters": {},
    "wasPopulated": false,
    "activePaths": {
        "paths": {
            "title": "init",
            "categories": "default",
            "comments": "default",
            "likes": "default",
            "collections": "default",
            "createdAt": "init",
            "updatedAt": "init",
            "__v": "init"
        },
...

属性名重复

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

"use strict";
var person = {
    name: "huochai",
    name: "match" // 在 ES5 严格模式中是语法错误
};

　　当运行在ES5严格模式下时，第二个name属性会触发二个语法错误

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

"use strict";
var person = {
    name: "huochai",
    name: "match" 
};
console.log(person.name); // "match"

　　在这个示例中，属性person.name取最后一次赋值"match"

枚举顺序

　　ES5中未定义对象属性的枚举顺序，由JS引擎厂商自行决定。然而，ES6严格规定了对象的自有属性被枚举时的返回顺序，这会影响到Object.getOwnPropertyNames()方法及Reflect.ownKeys返回属性的方式，Object.assign()方法处理属性的顺序也将随之改变

　　自有属性枚举顺序的基本规则是

　　一、全部数字键按升序排序

　　二、全部字符串键按照它们被加入对象的顺序排序

　　三、全部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"

　　Object.getOwnPropertyNames()方法按照0、一、二、a、c、b、d的顺序依次返回对象obj中定义的属性。对于数值键，尽管在对象字面量中的顺序是随意的，但在枚举时会被从新组合和排序。字符串键紧随数值键，并按照在对象obj中定义的顺序依次返回，因此随后动态加入的字符串键最后输出

　　[注意]对于for-in循环，因为并不是全部厂商都遵循相同的实现方式，所以仍未指定一个明确的枚举顺序而Object.keys()方法和JSON.stringify()方法都指明与for-in使用相同的枚举顺序，所以它们的枚举顺序目前也不明晰

　　对于JS，枚举顺序的改变其实微不足道，可是有不少程序都须要明确指定枚举顺序才能正确运行。ES6中经过明肯定义枚举顺序，确保用到枚举的代码不管处于何处均可以正确地执行

对象原型

　　原型是JS继承的基础，在早期版本中，JS严重限制了原型的使用。随着语言逐渐成熟，开发者们也更加熟悉原型的运行方式，他们但愿得到更多对于原型的控制力，并以更简单的方式来操做原型。因而，ES6针对原型进行了改进

【__proto__】

　　__proto__属性（先后各两个下划线），用来读取或设置当前对象的prototype对象。目前，全部浏览器(包括IE11)都部署了这个属性

// es6的写法
var obj = {
  method: function() { ... }
};
obj.__proto__ = someOtherObj;

// es5的写法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };

　　标准明确规定，只有浏览器必须部署这个属性，其余运行环境不必定须要部署，并且新的代码最好认为这个属性是不存在的。所以，不管从语义的角度，仍是从兼容性的角度，都不要使用这个属性，而是使用下面的Object.setPrototypeOf()（写操做）、Object.getPrototypeOf()（读操做）、Object.create()（生成操做）代替

【Object.getPrototypeOf()】

　　该方法与Object.setPrototypeOf()方法配套，用于读取一个对象的原型对象

Object.getPrototypeOf(obj);

【Object.setPrototypeOf()】

　　ES6添加了Object.setPrototypeOf()方法，与__proto__做用相同，经过这个方法能够改变任意指定对象的原型，它接受两个参数：被改变原型的对象及替代第一个参数原型的对象，它是ES6正式推荐的设置原型对象的方法

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
var o = Object.setPrototypeOf({}, null);

　　例子以下

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

　　这段代码中定义了两个基对象：person和dog。两者都有getGreeting()方法，且都返回一个字符串。friend对象先继承person对象，调用getGreeting()方法输出"Hello"；当原型被变动为dog对象时，原先与person对象的关联被解除，调用person.getGreeting()方法时输出的内容就变为了"Woof"

　　对象原型的真实值被储存在内部专用属性[[protơtype]]中，调用Object.getPrototypeOf()方法返回储存在其中的值，调用Object.setPrototypeOf()方法改变其中的值。然而，这不是操做[[prototype]]值的惟一方法

【简化原型访问的Super引用】

　　ES6引入了Super引用，使用它能够更便捷地访问对象原型

　　若是想重写对象实例的方法，又须要调用与它同名的原型方法，则在ES5中能够这样实现

let person = {
    getGreeting() {
        return "Hello";
    }
};
let dog = {
    getGreeting() {
        return "Woof";
    }
};
let friend = {
    getGreeting() {
        return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
    }
};
// 将原型设置为 person
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(Object.getPrototypeOf(friend) === person); // true
// 将原型设置为 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting()); // "Woof, hi!"
console.log(Object.getPrototypeOf(friend) === dog); // true

　　在这个示例中，friend对象的getGreeting()方法调用了同名的原型方法。object.getPrototypeOf()方法能够确保调用正确的原型，并向输出字符串叠加另外一个字符串；后面的.call(this)能够确保正确设置原型方法中的this值

　　要准确记得如何使用Object.getPrototypeOf()方法和call(this)方法来调用原型上的方法实在有些复杂，因此ES6引入了Super关键字。简单来讲，Super引用至关于指向对象原型的指针，实际上也就是Object.getPrototypeOf(this)的值。因而，能够这样简化上面的getGreeting()方法

let friend = {
    getGreeting() {
        // 这至关于上个例子中的：
        // Object.getPrototypeOf(this).getGreeting.call(this)
        return super.getGreeting() + ", hi!";
    }
};

　　调用super.getGreeting()方法至关于在当前上下文中调用Object.getPrototypeOf(this).getGreeting.call(this)。一样，能够经过Super引用调用对象原型上全部其余的方法。固然，必需要在使用简写方法的对象中使用Super引用，若是在其余方法声明中使用会致使语法错误

let friend = {
    getGreeting: function() {
        // 语法错误
        return super.getGreeting() + ", hi!";
    }
};

　　在这个示例中用匿名function定义一个属性，因为在当前上下文中Super引用是非法的，所以当调用super.getGreeting()方法时会抛出语法错误

　　Super引用在多重继承状况下很是有用，由于在这种状况下，使用Object.getPrototypeOf()方法将会出现问题

let person = {
    getGreeting() {
        return "Hello";
    }
};
// 原型为 person
let friend = {
    getGreeting() {
        return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
    }
};
Object.setPrototypeOf(friend, person);
// 原型为 friend
let relative = Object.create(friend);
console.log(person.getGreeting()); // "Hello"
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(relative.getGreeting()); // error!

　　this是relative，relative的原型是friend对象，当执行relative的getGreeting()方法时，会调用friend的getGreeting()方法，而此时的this值为relative。object.getPrototypeOf(this)又会返回friend对象。因此就会进入递归调用直到触发栈溢出报错

　　在ES5中很难解决这个问题，但在ES6中，使用Super引用即可以迎刃而解

let person = {
    getGreeting() {
        return "Hello";
    }
};
// 原型为 person
let friend = {
    getGreeting() {
        return super.getGreeting() + ", hi!";
    }
};
Object.setPrototypeOf(friend, person);
// 原型为 friend
let relative = Object.create(friend);
console.log(person.getGreeting()); // "Hello"
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(relative.getGreeting()); // "Hello, hi!"

　　Super引用不是动态变化的，它老是指向正确的对象，在这个示例中，不管有多少其余方法继承了getGreeting()方法，super.getGreeting()始终指向person.getGreeting()方法

方法定义

　　在ES6之前从未正式定义过"方法"的概念，方法仅仅是一个具备功能而非数据的对象属性。而在ES6中正式将方法定义为一个函数，它会有一个内部的[[HomeObject]]属性来容纳这个方法从属的对象

let person = {
    // 方法
    getGreeting() {
        return "Hello";
    }
};
// 并不是方法
function shareGreeting() {
    return "Hi!";
}

　　这个示例中定义了person对象，它有一个getGreeting()方法，因为直接把函数赋值给了person对象，于是getGreetingo方法的[[HomeObject]]属性值为person。而建立shareGreeting()函数时，因为未将其赋值给一个对象，于是该方法没有明肯定义[[HomeObject]]属性。在大多数状况下这点小差异可有可无，可是当使用Super引用时就变得很是重要了

　　Super的全部引用都经过[[HomeObject]]属性来肯定后续运行过程。第一步是在[[HomeObject]]属性上调用Object.getprototypeof()方法来检索原型的引用，而后搜寻原型找到同名函数，最后设置this绑定而且调用相应方法

let person = {
    getGreeting() {
        return "Hello";
    }
};
// 原型为 person
let friend = {
    getGreeting() {
        return super.getGreeting() + ", hi!";
    }
};
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // "Hello, hi!"

　　调用friend.getGreeting()方法会将person.getGreeting()的返回值与"，hi!"拼接成新的字符串并返回。friend.getGreeting()方法的[[HomeObject]]属性值是friend，friend的原型是person，因此super.getGreeting()等价于Person.getGreeting.call(this)

对象遍历

【Object.keys()】

　　ES5 引入了Object.keys()方法，返回一个数组，成员是参数对象自身的（不含继承的）全部可遍历（enumerable）属性的键名

var obj = { foo: 'bar', baz: 42 };
console.log(Object.keys(obj));// ["foo", "baz"]

　　ES2017 引入了跟Object.keys配套的Object.values和Object.entries，做为遍历一个对象的补充手段，供for...of循环使用

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

【Object.values()】

　　Object.values()方法返回一个数组，成员是参数对象自身的（不含继承的）全部可遍历（enumerable）属性的键值

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj));// ["bar", 42]

　　Object.values()只返回对象自身的可遍历属性

var obj = Object.create({}, {p: {value: 42}});
console.log(Object.values(obj)); // []

　　上面代码中，Object.create()方法的第二个参数添加的对象属性（属性p），若是不显式声明，默认是不可遍历的，由于p的属性描述对象的enumerable默认是false，Object.values()不会返回这个属性。只要把enumerable改为true，Object.values就会返回属性p的值

var obj = Object.create({}, {p:
  {
    value: 42,
    enumerable: true
  }
});
console.log(Object.values(obj)); // [42]

【Object.entries()】

　　Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）全部可遍历（enumerable）属性的键值对数组

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));// [ ["foo", "bar"], ["baz", 42] ]

　　除了返回值不同，该方法的行为与Object.values基本一致

　　Object.entries()的基本用途是遍历对象的属性

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2