为什么数组上的js映射会修改原始数组？

Question

我对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（）的文档说不应这样做（https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
）。

我什至试图创建数组的克隆以使我的功能像这样

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

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

我将非常感谢任何能够向我解释我在做错事情的人！

谢谢

Answer 1

您没有修改原始数组。您正在修改数组中的对象。如果要避免使数组中的对象发生变异，则可以使用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"
    };
  });
};