ES6 学习笔记之对象的拓展
- 2020 年 1 月 5 日
- 笔记
属性的简洁表示法
可以直接使用一个变量来初始化对象，变量名即属性名，变量值即属性值。
var foo = 'bar'; var baz = {foo}; console.log(baz); // { foo: 'bar' } // 等同于 var baz = {foo: foo};
另外一个例子
function f_es5(x, y) { return { x: x, y: y }; } function f_es6(x, y) { return { x, y }; } console.log(f_es5(1, 2)); // { x: 1, y: 2 } console.log(f_es5(3, 4)); // { x: 3, y: 4 }
方法的简洁表示法
ES6 简洁方法后与一些面向对象的高级语言（如C++）差不多，函数名+参数+花括号。另外注意简洁写法的属性名是按字符串解析的。方法的属性名可以是一些关键字，由于是按字符串来解析的，所以不会产生歧义。
var obj_es5 = { 'method': function () { return 'Hello ES5 style.'; } } var obj_es6 = { method() { return 'Hello ES6 style.'; } } console.log(obj_es5.method()); console.log(obj_es6.method());
用表达式定义属性名和方法名
ES5 中仅允许使用字面常量来定义属性名和方法名，而 ES6 中允许使用表达式。比如两个字符串拼接成一个方法名，如下所示：
var attrKey = 'foo'; var funcName = 'show' var obj = { [attrKey]: true, ['get' + 'Name']: 'Pency', ['print' + 'Hello'] () { console.log('Hello!'); }, [`${funcName}Message`] () { console.log('Hi, this is a ES6 style function.'); } } console.log(obj.foo, obj.getName); // true 'Pency' obj.printHello(); // Hello! obj.showMessage(); // Hi, this is a ES6 function.
Object.is() 方法
该方法用来弥补 == 和 === 的缺陷，可以严格对比两个对象是否相等。
console.log(Object.is('foo', 'foo')); // true console.log(Object.is({}, {})); // false console.log(+0 === -0); // true console.log(NaN === NaN); // false console.log(Object.is(+0, -0)); // false console.log(Object.is(NaN, NaN)); // true
从书中复制过来的 ES5 实现 Object.is 的实现
Object.defineProperty(Object, 'is', { value: function(x, y) { if (x === y) { // 针对+0 不等于 -0的情况 return x !== 0 || 1 / x === 1 / y; } // 针对NaN的情况 return x !== x && y !== y; }, configurable: true, enumerable: false, writable: true });
Object.assign() 方法
var target = { a: 1, b: 1 }; var source1 = { b: 2, c: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); console.log(target); // { a: 1, b: 2, c: 3 }
Object.assign 常见的用法在书中也列举了很多，我觉得非常实用，所以自己手抄一下给大家分享，更多请参考原著。
// 给对象添加属性 class Point { constructor(x, y) { Object.assign(this, { x, y }); } } console.log(new Point(10, 20)); // Point { x: 10, y: 20 }
// 给对象添加方法 Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { // ... }, anotherMethod() { // ... } }); // 等同于下面的方式 SomeClass.prototype.someMethod = function (arg1, arg2) { /* ... */ }; SomeClass.prototype.anotherMethod = function () { /* ... */ };
