时间戳

首页 > 解决方案 > 代码审查：在 Javascript 中简洁地深度过滤对象数组

javascript - 代码审查：在 Javascript 中简洁地深度过滤对象数组

问题描述

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

示例： 我目前正在为一家在线商店开发此示例，我需要从基于 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",
    }]
}]

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

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

谢谢你的帮助！

标签： javascriptarraysfiltering

解决方案

这可能更适合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 的文章。

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

推荐阅读