如何从嵌套对象中提取指定数据数组？解决提取时返回undefined的问题

我明白你现在遇到的问题了——从嵌套的itemsToBuy对象里提取商品名称和价格数组时得到了undefined，这大概率是因为没找对遍历或提取对象属性的正确方法。下面我给你几种靠谱的实现方式：

首先先确认你的原始对象：

var itemsToBuy = { 
  milk: { quantity : 5, price: 20 }, 
  bread: { quantity : 2, price: 15 }, 
  potato: { quantity : 3, price: 10 } 
};

方法一：使用Object.keys() + map() #

这是最直观的方式，先提取对象的键（也就是商品名称），再通过键映射出对应的价格：

提取商品名称数组 #

const productNames = Object.keys(itemsToBuy);
console.log(productNames); // 输出: ['milk', 'bread', 'potato']

Object.keys()会返回对象所有可枚举的键名组成的数组，正好匹配你的商品名称需求。

提取价格数组 #

const prices = Object.keys(itemsToBuy).map(product => itemsToBuy[product].price);
console.log(prices); // 输出: [20, 15, 10]

这里先用Object.keys()拿到商品名称数组，再用map()遍历每个名称，取出对应子对象里的price属性。

方法二：使用Object.entries()一次性获取两组数据 #

Object.entries()会把对象转成[键, 值]形式的二维数组，我们可以同时解构出商品名称和对应的子对象：

const [productNames, prices] = Object.entries(itemsToBuy).reduce((acc, [name, details]) => {
  acc[0].push(name);
  acc[1].push(details.price);
  return acc;
}, [[], []]);

console.log(productNames); // ['milk', 'bread', 'potato']
console.log(prices); // [20, 15, 10]

这种方式适合需要同时提取多组数据的场景，通过reduce()把结果收集到两个空数组里。

为什么之前会得到undefined？ #

大概率是你尝试了错误的提取方式，比如直接用itemsToBuy.productNames这种不存在的属性，或者遍历对象时没有正确访问子属性。比如如果写了itemsToBuy.map(...)就会出问题，因为对象本身没有map()方法——map()是数组的专属方法，所以必须先把对象的键或条目转成数组再操作。

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