如何筛选JavaScript对象数组中含name和href属性的元素？

原始输入 #

[
    {
        "items": [
            {
                "name": "View Profile",
                "href": "/profile",
                "icon": {}
            },
            {
                "name": "Manage Account",
                "href": "/manage",
                "icon": {}
            },
            {
                "name": "Other",
                "icon": {}
            }
        ]
    },
    {
        "items": [
            {
                "name": "Access",
                "href": "/access",
            },
            {
                "name": "Give Feedback",
                "href": "/feedback",
                "icon": {}
            }
        ]
    }
]

需求 #

编写函数返回一个新数组，仅保留原始嵌套结构中同时具备name和href属性的元素，且每个元素只保留name和href两个属性，忽略缺少任一属性的元素。

预期输出 #

[
   { 
      "name": "View Profile",
      "href": "/profile"
   },
   { 
      "name": "Manage Account",
      "href": "/manage"
   }, 
   { 
      "name": "Access",
      "href": "/access"
   }, 
   { 
      "name": "Give Feedback",
      "href": "/feedback"
   }
]

你的代码问题分析 #

你尝试的代码存在几个关键问题：

const result = input.map(obj => obj.items).map(innerObj => innerObj.href ? ({innerObj.name, innerObj.href});

1. 结构处理错误：input.map(obj => obj.items)会得到一个二维数组（[[...items1], [...items2]]），后续map遍历的是每个子数组，不是单个元素，所以innerObj.href永远是undefined，逻辑完全走不通。
2. 条件判断不全：只检查了href，没验证name是否存在，不符合需求。
3. 语法错误：三元表达式缺少:分支，且括号不完整，直接运行会报错。
4. 未做过滤：map是转换元素，不会过滤掉不符合条件的项，最终会保留所有元素（包括不符合的）。

正确解决方案 #

const input = [
    // 此处填入原始输入的数组内容
];

const result = input
  .flatMap(obj => obj.items) // 把所有items数组展平成一维数组
  .filter(item => item.hasOwnProperty('name') && item.hasOwnProperty('href')) // 严格过滤同时拥有两个属性的元素
  .map(item => ({ name: item.name, href: item.href })); // 提取需要的属性，生成新对象

console.log(result);

代码说明 #

• flatMap：替代map+flat，直接把外层数组中的每个items子数组展开，合并成一个包含所有子元素的一维数组，简化后续处理。
• filter：用hasOwnProperty严格判断元素是否同时拥有name和href属性（避免属性值为undefined或null的情况）。
• map：将符合条件的元素转换为只包含name和href的新对象，剔除多余的icon等属性。

也可以用reduce实现，适合需要更精细控制的场景：

const result = input.reduce((acc, obj) => {
  const validItems = obj.items.filter(item => item.hasOwnProperty('name') && item.hasOwnProperty('href'))
    .map(item => ({ name: item.name, href: item.href }));
  return acc.concat(validItems);
}, []);

内容的提问来源于stack exchange，提问作者Leo Messi