Push into array inside reduced new Map()

Question

我试图从对象数组中推送到new Map()reduce上的数组，但由于某种原因，每个数组只推送两个项目。

const data = [
{
keyword: 'engines',
url: 'google.com',
},
{
keyword: 'engines',
url: 'duckduckgo.com',
},
{
keyword: 'pc',
url: 'mac.com',
},
{
keyword: 'pc',
url: 'linux.com',
},
{
keyword: 'pc',
url: 'windows.com',
}
]
let urls = []
const mapper = data.reduce((acc, obj) => {
urls.push(obj.url)
if (!acc.has(obj.keyword)) {
acc.set(obj.keyword, urls )
} else {
urls = []
}
return acc
}, new Map())

console.log(mapper)

.as-console-wrapper { max-height: 100% !important; top: 0; }

预期输出

Map(2) {
'engines' => [ 'google.com', 'duckduckgo.com'],
'pc' => [ 'mac.com', 'linux.com', 'windows.com']
}

我甚至不知道为什么这个片段不能在stackoverflow上工作，它在编辑器上工作得很好。

Answer 1

这里是一个紧凑的实现，将产生您的输出

data.reduce(
(a, o) => a.set(o.keyword, [...a.get(o.keyword) || [], o.url]), 
new Map()
)

Answer 2

这将给出正确的输出。

你需要为每个关键字使用一个新的数组;否则，您将共享单个对象并在运行时破坏它。

StackOverflow的REPL在使用console.log时不以与浏览器相同的方式输出Map内容，因此我使用了一个解决方案来显示数据。

const data = [
{
keyword: 'engines',
url: 'google.com',
},
{
keyword: 'engines',
url: 'duckduckgo.com',
},
{
keyword: 'pc',
url: 'mac.com',
},
{
keyword: 'pc',
url: 'linux.com',
},
{
keyword: 'pc',
url: 'windows.com',
}
]
const mapper = data.reduce((acc, obj) => {
if (!acc.has(obj.keyword)) {
acc.set(obj.keyword, [] )
}
let urls = acc.get(obj.keyword)
urls.push(obj.url);
return acc;
}, new Map())
/**
Expected output per OP:
Map(2) {
'engines' => [ 'google.com', 'duckduckgo.com'],
'pc' => [ 'mac.com', 'linux.com', 'windows.com']
}
*/
console.log([...mapper.entries()])

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

我修复了这个，但是感觉不对

const data = [ { keyword: 'engines', url: 'google.com', }, { keyword: 'engines', url: 'duckduckgo.com', }, { keyword: 'pc', url: 'mac.com', }, { keyword: 'pc', url: 'linux.com', }, { keyword: 'pc', url: 'windows.com', } ]
let urls = []
const mapper = data.reduce((acc, obj) => {

if (!acc.has(obj.keyword)) {
urls = []
} 
urls.push(obj.url)

acc.set(obj.keyword, urls )
return acc
}, new Map())

console.log(mapper)

Answer 4

试试这个代码

const data = [
{
keyword: 'engines',
url: 'google.com',
},
{
keyword: 'engines',
url: 'duckduckgo.com',
},
{
keyword: 'pc',
url: 'mac.com',
},
{
keyword: 'pc',
url: 'linux.com',
},
{
keyword: 'pc',
url: 'windows.com',
}
]
const mapper = data.reduce((acc, obj) => {
if (acc.has(obj.keyword)) {
acc.set(obj.keyword,[...acc.get(obj.keyword), obj.url] )
} else {
acc.set(obj.keyword, [obj.url])
}
return acc
}, new Map())
/**
Expected output per OP:
Map(2) {
'engines' => [ 'google.com', 'duckduckgo.com'],
'pc' => [ 'mac.com', 'linux.com', 'windows.com']
}
*/
console.log(mapper)