JavaScript如何从包含照片信息的嵌套对象中提取所有crops元素

实现思路 #

你需要遍历嵌套的对象结构，聚合所有携带有效rectangle属性的裁剪参数，单用filter方法无法直接完成这类多层嵌套数据的聚合需求，用forEach或者reduce遍历累加更合适。

代码实现（输出对象格式，和你给的示例匹配） #

// 原始数据存在photoData变量中
const result = {};

photoData.images.forEach(image => {
  // 跳过没有crops属性的图片项
  if (!image.crops) return;

  // 遍历当前图片的所有裁剪字段
  Object.entries(image.crops).forEach(([cropKey, cropConfig]) => {
    // 只保留有实际裁剪参数的项
    if (cropConfig.rectangle) {
      result[cropKey] = cropConfig.rectangle;
    }
  });
});

输出的result结构如下：

{
  "F08": {
    "left": 690,
    "top": 2111,
    "width": 597,
    "height": 121
  },
  "F10": {
    "left": 653,
    "top": 821,
    "width": 653,
    "height": 243
  },
  "F05": {
    "left": 0,
    "top": 808,
    "width": 624,
    "height": 243
  }
}

可选：输出数组格式 #

如果需要数组格式的结果，调整代码即可：

const resultArray = [];

photoData.images.forEach(image => {
  if (!image.crops) return;
  Object.entries(image.crops).forEach(([cropKey, cropConfig]) => {
    if (cropConfig.rectangle) {
      resultArray.push({ [cropKey]: cropConfig.rectangle });
    }
  });
});

更简洁的reduce写法 #

const result = photoData.images.reduce((acc, image) => {
  if (!image.crops) return acc;
  Object.entries(image.crops).forEach(([key, val]) => {
    val.rectangle && (acc[key] = val.rectangle);
  });
  return acc;
}, {});

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