首頁 > web前端 > js教程 > 主體

如何根據另一個數組中的匹配屬性來過濾物件數組?

Susan Sarandon
發布: 2024-10-30 00:34:28
原創
309 人瀏覽過

How can I filter an array of objects based on matching properties in another array?

用另一個物件陣列過濾物件陣列

這個問題涉及使用物件陣列(myArray)過濾物件陣列(myArray)我的過濾器)。目標是建立一個新陣列 (myArrayFiltered),其中僅包含 myArray 中與基於 userid 和 projectid 的 myFilter 中對應元素相符的元素。

考慮以下範例:

myArray = [
  {
    userid: "100",
    projectid: "10",
    rowid: "0"
  },
  {
    userid: "101",
    projectid: "11",
    rowid: "1"
  },
  {
    userid: "102",
    projectid: "12",
    rowid: "2"
  },
  {
    userid: "103",
    projectid: "13",
    rowid: "3"
  },
  {
    userid: "101",
    projectid: "10",
    rowid: "4"
  }
];

myFilter = [
  {
    userid: "101",
    projectid: "11"
  },
  {
    userid: "102",
    projectid: "12"
  },
  {
    userid: "103",
    projectid: "11"
  }
];
登入後複製

預期結果是:

myArrayFiltered = [
  {
    userid: "101",
    projectid: "11",
    rowid: "1"
  },
  {
    userid: "102",
    projectid: "12",
    rowid: "2"
  }
];
登入後複製

為了完成這個任務,我們可以使用濾鏡和一些陣列方法。這些方法在現代瀏覽器中廣泛使用,並且針對較舊的瀏覽器存在polyfills。

實作涉及使用filter方法過濾myArray,其中myFilter的每個元素用於與myArray的元素進行比較。然後使用 some 方法來檢查 myArray 中目前元素的 userid 和 projectid 屬性與 myFilter 中對應元素的 userid 和 projectid 屬性之間是否至少存在一個符合。如果存在匹配,則當前元素將包含在過濾結果中。

以下是示範此方法的範例程式碼片段:

<code class="javascript">const myArray = [{ userid: "100", projectid: "10", rowid: "0" }, { userid: "101", projectid: "11", rowid: "1"}, { userid: "102", projectid: "12", rowid: "2" }, { userid: "103", projectid: "13", rowid: "3" }, { userid: "101", projectid: "10", rowid: "4" }];
const myFilter = [{ userid: "101", projectid: "11" }, { userid: "102", projectid: "12" }, { userid: "103",  projectid: "11"}];

const myArrayFiltered = myArray.filter((el) => {
  return myFilter.some((f) => {
    return f.userid === el.userid && f.projectid === el.projectid;
  });
});

console.log(myArrayFiltered);</code>
登入後複製

此程式碼將輸出預期結果,提供一個篩選數組,僅包含myArray 中與myFilter 中指定的條件相符的物件。

以上是如何根據另一個數組中的匹配屬性來過濾物件數組?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!