在 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']
}

我什至不知道为什么代码片段在 Whosebug 上不起作用，但它在编辑器上运行良好。

Answer 1

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

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 2

这为您提供了正确的输出。

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

Whosebug 的 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',
  }
]

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)

Answer 4

这是一个紧凑的实现，可以生成您的输出

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

在 reduced new Map() 中推入数组

Push into array inside reduced new Map()

javascript

arrays