在 Javascript 中的对象数组中映射和缩减数组

Question

如有任何建议，我将不胜感激。我需要从下面对象数组中的数组中提取关键字，并减少它们以显示所有关键字而不重复。

我的数据JSON对象如下：

[
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

我的JS代码如下：

let keywordList = data.map(entry => {

  let list = [...entry.keywords];
    return (
      list.reduce(( finalArray, current ) => finalArray.concat(current),[])
  );
});

在我的 React 组件中，我再次使用 map 遍历数组：

<p>
  keywords: {keywordList.map((word, index) => {
    return (
      <span key={word+index}>
        <a onClick={this.searchKeyword} href="#" id={word}>{word}</a>
        <span> | </span>
      </span>
    );

  })}
</p>

不幸的是，我的 reduce 函数似乎不起作用，我得到了一个数组数组。任何建议都会很棒。

Answer 1

let data = [{
    "word": "Cat",
    "answer": "A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  }, {
    "word": "Dog",
    "answer": "A type of canine",
    "keywords": ["pet", "cat-catcher"]
  }
]

let keywords = [...new Set(data.reduce((a, e) => a.concat(e.keywords), []))]

JSFiddle

Answer 2

而不是 map，reduce 和 filter:

var list = data.reduce((p, c) => {
  return p.concat(c.keywords.filter(el => !p.includes(el)));
}, []);

DEMO

Answer 3

const arr = [
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

const keywords = [ ...arr.reduce((keywords,obj)=> [...keywords, ...obj.keywords ], [] )
                  .reduce((set,keyword)=> set.add(keyword), new Set() ) ]

第一个reduce通过串联合并所有重复的关键字，第二个reduce将数组转换为一个集合，删除所有重复项。最后，我用
的结果集包装它 [ ...Set ] 将其转换为数组。

JS Bin

在 Javascript 中的对象数组中映射和缩减数组

Mapping and Reducing an Array within an Array of Objects in Javascript

javascript

arrays

reduce

dictionary

reactjs