如何从多子对象结构中提取存在的name属性生成数组？

嘿，这个需求很典型，我给你分享几个实用的解法，从简洁的ES6写法到兼容老环境的方案都有：

方法1：ES6简洁写法（推荐） #

利用Object.values()、filter()和map()的组合，代码简洁易读：

var obj = { 107: {name: "test", id: 772}, 124: {name: "hello", id: 123}, 120: {id: 213} };

const names = Object.values(obj)
  .filter(item => item.hasOwnProperty('name')) // 确保name是子对象自身的属性，避免原型链干扰
  .map(item => item.name);

console.log(names); // 输出: ["test", "hello"]

步骤解释：

• Object.values(obj)：把原对象的所有子对象提取成一个数组
• filter(...)：过滤掉没有自身name属性的子对象
• map(...)：从每个符合条件的子对象中提取name值，最终生成目标数组

方法2：for...in循环（兼容老环境） #

如果需要支持ES6之前的老浏览器，for...in循环是个稳妥的选择：

var obj = { 107: {name: "test", id: 772}, 124: {name: "hello", id: 123}, 120: {id: 213} };
var names = [];

for (const key in obj) {
  // 先确认当前键是原对象自身的属性（避免遍历到原型链上的属性）
  if (obj.hasOwnProperty(key)) {
    const item = obj[key];
    // 检查子对象是否拥有自身的name属性
    if (item.hasOwnProperty('name')) {
      names.push(item.name);
    }
  }
}

console.log(names); // 输出: ["test", "hello"]

方法3：使用reduce函数 #

用reduce()可以把过滤和提取合并成一步，也是ES6+的写法：

var obj = { 107: {name: "test", id: 772}, 124: {name: "hello", id: 123}, 120: {id: 213} };

const names = Object.values(obj).reduce((acc, item) => {
  if (item.hasOwnProperty('name')) {
    acc.push(item.name);
  }
  return acc;
}, []); // 初始值为空数组

console.log(names); // 输出: ["test", "hello"]

小提示：如果你的场景中可以确定子对象的name属性不会是undefined或null，也可以简化判断条件为if (item.name)，但用hasOwnProperty会更严谨，避免误判原型链上的属性或者name值为假的情况。

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