为什么一个数组上的js映射会修改原来的数组？

数组上的js映射会修改原来的数组？"/>

为什么一个数组上的js映射会修改原来的数组？

我对 map() 的行为很困惑。

我有一个像这样的对象数组：

const products = [{
    ...,
    'productType' = 'premium',
    ...
}, ...]

我将这个数组传递给一个函数，该函数应该返回相同的数组但所有产品都是免费的：

[{
    ...,
    'productType' = 'free',
    ...
}, ...]

函数是：

const freeProduct = function(products){
    return products.map(x => x.productType = "free")
}

返回以下数组：

["free", "free", ...]

所以我将函数重写为：

const freeProduct = function(products){
    return products.map(x => {x.productType = "free"; return x})
}

按预期返回数组。

但是！这就是我失去理智的那一刻，在这两种情况下，我的原始产品数组都被修改了。

有关 map() 的文档说它不应该（）。

我什至尝试创建一个数组的克隆，将我的函数变成这样：

const freeProduct = function(products){
    p = products.splice()
    return p.map(x => {x.productType = "free"; return x})
}

但我仍然得到相同的结果（这开始让我发疯）。

我会非常感谢任何能解释我做错了什么的人！

谢谢。

您没有修改原始数组。您正在修改数组中的对象。如果你想避免改变数组中的对象，你可以使用

Object.assign

const freeProduct = function(products) {
  return products.map(x => {
    return Object.assign({}, x, {
      productType: "free"
    });
  });
};

2018编辑：

在大多数浏览器中，您现在可以使用对象传播语法代替

Object.assign

const freeProduct = function(products) {
  return products.map(x => {
    return {
      ...x,
      productType: "free"
    };
  });
};