范围滑块推送到数组，过滤重复项，并在范围为 0 时从数组中删除

Question

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

当滑块改变时，它会添加或删除情绪变化为一系列情绪：

被添加或删除的条件是：

• 如果selectedEmotion数组为空，则将emotion推入数组
• 如果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
    });
    }
}

Here's the full codepen example

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

Answer 1

我发现了 2 个问题：

1. 当您检查emotion.emotion_id !== this.emotions[index].emotion_id 时，您没有else 语句。因此，当多次更换同一张幻灯片时 - 其强度不会改变。要解决此问题，请添加：

else {
  emotion.intensitey = this.emotions[index].intensity;
}

在上述if 语句的结束} 之后。

1. 您正在通过调用splice 从数组中删除元素。如果您总是想要数组中的 1 个元素 - 只需修复问题 1。（并且可能将数组更改为简单对象）。但是，如果您想要一个包含所有 3 种情绪的数组，则在每次幻灯片更新时更新 - 为您的函数使用下一个代码：（它更简单）

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
      });
    }
  }

1. 这不是错误，但请注意您将其称为 intensitey 和 intensity，这是两个不同的属性。