时间戳

首页 > 解决方案 > 根据属性过滤和映射数组对象

javascript - 根据属性过滤和映射数组对象

问题描述

嗨，我有一个数组group，我正在基于该数组为某种语言创建一个类别数组。我想生成相同的数组，但只使用过滤器和映射方法。

  var group = [
    {
      nodes: [
        {
          frontmatter: {
            category: 'someCategory DE',
          },
          fields: {
            locale: 'de',
          },
        },
        {
          frontmatter: {
            category: 'HTML&CSS DE',
          },
          fields: {
            locale: 'de',
          },
        },
      ],
    },
    {
      nodes: [
        {
          frontmatter: {
            category: 'react',
          },
          fields: {
            locale: 'en',
          },
        },
        {
          frontmatter: {
            category: 'HTML&CSS',
          },
          fields: {
            locale: 'en',
          },
        },
        {
          frontmatter: {
            category: 'javascript',
          },
          fields: {
            locale: 'en',
          },
        },
        {
          frontmatter: {
            category: 'someCategory',
          },
          fields: {
            locale: 'en',
          },
        },
        {
          frontmatter: {
            category: 'HTML&CSS',
          },
          fields: {
            locale: 'en',
          },
        },
        {
          frontmatter: {
            category: 'react',
          },
          fields: {
            locale: 'en',
          },
        },
      ],
    },
  ]

我的工作代码没有使用过滤器和地图。

const locale = 'de'
const arr = []

group.forEach(el => {
    el.nodes.forEach(e => {
      if (e.fields.locale == locale) {
        arr.push(e.frontmatter.category)
      }
    })
  })

例如“en”语言的预期结果

arr = ["react", "HTML&CSS", "javascript", "someCategory", "HTML&CSS", "react"]

谢谢你

标签： javascriptarraysdictionaryobjectfilter

解决方案

这是一个非常紧凑的完全声明性方法，它返回与输入语言环境匹配的唯一类别列表。

const group = [{ nodes: [{ frontmatter: { category: 'someCategory' }, fields: { locale: 'de' } }, { frontmatter: { category: 'HTML&CSS' }, fields: { locale: 'de' } }] }, { nodes: [{ frontmatter: { category: 'react' }, fields: { locale: 'en' } }, { frontmatter: { category: 'HTML&CSS' }, fields: { locale: 'en' } }, { frontmatter: { category: 'javascript' }, fields: { locale: 'en' } }, { frontmatter: { category: 'someCategory' }, fields: { locale: 'en' } }, { frontmatter: { category: 'HTML&CSS' }, fields: { locale: 'en' } }, { frontmatter: { category: 'react' }, fields: { locale: 'en' } }] }];

// Function:

const getCategoriesByLocale = locale => [...new Set(
  group
    .flatMap(g => g.nodes.filter(n => n.fields.locale == locale))
    .map(n => n.frontmatter.category)
)];

// Usage:

console.log(getCategoriesByLocale("en"));
console.log(getCategoriesByLocale("de"));

如果唯一性实际上不是您想要的，您可以删除Set包装器以获得更短的功能：

const getCategoriesByLocale = locale => 
  group
    .flatMap(g => g.nodes.filter(n => n.fields.locale == locale))
    .map(n => n.frontmatter.category);

推荐阅读