javascript - 在 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变量中。我希望counts 是总和，并且price为新对象选择较低的值。（我曾经reduce这样做过）

我的预期services：

[
        {id: 1, count: 102, price: 0.09},
        {id: 2, count: 20, price: 0.5},
]

它有效，但源数据（即mydata）被操纵并转换为：（第一个对象被price操纵并转换为 0.09，之前是 0.1）

[
        {id: 1, count: 102, price: 0.09},
        {id: 1, count: 0, price: 0.09},
        {id: 2, count: 20, price: 0.5}
]

为什么会这样？

标签： javascriptvue.jsnuxt.jses6-promisereduce

解决方案

怎么了？

你实际上是在修改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 中，我们有两种类型和数据类型。

原始类型 ( Boolean, String, Number, null, undefined) 并且它们是按值传递的。
Array,Function并通过引用Object传递

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

怎么做？

如果您有原始类型数组，则可以使用例如扩展运算符进行浅拷贝：

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