在Nuxtjs中使用reduce时更改了源数据

如何解决在Nuxtjs中使用reduce时更改了源数据

我的代码：

export default {
  data() {
    return {
      services: [],mydata: [
        {id: 1,count: 102,price: 0.1},{id: 1,count: 0,price: 0.09},{id: 2,count: 20,price: 0.5},]
    };
  },mounted() {
    this.start();
  },methods: {
    start() {
      this.services = this.mydata.reduce((acc,curr) => {
        let item = acc.find((obj) => obj.id == curr.id);
        if (item) {
          item.count += curr.count;
          item.price = item.price > curr.price ? curr.price : item.price;
        } else {
          acc.push(curr);
        }
        return acc;
      },[]);
    },},};

我想合并mydata数组并保存到services变量中。我希望将count求和，并为新对象选择较低的price。 （我使用reduce来做到这一点）

我期望的services：

[
        {id: 1,]

这是可行的，但是源数据（mydata）被操纵并转换为：（第一个对象的price被操纵并转换为0.09，之前为0.1）

[
        {id: 1,price: 0.5}
]

为什么会这样？

解决方法

会发生什么？

您实际上是在骗mydata。

在数组中找到对象时会发生这种情况：

let item = acc.find((obj) => obj.id == curr.id);

然后修改

item.count += curr.count;
item.price = item.price > curr.price ? curr.price : item.price;

为什么会发生？

在JavaScript中，我们有两种类型的od数据类型。

• 原始类型（Boolean，String，Number，null，undefined），它们通过值传递。
• Array，Function和Object通过引用
传递

在您的情况下，您要在数组中找到某个对象，然后修改其属性，这意味着您正在对引用进行操作。

如何做到？

1. 如果您具有原始类型的数组，则可以使用例如散布运算符进行浅表复制：

let arr = ['a','b','c']
[...arr].reduce()

1. 如果您有复杂类型的数组，则需要编写自定义函数或使用一些为您实现自定义函数的库，例如Lodash或Ramda