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

Question

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

我的 v-for 在我的模板中

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

我的 object：

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

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

在此先感谢，如果有什么不够清楚，请告诉我。

Answer 1

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

我的首选方法，在您的示例中：使用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);

将上述任何功能与 function 结合将防止您编写重复代码。

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

Answer 2

您的要求可以通过以下代码来满足，因为 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';
     }
   })
}

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