使用映射仅更新 javascript 对象中的单个键

Question

我想更新对象中的 thumbnail 键。

products :[
 {
    id: 1,
    name: "sth,
    thumb : 'abc.jpg'
 }
];

我想更新该数组中所有 objects 的 products.thumb，例如 thumb: 'server/abc.jpg

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

当前输出

[{
    0: 's,
    1: 'e',
    3: 'r',
    4: 'v',
    5: 'e',
    id: 1,
    thumb :'server/abc.jpg'
}]

Answer 1

您可能打算像这样使用 Object.assign：

const products = [
  {
    id: 1,
    name: 'sth',
    thumb : 'abc.jpg'
  }
]

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

console.log(searchedProducts)

在上面的代码片段中，我正在合并：

空对象。
使用当前迭代的 product 对象。
使用另一个包含计算出的 thumb 键的对象。

Answer 2

您可以使用 destructing assignment 和 .map 来修改所有 thumb 属性。

请参阅下面的工作示例：

const products = [{id:1,name:"sth",thumb:"abc.jpg"},{id:2,name:"byt",thumb:"def.jpg"},{id:3,name:"mth"}],

res = products.map(({thumb, ...others}) => ({...others, "thumb": thumb ? "server/" + thumb:''}));
console.log(res);

Answer 3

为什么这对你不起作用？

const products = [
 {
    id: 1,
    name: 'sth',
    thumb : 'abc.jpg'
 },
 {
    id: 2,
    name: 'sth',
    thumb : 'def.jpg'
 }

];

// Non mutating

let copy = JSON.parse(JSON.stringify(products));
copy.forEach(product => {
    product.thumb = product.thumb ? 'copyserver/'+product.thumb : '';
});
console.log(copy);

// Mutating

products.forEach(product => {
    product.thumb = product.thumb ? 'server/'+product.thumb : '';
});
console.log(products);

Answer 4

您可以解构并获得 thumb 属性并将其余属性保留在 rest 中。这样您就可以保持其余属性不变：

const products = [{
    id: 1,
    name: "sth",
    thumb: 'abc.jpg'
  },
  {
    id: 2,
    name: "sth2",
    thumb: 'def.jpg'
  }
];

const newProducts = products
                      .map(({thumb, ...rest}) => ({ thumb: thumb ? `server/${thumb}` : ``, ...rest }));
    
console.log(newProducts)

Answer 5

使用扩展语法：

const products = [
  {
    id: 1,
    name: 'sth',
    thumb : 'abc.jpg'
  }
];

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

console.log(searchedProducts);

Answer 6

您也可以使用 reduce 执行此操作，用空数组初始化您的开始，

const result = products.reduce((prev, next) => {
  next.thumb = `server/${next.thumb}`;
  prev.push(next);
  return prev;
}, []);

console.log(result);

只是 map 之外的另一种方法。

使用映射仅更新 javascript 对象中的单个键

Update only a single key in a javascript object with map

javascript

ecmascript-6

higher-order-functions

map-function