如何用map遍历嵌套对象数组并提取cooked属性值

你的kvArray是两层嵌套的结构：外层是对象数组，每个对象的value属性又是包含price对象的子数组。你当前的代码只遍历了外层数组并打印kvA.value（也就是内层数组本身），要提取price.cooked，需要再深入遍历内层数组。

下面给你几种可行的修改方案：

方案1：直接打印所有cooked值（用forEach嵌套遍历） #

如果只是想逐个输出每个price.cooked的值，用两层forEach最直观：

var kvArray = [ {key: 1, value: [{items: 10, price: {raw: 10, cooked: 20}}, {items: 20, price: {raw: 20, cooked: 60}}, {items: 30, price: {raw: 30, cooked: 90}}, {items: 40, price: {raw: 50, cooked: 70}}, {items: 50, price: {raw: 50, cooked: 90}}]}, {key: 2, value: [{items: 40, price: {raw: 10, cooked: 20}}, {items: 30, price: {raw: 10, cooked: 70}}, {items: 20, price: {raw: 20, cooked: 20}}, {items: 10, price: {raw: 20, cooked: 20}}, {items: 60, price: {raw: 60, cooked: 20}}]}, {key: 3, value: [{items: 70, price: {raw: 60, cooked: 20}}, {items: 60, price: {raw: 10, cooked: 70}}, {items: 50, price: {raw: 10, cooked: 60}}, {items: 30, price: {raw: 30, cooked: 20}}, {items: 20, price: {raw: 10, cooked: 80}}]} ];

kvArray.forEach((kvA) => {
  // 遍历外层对象的value子数组
  kvA.value.forEach((item) => {
    // 提取并打印每个item的price.cooked
    console.log(item.price.cooked);
  });
});

方案2：将所有cooked值收集到一个数组（用flatMap） #

如果需要把所有cooked值整理成一个一维数组，用flatMap可以一步到位：

const cookedPrices = kvArray.flatMap((kvA) => {
  // 从每个子数组项中提取cooked值，flatMap会自动扁平化结果
  return kvA.value.map((item) => item.price.cooked);
});

console.log(cookedPrices);
// 输出：[20, 60, 90, 70, 90, 20, 70, 20, 20, 20, 20, 70, 60, 20, 80]

方案3：按原结构分组保留cooked值 #

如果想保留外层的key，把对应组的cooked值整理成数组，可以用外层map嵌套内层map：

const groupedCooked = kvArray.map((kvA) => {
  return {
    key: kvA.key,
    cookedValues: kvA.value.map((item) => item.price.cooked)
  };
});

console.log(groupedCooked);
// 输出：
// [
//   { key: 1, cookedValues: [20, 60, 90, 70, 90] },
//   { key: 2, cookedValues: [20, 70, 20, 20, 20] },
//   { key: 3, cookedValues: [20, 70, 60, 20, 80] }
// ]

为什么原代码没达到效果？ #

你之前用的kvArray.map((kvA) => console.log(kvA.value))只是遍历了外层数组的每个对象，打印的是value对应的整个内层数组，并没有遍历内层数组去访问里面的price.cooked属性，所以需要多一层遍历才能拿到目标值。

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