如何在对象数组中过滤含指定tags的元素？

问题说明 #

我有一个对象数组，每个对象的frontmatter属性下包含tags数组，需要用filter方法筛选出tags中包含article的对象，但当前代码未达到预期效果。

原代码（存在语法错误和逻辑问题）：

const obj = [
    {
        "slug": "add-an-aggregate-rating-feature-to-your-website",
        "frontmatter": {
            "title": "Add An Aggregate Rating Feature To Your Website",
            "metaTitle": "Add An Aggregate Rating Feature To Your Website",
            "tags": [
                "structured-data",
                "aggregate-rating",
                "rich-text"
            ]
        }
    },
    {
        "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
        "frontmatter": {
            "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
            "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer"
            // 缺少逗号，存在语法错误
            "tags": [
                "article",
                "roadmap"
            ]
        }
    },
    {
        "slug": "what-is-dall-e",
        "frontmatter": {
            "title": "What is DALL-E? A world changing technology?",
            "metaTitle": "What is DALL-E? A world changing technology?"
            // 缺少逗号，存在语法错误
            "tags": [
                "technology",
                "article",
                "openai"
            ]
        }
    }
]

// 尝试筛选包含article标签的对象
var newArray = obj.filter(function (el){
    return el.frontmatter.tags.filter(function (el2){
         el2 == "article"
    })
})
console.log(newArray)

问题分析 #

1. 语法错误：第二个和第三个对象的metaTitle属性末尾缺少逗号，导致代码无法正常运行。
2. 逻辑错误：内层使用filter方法不合适：
   • filter返回的是数组，空数组在JavaScript中属于真值，会让外层filter错误保留所有元素；
   • 内层回调函数没有return语句，导致filter无法正确筛选匹配元素。

解决方案 #

使用Array.includes()方法直接判断tags数组是否包含目标值，该方法返回布尔值，完全适配filter回调函数的要求：

// 先修复语法错误，再修改筛选逻辑
const obj = [
    {
        "slug": "add-an-aggregate-rating-feature-to-your-website",
        "frontmatter": {
            "title": "Add An Aggregate Rating Feature To Your Website",
            "metaTitle": "Add An Aggregate Rating Feature To Your Website",
            "tags": [
                "structured-data",
                "aggregate-rating",
                "rich-text"
            ]
        }
    },
    {
        "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
        "frontmatter": {
            "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
            "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer",
            "tags": [
                "article",
                "roadmap"
            ]
        }
    },
    {
        "slug": "what-is-dall-e",
        "frontmatter": {
            "title": "What is DALL-E? A world changing technology?",
            "metaTitle": "What is DALL-E? A world changing technology?",
            "tags": [
                "technology",
                "article",
                "openai"
            ]
        }
    }
]

// 筛选tags包含article的对象
const newArray = obj.filter(el => el.frontmatter.tags.includes("article"));
console.log(newArray);

代码解释 #

• Array.includes()：检查数组是否包含指定元素，存在返回true，不存在返回false，完美匹配filter回调函数的布尔值要求。
• 若不习惯箭头函数，也可以使用普通函数写法：

  const newArray = obj.filter(function(el) {
      return el.frontmatter.tags.includes("article");
  });
  

内容的提问来源于stack exchange，提问作者Eklavya Chandra