JavaScript多维数组处理：从对象属性生成子数组的最优方案

需求描述 #

我正在开发一款包含用户数据的应用，已获取目标用户的数据。目前需要将每个用户的指定外观属性（gender、eyeColor、hairColor、build、ethnicOrigin）整理为按属性分类的单独数组，例如：

gender array - ["1", "1", "1"]
eyeColor array - ["2", "1", "3"]
hairColor array - ["4", "1", "6"]
build array - ["6", "2", "4"]
ethnicOrigin array - ["6", "3", "5"]

现有代码问题 #

你当前的代码逻辑是按用户维度拆分属性，生成的是每个用户对应的属性对象数组再存入大数组，这和需求的「按属性维度聚合所有用户数据」不符。

最优实现方案 #

可以通过初始化属性-空数组的映射对象，再一次遍历所有用户填充数据，这种方式仅需遍历用户一次，逻辑简洁且效率更高：

完整代码示例 #

const people = [
  {
    name: "Billy",
    appearance: {
      gender: "1",
      eyeColor: "2",
      hairColor: "4",
      build: "6",
      ethnicOrigin: "6"
    }
  },
  {
    name: "Jason",
    appearance: {
      gender: "1",
      eyeColor: "1",
      hairColor: "1",
      build: "2",
      ethnicOrigin: "3"
    }
  },
  {
    name: "Roger",
    appearance: {
      gender: "1",
      eyeColor: "3",
      hairColor: "6",
      build: "4",
      ethnicOrigin: "5"
    }
  }
];

const needles = ["gender", "eyeColor", "hairColor", "build", "ethnicOrigin"];

// 初始化结果对象，每个属性对应空数组
const result = needles.reduce((acc, key) => {
  acc[key] = [];
  return acc;
}, {});

// 遍历所有用户，填充对应属性数组
people.forEach(person => {
  needles.forEach(key => {
    // 若属性不存在则推入null，否则推入对应值
    result[key].push(person.appearance[key] ?? null);
  });
});

// 输出结果
console.log("gender array -", result.gender);
console.log("eyeColor array -", result.eyeColor);
console.log("hairColor array -", result.hairColor);
console.log("build array -", result.build);
console.log("ethnicOrigin array -", result.ethnicOrigin);

代码说明 #

• 第一步用reduce快速初始化结果对象，确保每个目标属性都绑定一个空数组；
• 遍历每个用户时，针对每个属性键，将用户的属性值（若属性不存在则用null补全）推入对应数组；
• 最终result对象中，每个键对应一个属性的所有用户数据数组，完全匹配需求格式。

内容的提问来源于stack exchange，提问作者The Old County