JavaScript对象数组单键更新异常：thumb字段修改输出错误

架构老林

2026-5-11

问题排查与修正方案

嘿，我来帮你搞定这个问题！你遇到的额外索引键（比如0:'s'、1:'e'这类），根源出在Object.assign的参数使用错误上，咱们一步步拆解：

为什么会出现额外索引？

你写的代码里，Object.assign的第三个参数是product.thumb = product.thumb ? 'server'+product.thumb : ''——这是一个赋值表达式，它的返回值是赋值后的字符串（比如'server/abc.jpg'）。而Object.assign会把字符串当成「类数组对象」处理：字符串的每个字符会以「索引数字为键、字符为值」的形式被合并到新对象里，这就导致了那些莫名其妙的额外键。

两种正确的修正写法

写法1：用对象展开运算符（最推荐，代码更清晰）

直接返回一个新对象，先展开原对象的所有属性，再覆盖thumb字段，完全符合你只更新单个键的需求：

searchedProducts = products.map(product => {
  return {
    ...product,
    thumb: product.thumb ? `server/${product.thumb}` : ''
  };
});

我这里加了个斜杠/，确保路径格式是server/abc.jpg，如果你的原thumb已经带斜杠，可以去掉这个斜杠改成server${product.thumb}。

写法2：正确使用`Object.assign`

如果你坚持要用Object.assign，只要把要更新的字段包装成一个对象即可，不要直接放赋值表达式：

searchedProducts = products.map(product => {
  return Object.assign({}, product, {
    thumb: product.thumb ? `server/${product.thumb}` : ''
  });
});

这里第三个参数是一个仅包含thumb键的对象，Object.assign只会合并这个对象的键值对，不会处理字符串的类数组属性。