首頁猿問代碼審查：在 Javascript...

代碼審查：在 Javascript 中簡潔地深度過濾對象數組

JavaScript

ABOUTYOU 2023-10-14 16:08:04

一段時間以來，我一直在嘗試過濾對象數組，但我似乎無法真正掌握它。雖然我通常最終都會得到可以工作的代碼，但對我來說它看起來并不像優雅的代碼。因此，我非常感謝代碼審查和一些提示！示例：我目前正在為一家在線商店開發此示例，我需要根據 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", }]}]

查看完整描述

3 回答

烙印99

TA貢獻1829條經驗獲得超13個贊

這可能更適合代碼審查，但如果問題只是“如何使其更簡潔”，我會建議如下所示：

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 的文章。

性能方面？不是最好的，但您要求一些簡潔的東西，這大約是給定數據結構所希望的盡可能簡潔。

反對回復 2023-10-14

RISEBY

TA貢獻1856條經驗獲得超5個贊

這段代碼的復雜度是 O(1)，這意味著查找 perarticle.id是常數。但是它會使用更多內存。為了節省內存，我使用了WeakMap，只要你使用同一個shelf變量，它就不會重新計算它。但一旦替換它，它也會從緩存中消失。

const shelf = [{

"categoryPrice": "2",

"categoryTitle": "Flyer",

"articleList": [{

"id": "1",

"articleTitle": "Green",

}, {

"id": "2",

"articleTitle": "Blue",

}, {

"id": "3", // Added

"articleTitle": "Violet",

}],

}, {

"categoryPrice": "3",

"categoryTitle": "Post card",

"articleList": [{

"id": "3",

"articleTitle": "Purple"

}, {

"id": "4",

"articleTitle": "Yellow",

}],

}];

const findItems = function(shelves, id) {

if (!findItems._map) {

// Create computation cache holder

// Weak map will make sure, that if the object is disposed, it can be garbage collected, with it will be gone its cache too! (That is awsome!)

findItems._map = new WeakMap();

}

if (!findItems._map.has(shelves)) {

// For every shelves object, we will create a new Map containing all mapped values.

const map = new Map();

findItems._map.set(shelves, map);

shelves.forEach(shelf => {

shelf.articleList.forEach(article => {

if (!map.has(article.id)) {

// If list is not yet created create it with the article

return map.set(article.id, [ article ]);

}

// If it exists, add to it

map.get(article.id).push(article);

});

}

return findItems._map.get(shelves).get(id);

}

console.log(findItems(shelf, "1"));

console.log(findItems(shelf, "3"));

反對回復 2023-10-14

波斯汪

TA貢獻1811條經驗獲得超4個贊

你可以通過循環兩次來逃脫。一次用于外部數組，一次用于articleList數組

const findItem = (id) =>

shelf.reduce((acc, current) => {

const found = current.articleList.find((x) => x.id === id);

if (found) return [...acc, found];

return acc;

}, []);

反對回復 2023-10-14

3 回答
0 關注
191 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

代碼審查：在 Javascript 中簡潔地深度過濾對象數組

代碼審查：在 Javascript 中簡潔地深度過濾對象數組

3 回答

添加回答