javascript - 如何映射对象数组以提取与以前缀开头的键对应的值？

Question

我有一个看起来像这样的对象数组:

const myArr = [
  {id: 1,
  some_data: {
    "color_1": {
      "value": "red"
    },
    "color_2": {
      "value": "blue"
    },
    "color_3": {
      "value": "yellow"
    },
    "shape_1": {
      "value": "square"
    },
    "shape_2": {
      "value": "circle"
    }
  }
  },
  {id: 2,
     some_data: {
    "color_1": {
      "value": "pink"
    },
    "color_2": {
      "value": "orange"
    },
    "color_3": {
      "value": "yellow"
    },
    "shape_1": {
      "value": "square"
    },
    "shape_2": {
      "value": "triangle"
    }
  }
  },
  {id: 3,
  /* some_data: {...}*/},
  {id: 4,
  /* some_data: {...}*/}
]

我想遍历 myArr 并提取与颜色对应的值，以这个数组结束:

// desired output
["red", "blue", "yellow", "pink", "orange", "yellow"]

所以我发现我需要在 keys 上使用 String.prototype.startsWith()。不幸的是，我在 myArr 上的所有尝试都没有成功。

灵感来自 this我试过的答案:

const oneAttempt = myArr.map((obj) =>
        Object.keys(obj.some_data)
            .filter((v) => v.startsWith('color'))
            .map((e) => obj.some_data[e].value)
    );

但这并不是我所需要的。这可能是一件非常简单的事情，但我没能弄明白。

Answer 1

你只需要some_data的对象，得到一个平面映射。

const
    data = [{ id: 1, some_data: { color_1: { value: "red" }, color_2: { value: "blue" }, color_3: { value: "yellow" }, shape_1: { value: "square" }, shape_2: { value: "circle" } } }, { id: 2, some_data: { color_1: { value: "pink" }, color_2: { value: "orange" }, color_3: { value: "yellow" }, shape_1: { value: "square" }, shape_2: { value: "triangle" } } }],
    result = data.flatMap(({ some_data }) => Object
        .keys(some_data)
        .filter(k => k.startsWith('color_'))
        .map(k => some_data[k].value)
    );

console.log(result);