Javascript 范围滑块推到阵列，过滤重复项，并在范围为0时从阵列中删除

我正在尝试构建一个包含各种情绪的情绪范围滑块：

更改滑块时，它会添加或删除更改为情感数组的情感：

添加或删除的条件为：

• 如果

  selectedEmotion

  array empty，则将

  emotion

  推送到array
• 如果

  emotion

  不在

  selectedEmotions[]

  中，请按

  selectedEmotions

• 如果

  emotion

  位于

  selectedEmotions[]

  中，请不要添加重复项
• 如果

  emotion.intensity

  返回到零，则从

  selectedEmotions[]中删除
  emotion

功能

buildEmotions(index, intensity) {
    //If selected is empty
    if (this.selectedEmotions.length >= 1) {
    //Loop through selected emotions and check for new value
    this.selectedEmotions.forEach(
        function (emotion, i) {
        //If not included in selected emotions push to array
        if (emotion.emotion_id !== this.emotions[index].emotion_id) {
            if (emotion.intensity) {
            this.selectedEmotions.push({
                emotion_id: this.emotions[index].emotion_id,
                intensitey: this.emotions[index].intensity,
                newIntensity: this.emotions[index].newIntensity
            });
            } else {
            console.log(this.selectedEmotions[i]);
            this.selectedEmotions.splice(i, 1);
            }
        }
        }.bind(this)
    );
    //Push new emotion to array if there are no emotions in selectedEmotions
    } else {
    this.selectedEmotions.push({
        emotion_id: this.emotions[index].emotion_id,
        intensitey: this.emotions[index].intensity,
        newIntensity: this.emotions[index].newIntensity
    });
    }
}

我遇到的问题是，范围滑块将添加重复项，并随机删除情感。它似乎适用于第一种情绪，但在选择第二种情绪后失败。

我发现两个问题：

当您选中

emotion.emotion\u id！==这个.emotions[index].emotion\u id

，您没有

其他

语句。因此，当多次改变同一张幻灯片时，其强度不会改变。要修复此问题，请添加：

在上述

if

语句的

}

结束后

您正在通过调用

splice

从阵列中删除元素。如果您始终希望数组中有1个元素，请仅修复问题1。（也可以将数组更改为简单对象）。但是如果你想要一个包含所有3种情绪的数组，那么每次幻灯片更新时都要更新-使用下一个函数代码：（这要简单得多）

这不是一个bug，但请注意，您将其称为

intensity

和

intensity

，这是两个不同的属性

---

在哪里添加副本？你能在这里提供一些更强的重现性步骤吗？例如：当您执行

X

时，就会发生这种情况。但你以为会发生别的事。对我来说，代码就像写的一样。谢谢。就快到了。如果强度降低到零，我想移除数组中的元素。抱歉，我似乎没有很好地表达我的帖子，但您已经理解了我的意图。我添加了一个

if（intensity==0）

语句，但由于某种原因，

this.selectedEmotions[index]

显示为未定义。您的示例没有复制您提到的未定义的滑块，请将滑块调整为任意数字，然后返回到0。它应该删除

selectedEmotions

数组中的情感。但是我得到了一个未定义的错误。由于某种原因，

index

不能作为

selectedEmotions

数组的键，因此我无法使用它拼接数组。好的，我在您的示例中看到了问题。问题是，

index

不是所选动作的索引，而是情绪的索引。因此，只需将您的splice命令替换为：

this.selectedEmotions.splice（this.selectedEmotions.indexOf（currentmotion），1）
else {
  emotion.intensitey = this.emotions[index].intensity;
}

buildEmotions(index, intensity) {
    const currentEmotion = this.selectedEmotions.find(emo => emo.emotion_id === this.emotions[index].emotion_id)
    if (currentEmotion){
      currentEmotion.intensitey = this.emotions[index].intensity;
      currentEmotion.newIntensity = this.emotions[index].newIntensity
    } else {
      this.selectedEmotions.push({
        emotion_id: this.emotions[index].emotion_id,
        intensitey: this.emotions[index].intensity,
        newIntensity: this.emotions[index].newIntensity
      });
    }
  }