遍历并删除对象数组中的元素答案

【问题标题】：Loop through and delete elements in an array of objects遍历并删除对象数组中的元素
【发布时间】：2020-07-07 13:42:59
【问题描述】：

在我的 Vue.js 项目中，我有一个对象数组，我想列出这些对象并在浏览器中显示。我的数组包含四个对象，我只想显示 3 个。我选择 3 个对象的方式取决于用户在项目的其他位置选择并存储在变量中的首选项设置（下面称为 userPreference）。我目前停留在基于 userPreference 值从我的数组中删除一个对象的最佳和最有效的方法上。

我的模板中的 v-for

<ul v-for="item in getOutroItems"><li>item<li></ul>

我的对象：

data() {
return {
  outroItems: [{ title: "outro1", text: "XYZ" }, { title: "outro2", text: "ABC" }, { title: "outro3", 
               text`enter code here`: "QRS" }, { title: "outro4", text: "TUV" }],
  userPreference: ""
};

}

我的计算属性（这是我目前拥有的）

getOutroItems() { 
   this.outroItems.filter((value) => {
     if(this.userPreference === "newsletter") {
        /// here I want to remove outro2 from my array and return an array with the other 3 values
     } else (this.userPreference === "noNewsletter") {
        /// here I want to remove outro3 from my array and return an array with the other 3 values
     }
   })
}

那么，从数组中删除特定元素的最佳方法是什么？

提前致谢，如果有什么不清楚的地方请告诉我。

【问题讨论】：

this.userPreference 可以有多少个不同的值，或者您刚才提到的只有 2 个值？

标签： javascript arrays vue.js

【解决方案1】：

您的要求可以通过下面的代码来满足，因为 array.filter 只希望返回 true 或 false 以接受或删除其数组中的元素。

getOutroItems() { 
   this.outroItems.filter((value) => {
     if(this.userPreference === "newsletter") {
        // here I want to remove outro2 from my array and return an array with the other 3 values
      return value.title != 'outro2';
     } else (this.userPreference === "noNewsletter") {
        // here I want to remove outro3 from my array and return an array with the other 3 values
    return value.title != 'outro3';
     }
   })
}

但是，如果您不想创建另一个很大的数组。您应该将要删除的这些元素与数组中的结束索引元素交换并从数组中弹出这些元素。

【讨论】：

【解决方案2】：

有多种方法可以从数组中获取正确的项目。

我的首选方法，在您的示例中：使用array.filter

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

const leftOverItems = outroItems.filter((item) => item.title !== "outro2");

console.log(leftOverItems);

另一种选择是找到要删除的项目的索引，然后使用splice将其删除

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

const itemToDelete = outroItems.find((item) => item.title === "outro2");
const indexToDelete = outroItems.indexOf(itemToDelete);

outroItems.splice(indexToDelete, 1);

console.log(outroItems);

将上面的任何函数与函数结合起来可以防止你编写重复的代码。

const itemToRemove = (arr, attr, name) => {
  return arr.filter((item) => item[attr] !== name);
}

const outroItems = [
  { title: "outro1", text: "XYZ" },
  { title: "outro2", text: "ABC" },
  { title: "outro3", text: "QRS" },
  { title: "outro4", text: "TUV" }
];

// Remove from "outroItems" where "title" is "outro2"
const removed2 = itemToRemove(outroItems, "title", "outro2");
// Remove from "outroItems" where "title" is "outro3"
const removed3 = itemToRemove(outroItems, "title", "outro3");
// Remove from "outroItems" where "text" is "TUV"
const removedTUV = itemToRemove(outroItems, "text", "TUV");

console.log(removed2);
console.log(removed3);
console.log(removedTUV);

【讨论】：