javascript - 代码审查 : Deep filter array of objects concisely in Javascript

Question

一段时间以来，我一直在努力研究过滤对象数组，但我似乎无法真正掌握它。虽然我通常最后会有工作代码，但对我来说它看起来不像是优雅的代码。所以，我非常感谢代码审查和一些提示!

示例: 我目前正在为一家在线商店开发这个示例，我需要根据 id 从一组对象中检索产品详细信息。

这是我的辅助函数:

function getItemDetails(id) {
        var getCategory = shelf.filter(obj => obj.articleList.some(cat => cat.id === id));
        var getArticleList = getCategory[0].articleList;
        var getItem = getArticleList.filter(item => item.id == id);
        return getItem 
}

步骤:第一步，我尝试过滤 shelf 数组，但它会返回相应的整个数组 articleList项目。

所以，我用相同的标准再次过滤了结果，它起作用了，但对我来说它看起来非常多余。

这是一个数据示例:

const shelf = [{
    "categoryPrice": "2",
    "categoryTitle": "Flyer",
    "articleList": [{
        "id": "1",
        "articleTitle": "Green",
    }, {
        "id": "2",
        "articleTitle": "Blue",
    }],
}, {
    "categoryPrice": "3",
    "categoryTitle": "Post card",
    "articleList": [{
        "id": "3",
        "articleTitle": "Purple"
    }, {
        "id": "4",
        "articleTitle": "Yellow",
    }]
}]

我在这里检查了各种问题，包括:

• Vue/Javascript filter in deep object inside object array
• Deep filter objects in javascript array

但在我看来，它们都没有提供更简单、更简洁的解决方案。我错过了什么？

感谢您的帮助!

Answer 1

这可能更适合 codereview但如果问题只是“如何使它更简洁”，我会建议如下内容:

const shelf = [{
  "categoryPrice": "2",
  "categoryTitle": "Flyer",
  "articleList": [{
    "id": "1",
    "articleTitle": "Green",
  }, {
    "id": "2",
    "articleTitle": "Blue",
  }],
}, {
  "categoryPrice": "3",
  "categoryTitle": "Post card",
  "articleList": [{
    "id": "3",
    "articleTitle": "Purple"
  }, {
    "id": "4",
    "articleTitle": "Yellow",
  }]
}]

const findItem = function(shelves, id) {
  return shelves.flatMap((shelf) => shelf.articleList).find((article) => article.id == id) || null;
}

console.log(findItem(shelf, 1));
console.log(findItem(shelf, 3));

上面的示例连接所有文章列表，然后在该数组中搜索具有提供的 ID 的文章。

性能明智？不是最好的，但您要求的是简洁的东西，而这与给定数据结构所希望的一样简洁。