如何修改数组中每个对象的属性值并返回？含RGB像素处理示例

假设我有一个包含r、g、b属性值的对象列表，示例代码如下：

let color_pixels = [{r: 100, g: 20, b: 40}, {r: 80, g: 50, b: 30}];

let image = function(color_pixels) { 

}

请问如何在函数中将每个属性值进行乘法运算，并更新数组后返回？

这里分两种常见场景实现，你可以按需选择：

1. 直接修改原数组（原地更新） #

如果不需要保留原始数据，直接用forEach遍历数组，逐个更新对象的r、g、b属性即可：

let image = function(color_pixels) {
  // 自定义乘法因子，可根据需求修改
  const multiplier = 2;
  color_pixels.forEach(pixel => {
    pixel.r *= multiplier;
    pixel.g *= multiplier;
    pixel.b *= multiplier;
  });
  return color_pixels;
}

调用函数后，原color_pixels数组里的对象会被直接更新，函数返回的就是这个修改后的数组。

2. 返回全新数组（不改动原数据） #

如果需要保留原始数据，建议用map生成包含新对象的新数组，避免影响原数据：

let image = function(color_pixels) {
  const multiplier = 2;
  return color_pixels.map(pixel => ({
    r: pixel.r * multiplier,
    g: pixel.g * multiplier,
    b: pixel.b * multiplier
  }));
}

这种方式下，原数组和其中的对象完全不受影响，函数返回的是全新的结果数组。

额外说明 #

• 你可以随意调整multiplier的数值，比如改成0.5就是把颜色值减半，实现暗化效果。
• 如果需要给r、g、b通道设置不同的乘法因子，直接在对应属性的计算里替换就行，比如：

return color_pixels.map(pixel => ({
  r: pixel.r * 1.2, // 红色通道乘1.2
  g: pixel.g * 0.8, // 绿色通道乘0.8
  b: pixel.b * 1.5  // 蓝色通道乘1.5
}));

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