如何向JavaScript对象添加键值对？

向JavaScript对象添加键值对很简单，但有多种可用的方法。虽然大部分相似，但这些方法之间有一些差异需要注意。

点符号表示法

向对象添加键值对的最常见和直接的方法是使用点符号表示法。你可能已经在过去使用过它，在大多数情况下它已经足够了。

const obj = { a: 1 };
obj.b = 2;
obj.c = 3;
// obj = { a: 1, b: 2, c: 3 }

方括号表示法

与点符号表示法类似，方括号表示法在处理动态键时非常方便，但也可以用于静态键。除此之外，它在功能和性能上与点符号表示法完全相同。

const obj = { a: 1 };
const bKey = 'b';
obj[bKey] = 2;
obj['c'] = 3;
// obj = { a: 1, b: 2, c: 3 }

Object.assign()

Object.assign()与前两种选项略有不同。它可以一次向对象添加多个属性，还可以进行浅合并两个或多个对象。但它的性能不如前两种方法，因此只有在必要时才应使用它。

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

Object.defineProperty()

另一种不常见的向对象添加键值对的方法是使用Object.defineProperty()。这是一种性能较差的方法，但它允许对新属性进行精确定义。该函数接受一个数据描述符或访问器描述符作为第二个参数，允许根据需要自定义新属性的行为。请注意，您可以使用Object.defineProperties()一次添加多个属性。

const obj = { a: 1 };
Object.defineProperty(obj, 'b', {
  value: 2,
  enumerable: true,
  configurable: true,
  writable: true
});
Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: true,
  configurable: true,
  writable: true
});
// obj = { a: 1, b: 2, c: 3 }

对象展开运算符

最后，还有对象展开运算符（...）。与前面的方法相反，这种方法不会改变原始对象，而是返回一个添加了新属性的新对象。由于需要创建一个新对象，因此这种方法的性能明显较差。

const obj = { a: 1 };
const newObj = { ...obj, b: 2, c: 3 };
// obj = { a: 1 }
// newObj = { a: 1, b: 2, c: 3 }