JavaScript - 匹配数组中的对象并删除或添加答案

【问题标题】：JavaScript - match object in array and remove or addJavaScript - 匹配数组中的对象并删除或添加
【发布时间】：2020-08-23 06:26:31
【问题描述】：

我正在尝试从数组中查找并删除一个对象，或者根据它是否已经存在将其推送到数组中。我尝试了 for if 循环和 forEach 循环，但似乎无法破解它。这是我目前所拥有的：

        // object in store to be modified
        this.sorts = [
          { field: "title", direction: "asc" },
          { field: "value", direction: "asc" }, // remove if exists, add if not
          { field: "quality", direction: "asc" },
        ];

        <button @click="handleCheckbox('value', 'asc')">Value</button>; // example

        handleCheckbox(field, dir) {
        this.sorts.forEach((field, i) => {
          if (this.sorts[i].field === field) {
            this.sorts = this.sorts.splice(i, 1); // remove if passed field is found in array
            console.log("deleted=", this.sorts[i]);
            return;
          } else {
            this.sorts.push({ field: field, direction: dir }); // add if passed field is not found
            console.log("pushed=", this.sorts[i]);
            return;
          }
        });
        // state.commit("setSorts", this.sorts);
        }

【问题讨论】：

使用.findIndex() 查找条目。如果索引不是-1，则拼接出来；否则推送新条目。

标签： javascript arrays vue.js

【解决方案1】：

您可以使用findIndex，然后将对象相应地推入数组。

var arr = [
  { field: "title", direction: "asc" },
  { field: "value", direction: "asc" }, // remove if exists, add if not
  { field: "quality", direction: "asc" },
];

function findObject(obj, value) {
  var index = arr.findIndex(function(item) {
    if (item.field === value) {
      return true;
    }
  });

  if (!index) { 
    arr.push(obj);
  }
}

findObject({ field: "value", direction: "asc" }, 'value');

【讨论】：

【解决方案2】：

您可以使用 findIndex 获取其字段作为传递给函数的field 参数的对象的索引，并根据索引进行推送或拼接。这是使用 vanillaJs 解决方案的可能实现

var sorts = [
          { field: "title", direction: "asc" },
          { field: "value", direction: "asc" },
          { field: "quality", direction: "asc" },
        ];

function handleCheckbox(field, direction) {
  var index = sorts.findIndex(function(sort){
    sort.field == field
    // test checks: console.log(sort.field, field)
  });
    // test checks: console.log(index)
  if (index < 0) { 
    sorts.push({ field, direction});
  }else{
     sorts.splice(index, 1);
    }
}

【讨论】：

【解决方案3】：

试试这个：

let sorts = [
    { field: "title", direction: "asc" },
    { field: "value", direction: "asc" },
    { field: "quality", direction: "asc" },
];

function handleCheckbox(field, direction) {
    let index = sorts.findIndex(sort => sort.field == field);

    if (index === -1) {
        sorts.push({ field: field, direction: direction });
        return;
    }

    sorts.splice(index, 1);
}

handleCheckbox("value", "asc");
console.log(sorts); // sorts = [ { field: "title", direction: "asc" }, { field: "quality", direction: "asc" } ];

handleCheckbox("new", "asc");
console.log(sorts); // sorts = [ { field: "title", direction: "asc" }, { field: "quality", direction: "asc" }, { field: "new", direction: "asc" } ];

【讨论】：