ES6 学习笔记之对象的拓展

2023-10-21 14:43:50 浏览数 (2)

属性的简洁表示法

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

代码语言:javascript复制
var foo = 'bar';
var baz = {foo};
console.log(baz);
// { foo: 'bar' }

// 等同于
var baz = {foo: foo};

另外一个例子

代码语言:javascript复制
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 )差不多,函数名 参数 花括号。另外注意简洁写法的属性名是按字符串解析的。方法的属性名可以是一些关键字,由于是按字符串来解析的,所以不会产生歧义。

代码语言:javascript复制
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 中允许使用表达式。比如两个字符串拼接成一个方法名,如下所示:

代码语言:javascript复制
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() 方法

该方法用来弥补 == 和 === 的缺陷,可以严格对比两个对象是否相等。

代码语言:javascript复制
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 的实现

代码语言:javascript复制
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() 方法

代码语言:javascript复制
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 常见的用法在书中也列举了很多,我觉得非常实用,所以自己手抄一下给大家分享,更多请参考原著。

代码语言:javascript复制
// 给对象添加属性
class Point {
  constructor(x, y) {
    Object.assign(this, { x, y });
  }
}

console.log(new Point(10, 20));
// Point { x: 10, y: 20 }
代码语言:javascript复制
// 给对象添加方法
Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    // ...
  },
  anotherMethod() {
    // ...
  }
});

// 等同于下面的方式

SomeClass.prototype.someMethod = function (arg1, arg2) { /* ... */ };
SomeClass.prototype.anotherMethod = function () { /* ... */ };

0 人点赞