ES6 学习笔记之对象的拓展

我与梦想有个约会

发布于 2020-01-05 15:02:17

2610

发布于 2020-01-05 15:02:17

属性的简洁表示法

可以直接使用一个变量来初始化对象，变量名即属性名，变量值即属性值。

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 () { /* ... */ };

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年2月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法