Question

在我的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
     }
   })
}

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

先谢谢您了，让我知道是否有任何不清楚的地方。

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

将以上任何功能与一个功能结合使用将防止您编写重复的代码。

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

但是，如果不想创建另一个较大的数组，则为

。您应该将这些要删除的元素与数组中的索引末尾元素交换，并从数组中弹出许多元素。

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

2 个答案: