JavaScript如何从对象数组中提取目标值生成纯值数组

Array.map会根据回调函数的返回值生成新数组，你现在的回调里只执行了console.log(val)打印整个元素，没有返回需要提取的目标值，自然无法得到想要的结果。

你给出的数组里两个对象结构不统一：

• 第一个对象的目标值存在于嵌套属性a.b路径下
• 第二个对象的目标值直接存在于顶层c属性下

在回调里对应取值返回即可，完整代码如下：

const obj = [
  {
    a: {
      b: 'Paul',
    }
  },
  {  
    c: 'Byeeee',
  }
];

const result = obj.map((val) => {
  return val.hasOwnProperty('a') ? val.a.b : val.c;
});

console.log(result); // 打印结果：['Paul', 'Byeeee']

如果后续数据结构不固定，需要自动提取任意嵌套对象里的最底层原始值，可以写个简单的递归取值逻辑，不用硬编码属性名：

// 通用提取对象最内层原始值的方法
const getLeafValue = (target) => {
  return typeof target === 'object' && target !== null 
    ? getLeafValue(Object.values(target)[0]) 
    : target;
};

const result = obj.map(val => getLeafValue(val));

这个通用方法不管嵌套多少层、属性名是什么，都能拿到最里面的原始值，适配你当前的示例数据运行结果同样是['Paul','Byeeee']。

内容的提问来源于stack exchange，提问作者Digvijay Singh Thakur