如何使用对象从对象数组javascript中删除它？

Question

我有一个对象数组，我想检查给定对象是否存在于数组中，如果是，我想删除它，如果没有，我必须将它添加到数组中。

我正在这样做：

 var arr=[
       {
        name: "Jack",
        type: "Jill",
        },
        {
        name: "Heer",
        type: "Ranjha",
        },
       {
        name: "laila",
        type: "Majnu",
        };

]
 
var tosearch = {
        name: "Jack",
        type: "Jill",
        };
if(arr.includes(tosearch))
{
//I want to delete it from the arr.
}
else
   arr.push(tosearch)

如何实现上述实现？

谢谢

Answer 1

您可以使用此代码

arr = arr.filter(item => item !== tosearch)

但是，有更好的方法来处理这个问题，您可以为每个对象添加一个 id 字段，并在您想要检查和查找特定项目的任何地方使用该 id

arr = arr.filter(item => item.id !== tosearch.id)

Answer 2

使用过滤器从数组中删除一个元素。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const newArray = existingArray.filter(element => element.id != deleteId);

搜索我通常使用一个简单的 findIndex。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

const doesElementExist = arr.findIndex(element => element.id === selectedId);

if (doesElementExist > 0) { // Delete element }

这取决于您在对象中具有唯一标识符，可能是名称？我不确定你的数据是什么。

Answer 3

问题

Array.prototype.includes 仅适用于通过浅层引用相等的基元和对象，即如果它们是内存中的同一个对象。

解决方案

创建一个实用程序来检查数组是否包含 some 元素，其中“搜索”对象的 每个 属性都相等。

const arrayContainsObject = (array, object) =>
  array.findIndex((el) =>
    Object.entries(object).every(([key, value]) => el[key] === value)
  );

本示例如果找到则返回元素的索引，否则返回-1。

您可以使用它来过滤数组中的元素或附加它。

let result;
const index = arrayContainsObject(arr, toSearch);

if (index !== -1) {
  result = arr.filter((el, i) => i !== index);
} else {
  result = arr.concat(toSearch);
}

const arr = [
  {
    name: "Jack",
    type: "Jill"
  },
  {
    name: "Heer",
    type: "Ranjha"
  },
  {
    name: "laila",
    type: "Majnu"
  }
];

const toSearch = {
  name: "Jack",
  type: "Jill"
};

const arrayContainsObject = (array, object) =>
  array.findIndex((el) =>
    Object.entries(object).every(([key, value]) => el[key] === value)
  );

let result;
const index = arrayContainsObject(arr, toSearch);

if (index !== -1) {
  result = arr.filter((el, i) => i !== index);
} else {
  result = arr.concat(toSearch);
}

console.log(result);

Answer 4

可以使用Array.prototype.filter实现过滤：

/** utils.js */


// default options can be set, here we will create search filter which pick from id
const defaultSearchFilterOptions = { key: 'id', pick: true }


/**
 * @description
 * factory to create array filter utilities
 * @params {object} [options={}] - options used to generate the new filter
 * @params {string} [options.key='id'] - key used for comparing
 * @params {boolean} [options.pick=true] - inverse the filter (with/without)
 * @params {string} options.search - exact match to search (can be improved with a regex or whatever etc..
 * @returns {function} filter - function that can be used with `Array.prototype.filter`
 */
function createSearchFilter(options = {}) {
  // apply user's options on top of default options, user MUST pass at least "search" options
  const { key, search, pick } = { ...defaultSearchFilterOptions, ...options }
  // return a filter function, based on computed options
  return (item) => pick ? item[key] === search : item[key] !== search
}


/** app.js */

// data
var arr = [
  {
    name: "Jack",
    type: "Jill",
  },
  {
    name: "Heer",
    type: "Ranjha",
  },
  {
    name: "laila",
    type: "Majnu",
  }
];


// using factory, create a filter on name where value is "jack"
const filterInJack = createSearchFilter({ 
  key: 'name',
  search: 'Jack',
});

// using factory, create a filter on name where value is not "jack"
const filterOutJack = createSearchFilter({ 
  key: 'name',
  search: 'Jack',
  pick: false,
});

/** Results */

console.log(arr.filter(filterInJack));

console.log(arr.filter(filterOutJack));

来源：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 5

如果属性的数量是固定的（在您的情况下是 2 个 name 和 type）并且您在运行之前就知道它们，那么您可以简单地使用它。

这种方法可能不是一种理想的方法，但如果数据属于这种类型，那么我想这可能是一种很好且易于理解的方法

//here i is the index of a object in arr
if(arr[i].name == tosearch.name && arr[i].type == tosearch.type) {
   //delete it
} else {
   arr.push(tosearch);
}