如何获取嵌套对象数组中的所有单个count值？

我明白你现在的需求：需要从多层嵌套的列表数据里把所有的count值提取出来放到一个数组里，而且希望这个方法是动态的——以后新增列表、item或者位置信息时，不用改代码就能自动收集新的count值。之前用map方法总是返回undefined，大概率是因为没处理好嵌套结构的遍历~

先看你的数据结构：

const data = [ 
  { name: "List1", items: [ 
    { name: "Item1", locations: [ 
      { position: "a", count: 20 }, 
      { position: "b", count: 30 }, 
    ], }, 
    { name: "Item2", locations: [ 
      { position: "c", count: 40 }, 
      { position: "d", count: 50 }, 
    ], }, 
  ], }, 
  { name: "List2", items: [ 
    { name: "Item3", locations: [ 
      { position: "e", count: 60 }, 
      { position: "f", count: 70 }, 
    ], }, 
    { name: "Item4", locations: [ 
      { position: "g", count: 80 }, 
      { position: "h", count: 90 }, 
    ], }, 
  ], }, 
];

几种可行的动态解决方案 #

方法1：用flatMap链式调用（最简洁） #

flatMap可以先map再自动扁平化一层，非常适合这种嵌套结构的提取：

const onlyCounts = data.flatMap(list => 
  list.items.flatMap(item => 
    item.locations.map(location => location.count)
  )
);
console.log(onlyCounts); // [20,30,40,50,60,70,80,90]

这个方法完全动态，不管以后加多少层列表、item或者locations，只要结构不变（list包含items，item包含locations，location有count），就能自动提取所有count。

方法2：用forEach遍历收集（直观易懂） #

如果觉得flatMap有点抽象，用forEach逐层遍历收集也是很稳妥的方式：

const onlyCounts = [];
data.forEach(list => {
  list.items.forEach(item => {
    item.locations.forEach(location => {
      onlyCounts.push(location.count);
    });
  });
});
console.log(onlyCounts); // 同样得到目标数组

这种方法逻辑清晰，新手也容易理解，而且同样支持动态扩展——新增的层级只要符合现有结构，forEach会自动遍历到。

方法3：用reduce实现（函数式风格） #

喜欢函数式编程的话，可以用reduce来逐层累积结果：

const onlyCounts = data.reduce((acc, list) => {
  return acc.concat(
    list.items.reduce((itemAcc, item) => {
      return itemAcc.concat(item.locations.map(loc => loc.count));
    }, [])
  );
}, []);

这个方法和flatMap思路类似，只是用reduce来手动累积数组，同样具备动态性。

为什么之前用map会返回undefined？ #

大概率是你只做了单层map，没有处理嵌套的结构。比如如果直接写data.map(list => list.items.map(...))，得到的是一个二维数组，而不是扁平的数组；如果中间有层级没正确返回值，就会出现undefined。而flatMap会自动帮你把嵌套的数组扁平化，或者用concat/flat来处理嵌套数组就能解决这个问题~

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