請參閱下面的嘗試和示例，我正在尋找一種在 JS 中獲得匹配水果數量的有效方法。目前我正在使用過濾器在items陣列中查找匹配項，但我想知道是否有更好的方法（不必fruits在每次迭代時過濾陣列~想象它是一個更大的水果陣列）。
const items = [
{
id: '111',
name: 'apple',
},
{
id: '222',
name: 'apple',
},
{
id: '333',
name: 'kiwi',
},
];
const fruits = [
{
id: 'fruit-1',
name: 'apple',
},
{
id: 'fruit-2',
name: 'banana',
},
{
id: 'fruit-3',
name: 'kiwi',
},
];
// attempted
const numberOfFruitsInItems = fruits.map((fruit) => {
const itemsWithFruit = items.filter(({ name }) => fruit.name === name);
return {
...fruit,
total: itemsWithFruit.length,
};
});
console.log(numberOfFruitsInItems);
// desired response
[
{
id: 'fruit-1',
name: 'apple',
total: 2,
},
{
id: 'fruit-2',
name: 'banana',
total: 0,
},
{
id: 'fruit-3',
name: 'kiwi',
total: 1,
},
];
uj5u.com熱心網友回復：
您可以在一次迭代中完成此操作items，更新相應水果的全域計數器。
// Use a hashed object to keep count of totals per fruit name.
// totals[FRUIT NAME] = ...number of items having name=FRUIT NAME
const totals = {}
// Fill the totals hash in one single iteration of items
items.forEach(item => {
totals[item.name] = (totals[item.name] || 0) 1
})
const numberOfFruitsInItems = fruits.map((fruit) => {
return {
...fruit,
total: totals[fruit.name] || 0,
};
});
uj5u.com熱心網友回復：
由于該站點上有許多問題和答案，您應該按 對物件陣列進行分組，對name每個物件進行計數，并將其存盤在一個grouped物件中，鍵是名稱，值是計數。
const items = [{id:"111",name:"apple"},{id:"222",name:"apple"},{id:"333",name:"kiwi"},];
const fruits = [{id:"fruit-1",name:"apple"},{id:"fruit-2",name:"banana"},{id:"fruit-3",name:"kiwi"},];
var grouped = items.reduce(function(agg, item) {
agg[item.name] = (agg[item.name] || 0) 1
return agg
}, {})
fruits.forEach(function(item) {
item.total = grouped[item.name] || 0
})
console.log(fruits).as-console-wrapper {max-height: 100% !important}uj5u.com熱心網友回復：
您需要在映射每個水果之前快取專案頻率。
const
items = [
{ id: '111', name: 'apple' },
{ id: '222', name: 'apple' },
{ id: '333', name: 'kiwi' }
],
fruits = [
{ id: 'fruit-1', name: 'apple' },
{ id: 'fruit-2', name: 'banana' },
{ id: 'fruit-3', name: 'kiwi' }
];
const main = () => {
const reducedFruits = fruitReducer(fruits, items);
console.log(reducedFruits);
};
const computeFrequency = (items, accessor) =>
items.reduce((acc, item) =>
(key =>
acc.set(key, (acc.get(key) ?? 0) 1))
(accessor ? accessor(item) : item), new Map);
const fruitReducer = (fruits, items) =>
((freqMap) =>
fruits.map(({ id, name }) =>
({ id, name, total: freqMap.get(name) ?? 0 })))
(computeFrequency(items, ({ name }) => name))
main();.as-console-wrapper { top: 0; max-height: 100% !important; }uj5u.com熱心網友回復：
最好將這兩種機制分開來洗掉嵌套迭代。首先遍歷items陣列使用reduce以創建鍵/值對字典（例如{ apple: 2 }，然后回圈遍歷fruits陣列，從字典中添加正確的計數資訊。
const items=[{id:"111",name:"apple"},{id:"222",name:"apple"},{id:"333",name:"kiwi"}],fruits=[{id:"fruit-1",name:"apple"},{id:"fruit-2",name:"banana"},{id:"fruit-3",name:"kiwi"}];
// `reduce` over the items.
// If the item name isn't a key on the object
// set it to zero, then add one
const itemCount = items.reduce((acc, { name }) => {
fruits[name] ??= 0;
fruits[name];
return fruits;
}, {});
// Update the `fruits` using the dictionary
// count information - note this mutates the
// `fruits` array so if you want a new array
// use `map` instead of `forEach`
fruits.forEach(fruit => {
fruit.count = itemCount[fruit.name] || 0;
});
console.log(fruits);附加資訊
- 邏輯無效賦值
uj5u.com熱心網友回復：
一個不會改變您的原始資料的版本——畢竟，我們不是野蠻人，對吧？-- 可以從創建fruit陣列的副本開始，count為每個副本添加一個屬性，將它們存盤為以水果名稱為鍵的物件，然后items通過增加count相關節點的屬性將串列折疊到其中。最后，我們只是收集并回傳values這個物件的。
代碼非常簡單：
const countFruits = (fruits, items) => Object .values (items .reduce (
(a, {name}) => ((a [name] .count = 1), a),
fruits .reduce ((a, f) => ((a [f .name] = {...f , count: 0}), a), {})
))
const items = [{id: '111', name: 'apple'}, {id: '222', name: 'apple'}, {id: '333', name: 'kiwi'}]
const fruits = [{id: 'fruit-1', name: 'apple', }, {id: 'fruit-2', name: 'banana', }, {id: 'fruit-3', name: 'kiwi', }]
console .log (countFruits (fruits, items)).as-console-wrapper {max-height: 100% !important; top: 0}請注意，沒有錯誤檢查，您可能需要它。如果items包括在內{id" 444', name: 'papaya'}，即使paypaya不在水果串列中怎么辦。這應該不會太難處理，我們可以把它留作練習。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510097.html
標籤：javascript算法