根据属性过滤和映射数组对象答案

【问题标题】：filter and map on object of arrays based on property根据属性过滤和映射数组对象
【发布时间】：2021-04-19 15:20:08
【问题描述】：

您好，我有一个数组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"]

谢谢

【问题讨论】：

内部数组中是否只有一种语言？请添加想要的结果。
谢谢@NinaScholz。我添加了预期的结果。是的，“语言环境”只有一种语言
对不起，我的意思是每个节点中只有一种语言，或者可能不止一种？
只有一个，节点按语言分组

标签： javascript arrays dictionary object filter

【解决方案1】：

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

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);

【讨论】：

【解决方案2】：

您可以过滤和映射想要的属性。

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' } }] }],
    locale = 'de',
    result = group
        .filter(({ nodes: [{ fields }] }) => fields.locale === locale)
        .flatMap(({ nodes }) => nodes.map(({ frontmatter: { category } }) => category));

console.log(result);

【讨论】：

JavaScript 的惊人使用。
group.filter(({ nodes: [{ fields }]}) => fields.locale == locale).map(({ nodes: [{ frontmatter }]}) => frontmatter.category)怎么样

【解决方案3】：

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' } }] }],
  locale = 'de';

let arr = [];
  
group.forEach((el) => {
  arr = arr.concat(el.nodes.filter((e) => {
    return e.fields.locale == locale;
  }).map((e) => {
    return e.frontmatter.category;
  }));
});

// or

arr = [];

group.forEach((el) => {
  let nodesWithDesiredLocale = el.nodes.filter((e) => {
    return e.fields.locale == locale;
  })
  
  let desiredCategories = nodesWithDesiredLocale.map((e) => {
    return e.frontmatter.category;
  });
  
  arr = arr.concat(desiredCategories);
});
  
console.log(arr, 'using filter and map');

【讨论】：