使用过滤器方法修改数组元素答案

【问题标题】：Modifying an array element using filter method使用过滤器方法修改数组元素
【发布时间】：2019-12-20 11:03:45
【问题描述】：

我正在尝试使用 .filter() 方法修改 Vue.js 列表中的元素。新元素来自 Pusher。我正在监听事件并尝试像这样更新元素：

users.filter((obj) => {
    Echo.private(`user.${obj.id}`).listen('.userupdated', (e) => {
        return obj = e.user; // or return e.user; also doesn't work
    });
});

这不起作用。两个对象在结构上是相同的，但是通过 Pusher 的新对象包含更新的信息。

另一方面，当我尝试修改属性时，它可以工作：

users.filter((obj) => {
    Echo.private(`user.${obj.id}`).listen('.userupdated', (e) => {
        return obj.name = e.user.name;
    });
});

我做错了什么？是否不允许像这样替换整个元素？

【问题讨论】：

我正在尝试使用 .filter() 方法修改 Vue.js 列表中的元素。 对于 filter，这听起来不是一个好的用例。
@Psidom 感谢您的评论。您能否建议一种更好的方式来订阅多个 Pusher 频道？
一个简单的for循环应该可以吗？使用索引修改原数组？
obj.name 有效，因为obj 本身就是一个指向对象的引用，因此您通过执行obj.name = e.user.name 来修改底层对象。在使用 obj = e.user 时，您将覆盖 obj 变量，这不会影响原始数组中存储的引用。
@Rehmat 修改属性在没有return 的情况下也可以正常工作。您不会从该回调返回到外部函数，因为返回不是那样工作的

标签： javascript vue.js pusher

【解决方案1】：

根据MDN，过滤器的作用是这样的：

filter() 方法创建一个包含所有通过的元素的新数组由提供的函数实现的测试。

所以你所做的基本上是以错误的方式使用过滤器。您应该做的是在事件触发时迭代旧数组并随时更新它。

我的建议：在事件触发时，调用一个仅用于该目的的函数，并使用更新的值和位置来替换它，然后以编程方式处理它！

【讨论】：

我担心的是，如果实现结果的方法不对，那么为什么return obj.name = e.user.name; 有效？
@Rehmat 这是一种你正在使用的 hack，它可以让你在旅途中修改对象的属性，但不应该这样，你是对的，它正在工作，但它是显然不是适当的行为。对象属性可以修改，但它的变量引用不能像带有 const 关键字的对象，您可以更改它的属性但不能分配新对象
我赞成这个答案。谢谢！ p.s.将等待更好的答案，如果我没有得到更好的答案，我会将其标记为已接受。
@Rehmat 太好了，再次感谢，让您的代码模块化创建一个专门用于处理事件数组的函数。如果您正在寻找更好的解释对象的属性分配如何工作，但不是整个对象的重新分配不起作用，我认为您应该查看对象初始化，它的存储和行为方式，也许看看对象在使用 const 创建后如何工作关键字，这是相同的行为
@Rehmat 了解更多关于 Obj 行为的信息：stackoverflow.com/questions/44604212/…