ES6 对象扩展教程：简洁表示法、属性表达式、Object.is与assign

属性的简洁表示法

在 JavaScript 中，对象是最核心的数据结构。ES6 标准对其进行了重要的升级与增强。

ES6 允许在大括号内部直接写入变量或函数，以此作为对象的属性名和方法。这种写法使得代码结构更加紧凑简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};

在上述代码示例中，变量 foo 直接置于大括号内。此时，属性名即为变量名，属性值对应变量的值。参考以下另一个示例。

function f(x, y) {
  return {x, y};
}
// 等同于
function f(x, y) {
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

下面展示一个实际应用场景。

let birth = '2000/01/01';
const Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};

在使用 CommonJS 规范输出模块变量时，采用这种简洁写法非常合适。

let ms = {};
function getItem (key) {
  return key in ms ? ms[key] : null;
}
function setItem (key, value) {
  ms[key] = value;
}
function clear () {
  ms = {};
}
module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

属性名表达式

JavaScript 定义对象属性主要有两种方式。

// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;

前文代码展示了方法一：直接使用标识符作为属性名；方法二则是使用表达式作为属性名，此时需将表达式包裹在方括号内。ES6 允许在对象字面量定义中使用方法二，即通过方括号内的表达式来指定属性名。

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

方法的 name 属性

函数拥有 name 属性，用于返回函数名称。由于对象方法本质上也是函数，因此它们同样具备 name 属性。

const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"

上述代码中，方法的 name 属性返回的是函数名（即方法定义时的名称）。

对象的扩展运算符

在《数组的扩展》章节中，已介绍过扩展运算符（...）。ES2018 将该运算符引入到对象操作中。对象的解构赋值用于从源对象中提取值，其作用相当于将目标对象自身所有可遍历（enumerable）且尚未被读取的属性，分配给指定的目标对象。所有键名及其对应的值都会被拷贝至新对象中。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

对象的新增方法-Object.is()

在 ES5 中，比较两个值是否相等仅依赖两个运算符：相等运算符（==）和严格相等运算符（===）。这两者均存在局限性：前者会自动进行数据类型转换，而后者存在 NaN 不等于自身，以及 +0 等于 -0 的情况。JavaScript 此前缺乏一种能在所有环境下确保只要两个值相同即判定为相等的运算。为此，ES6 提出了“Same-value equality”（同值相等）算法，Object.is 便是实现该算法的新方法。它用于比较两个值是否严格相等，其行为与严格比较运算符（===）基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

两者的主要区别在于两点：一是 +0 不等于 -0，二是 NaN 等于其自身。

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

对象的新增方法-Object.assign()

Object.assign() 方法用于执行对象的合并操作，将源对象（source）的所有可枚举属性复制到目标对象（target）。

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

以上即为 ECMAScript 6 对象扩展实现的详细内容，如需了解更多关于 ECMAScript 6 对象扩展的资料，请持续关注本站其他相关文章。

ECMAScript 6 对象扩展详解：简洁语法、属性表达式与新增方法