JavaScript嵌套对象构建：如何为子对象添加多组键值对

我在全局作用域初始化了一个空对象，每次获取一个ID，希望为其添加对应quantity与price的键值对。脚本遍历列表时，每行存在该ID时，需添加quantity: price键值对，期望最终对象结构如下：

const obj = {
  id1: {
    qty1: price,
    qty2: price,
    qty3: price,
    qty4: price,
    qty5: price,
    qty6: price,
    qty7: price
  },
  id2: {
    qty1: price,
    qty2: price,
    qty3: price,
    qty4: price,
    qty5: price,
    qty6: price,
    qty7: price
  }
}

但当前每次运行都会覆盖原有值，仅保留一组键值对：

const obj = {}
obj[id] = { [qty]: price }

// 运行结果
obj: {
  id: {
    qty: price
  }
}

请问如何实现预期的嵌套对象结构？

你现在的代码每次给obj[id]赋值时，都会创建一个全新的对象，直接覆盖掉之前该ID对应的所有数据，所以只能保留最后一组键值对。要实现累加，核心是先确保ID对应的嵌套对象存在，再往里面添加新的键值对，而不是直接替换整个对象。

以下是几种实用的实现方式：

方式一：条件判断初始化 #

const obj = {};

// 遍历过程中调用这个函数处理每一组id、qty、price
function addItem(id, qty, price) {
  // 如果当前id还没有对应的对象，先初始化一个空对象
  if (!obj[id]) {
    obj[id] = {};
  }
  // 往已存在的对象里添加新的键值对，不会覆盖原有内容
  obj[id][qty] = price;
}

方式二：逻辑或简化初始化 #

利用逻辑或||的短路特性，把判断和初始化合并成一行：

const obj = {};

function addItem(id, qty, price) {
  // 若obj[id]不存在则赋值空对象，否则保留原有对象
  obj[id] = obj[id] || {};
  obj[id][qty] = price;
}

方式三：ES2020+的空值合并赋值 #

如果你的运行环境支持ES2020及以上语法，可以用更简洁的空值合并赋值运算符??=：

const obj = {};

function addItem(id, qty, price) {
  // 仅当obj[id]为undefined或null时，才给它赋值空对象
  obj[id] ??= {};
  obj[id][qty] = price;
}

调用示例 #

addItem('id1', 'qty1', 10);
addItem('id1', 'qty2', 20);
addItem('id2', 'qty1', 15);
addItem('id2', 'qty3', 30);

执行后obj的结构就会和你预期的一致，每个ID下会保留所有对应的quantity-price键值对。

内容的提问来源于stack exchange，提问作者flx