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

IT技术 javascript node.js dictionary functor
2021-02-25 02:41:27

我对 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})
}

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

我将非常感谢任何可以向我解释我做错了什么的人！

谢谢你。

4个回答

您没有修改原始数组。您正在修改数组中的对象。如果您想避免改变数组中的对象，您可以使用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"
    };
  });
};
@HarshaKanchina 这是 ES6 中添加的胖箭头函数语法。这是 MDN 上有关它的一些信息。
2021-04-23 02:41:27
@Asqan 在您发布的代码中，.filter(e => e)只生成一个删除了 falsey ( null, 0, undefined, 等) 值的新数组。Map 还会生成一个新数组，因此除非您想过滤掉 falsey 值，否则过滤器在这里没有用。
2021-04-25 02:41:27
existingArray.filter(e => e).map( // whatever you want )我将上面的代码用于内联解决方案，这对我来说在大多数情况下比克隆更快。由于filter函数确实提供了一个新数组，因此它不会修改现有数组中的任何内容。
2021-05-06 02:41:27
Javascript 假装是一种函数式语言，但就像 class 关键字一样，这令人困惑、不直观并且浪费了大量时间。 You're not modifying your original array. You're modifying the objects in the array- 虽然这个答案是正确的，但它是不合逻辑的，因为在现实世界中，你不能改变某些东西的一部分并让它保持不变。
2021-05-14 02:41:27
这并不是不合逻辑，因为数组不包含对象，它包含对对象的引用。引用保持不变，原始数组也是如此。被引用的对象是被修改的对象。想想书中的单词，语言会随着时间的推移而演变，因此单词的含义可能会发生变化，但书本身是相同的。
2021-05-16 02:41:27

详细说明 SimpleJ 的答案 - 如果您要 === 两个数组，您会发现它们不会相等（内存中的地址不同）确认映射的数组实际上是一个新数组。问题是您要返回一个新数组，其中包含对原始数组中相同对象的引用（它不返回新的对象文字，而是返回对同一对象的引用）。因此，您需要创建作为旧对象副本的新对象 - 即，使用 SimpleJ 提供的 Object.assign 示例。

不幸的是，无论是扩展运算符还是对象赋值运算符都进行了深度复制……您需要使用类似 lodash 的函数来获取区域副本，而不仅仅是引用副本。 

const util = require('util');
const print = (...val) => {
    console.log(util.inspect(val, false, null, false /* enable colors */));
};
const _ = require('lodash');

const obj1 =     {foo:{bar:[{foo:3}]}};
const obj2 =     {foo:{bar:[{foo:3}]}};

const array = [obj1, obj2];

const objAssignCopy = x => { return Object.assign({}, x, {})};
const spreadCopy = x => { return {...x}};
const _Copy = x => _.cloneDeep(x);

const map1 = array.map(objAssignCopy);
const map2 = array.map(spreadCopy);
const map3 = array.map(_Copy);

print('map1', map1);
print('map2', map2);
print('map3', map3);
obj2.foo.bar[0].foo = "foobar";
print('map1 after manipulation of obj2', map1); // value changed 
print('map2 after manipulation of obj2', map2); // value changed
print('map3 after manipulation of obj2', map3); // value hasn't changed!

Array Iterator Array.map() 使用相同数量的元素创建新数组或不更改原始数组。如果数组中有对象，则引用可能会出现问题，因为它复制了相同的引用，因此，当您对对象的属性进行任何更改时，它会更改包含相同引用的元素的原始值。

解决方案是复制对象，好吧，array.Splice()并且[...array]（扩展运算符）在这种情况下无济于事，您可以使用 JavaScript 实用程序库，如Loadash或仅使用下面提到的代码：

const newList = JSON.parse(JSON.stringify(orinalArr))
其它你可能感兴趣的问题
上一篇如何设置视频文件的预览，从 input type='file' 中选择 下一篇使用 POST 请求重定向的好方法？