JavaScript中如何将对象以独立属性名存入目标对象（避免属性覆盖）

嘿，我懂你的问题啦——你现在每次调用addToStore都会把之前的产品覆盖掉，根源就在于你一直给store的同一个obj属性赋值，新的产品自然会把旧的顶掉。要实现每个产品都以自己的名字作为独立属性存进store，只需要调整addToStore的逻辑就行。

问题根源 #

原来的store.obj = obj是把所有产品都塞进同一个obj键下，相当于每次都在更新同一个位置的值，所以最后只有最后一个产品会被保留。我们需要用产品自身的唯一标识（比如name）来作为store的键名，这样每个产品都能拥有自己的属性位。

修改后的代码实现 #

直接修改addToStore函数，用产品的name属性作为键来赋值：

function addToStore (obj) {
  // 方括号语法可以用变量作为对象的键名
  store[obj.name] = obj;
  return store;
}

完整的代码示例：

// 创建store对象
const store = {}
// 创建Product对象的函数
function createProduct (type, name, price) {
  return { type, name, price }
}
// 调整后的addToStore函数
function addToStore (obj) {
  store[obj.name] = obj;
  return store;
}
const strawberry = createProduct ('fruit', 'strawberry', '0.40')
const peach = createProduct ('fruit', 'peach', '0.80')
addToStore(strawberry)
addToStore(peach)
console.log(store) 
// 现在的输出结果：
// {
//   strawberry: { type: 'fruit', name: 'strawberry', price: '0.40' },
//   peach: { type: 'fruit', name: 'peach', price: '0.80' }
// }

进阶优化：避免同名产品覆盖 #

如果你的场景里可能出现同名的不同产品（比如两个不同品种的草莓），可以给每个产品添加唯一的id标识，用id作为键会更稳妥：

// 给Product添加id属性
function createProduct (id, type, name, price) {
  return { id, type, name, price }
}
// 对应的addToStore函数
function addToStore (obj) {
  store[obj.id] = obj;
  return store;
}

// 使用示例
const strawberry1 = createProduct(1, 'fruit', 'strawberry', '0.40')
const strawberry2 = createProduct(2, 'fruit', 'strawberry', '0.50')
addToStore(strawberry1)
addToStore(strawberry2)
console.log(store)
// 输出会保留两个草莓产品，不会覆盖

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