使用數組作為鍵來遍歷JavaScript中的對象

Question

我正在學習JavaScript，並花了很多時間練習遍歷對象數組和數組。 我想學習如何將數組用作對象數組的過濾器。 我找不到任何說明如何執行此操作的文章，所以我自己使用了嵌套循環。 但是，我無法使其正常工作。

Var catKey []; 是包含要用於通過var posts []過濾的數據的數組； ，在[Property]貓[[]]中識別哪些對象具有匹配項，然后返回title屬性。 我知道我可以使用array.Filter，但是我希望能夠在不總是知道catKey數組中的項目數的前提下執行此操作。 該用例適用於以下情況：我使用事件處理程序，當我添加的鏈接在WordPress中的帖子上單擊並返回類別ID時，我將在帖子列表中進行搜索，以查找具有相同類別的其他帖子IDS。 誰能告訴我我要去哪里錯了。

var catKey = [2, 6];
var posts = [
  {
    id: 1,
    cat: [1, 2, 3],
    title: "Hello World"
  },
  {
    id: 2,
    cat: [5, 6, 7],
    title: "Hello JavaScript"
  },
  {
    id: 3,
    cat: [8, 9],
    title: "Hello Arrays!"
  }
];

for (var i = 0; i < catKey.length; i++) {
  for (var j = 0; j < posts.length[i]; j++) {
    if (catKey[i] === posts[j].cat) {
      document.write(posts[j].title);
    }
  }
}

Answer 1

根據您的問題，我假設catKey包含一個嵌套的cat數組應匹配的數字白名單，即，只要在catKeys找到cat數組中的任何值，就希望保留它們。

在這種情況下，您可以簡單地使用.filter()遍歷所有帖子，並評估各個帖子的cat數組與白名單之間是否存在任何交集：

var filteredPosts = posts.filter(function(post) {
  return post.cat.filter(function(c) { return catKey.indexOf(c) !== -1; }).length;
});

如果您想嘗試用ES6編寫代碼，那也不是問題：它更加簡潔！

const filteredPosts = posts.filter(post => post.cat.filter(c => catKey.includes(c)).length);

請參閱下面的概念驗證：

 var catKey = [2, 6]; var posts = [{ id: 1, cat: [1, 2, 3], title: "Hello World" }, { id: 2, cat: [5, 6, 7], title: "Hello JavaScript" }, { id: 3, cat: [8, 9], title: "Hello Arrays!" } ]; var filteredPosts = posts.filter(function(post) { return post.cat.filter(function(c) { return catKey.indexOf(c) !== -1; }).length; }); console.log(filteredPosts); 

Answer 2

您可以使用map和find一起檢查對象數組中的值和數組中的值。 使用map的catKey陣列是迭代和為every element find用於查找陣列命名內部的目標內部的數組中的元素post使用.includes()方法。

 var catKey = [2, 6]; var posts = [{ id: 1, cat: [1, 2, 3], title: "Hello World" }, { id: 2, cat: [5, 6, 7], title: "Hello JavaScript" }, { id: 3, cat: [8, 9], title: "Hello Arrays!" }]; console.log(catKey.map((e) => posts.find((x) => x.cat.includes(e)))) 

Answer 3

要找到符合您條件的第一個條目，可以使用Array.prototype.find()函數：

 var catKey = [2, 6]; var posts = [ { id: 1, cat: [1, 2, 3], title: "Hello World" }, { id: 2, cat: [5, 6, 7], title: "Hello JavaScript" }, { id: 3, cat: [8, 9], title: "Hello Arrays!" } ]; const resObj = posts .find(p => p.cat.some(c => catKey.includes(c))) .title; console.log(resObj) 

或查找所有 ，使用Array.prototype.filter() ：

 var catKey = [2, 6]; var posts = [ { id: 1, cat: [1, 2, 3], title: "Hello World" }, { id: 2, cat: [5, 6, 7], title: "Hello JavaScript" }, { id: 3, cat: [8, 9], title: "Hello Arrays!" } ]; const resObjs = posts .filter(p => p.cat.some(c => catKey.includes(c))) .map(o => o.title); resObjs.forEach((t) => console.log(t)); 

Answer 4

 var catKey = [2, 6]; var posts = [ { id: 1, cat: [1, 2, 3], title: "Hello World" }, { id: 2, cat: [5, 6, 7], title: "Hello JavaScript" }, { id: 3, cat: [8, 9], title: "Hello Arrays!" } ]; var result = posts.filter(({cat})=>{ return catKey.filter((key)=>{ return cat.includes(key) }).length > 0 }) console.log(result); 

簡潔版本

posts.filter(({ cat }) => catKey.filter(key => cat.includes(key)).length > 0);