如何將一組對象（不同長度）轉換為一個與原始數組中的元素具有不同屬性的 object？

Question

我正在嘗試制作一個使用來自 flickr api 的數據的應用程序（我將只使用開放許可證圖像並歸功於作者等）。 我正在查詢 flickr api，然后將結果解析為關於我正在搜索的每個項目的一行。 基本上，我希望每一行都有我正在搜索的東西的名稱，然后是圖像鏈接+圖像作者，如下所示：

但是因為 api 結果不同（有時 flickr 在結果中給我一張圖片，有時有數百張），我想不出一種優雅的方式將對象數組轉換為一個 object。 我基本上是在做從行到列的轉置。 因為數組長度不同，我最終使用了一堆可怕的if else子句來完成這項工作。

// slicing the first 5 elements from flickr results
let first5elements = data.photos.photo.slice(0, 5);

let photos_with_query = [];

if (first5elements.length === 0) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 1) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 2) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 3) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 4) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
    image_4: first5elements[3].url_c,
    image_author_4: first5elements[3].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 5) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
    image_4: first5elements[3].url_c,
    image_author_4: first5elements[3].pathalias,
    image_5: first5elements[4].url_c,
    image_author_5: first5elements[4].pathalias,
  };

  photos_with_query.push(onerowforecoregions);
}

這確實有效......但它遠非你所能得到的優雅。 所以我想知道有沒有一種方法可以獲取一組對象並將其轉換為一個 object，它具有來自原始 object 屬性的多個屬性。 它會自動拉出 image_1、image_10 等的東西嗎？

Answer 1

Map first5Elements中的每個項目到一個條目數組，獲取被迭代的項目的索引以確定鍵。 例如，如果輸入數組只包含

{ url: { c: 'url' }, pathalias: 'path' }

它可以轉換為條目

[['image_1', 'url'], ['image_author_1', 'path']]

使用flatMap和Object.fromEntries之后，您可以簡潔地將其轉換為您想要的 object：

const first5elements = data.photos.photo.slice(0, 5);
const entries = first5elements.flatMap(
    (item, i) => [
        ['image_' + (i + 1), item.url.c],
        ['image_author_' + (i + 1), item.pathalias]
    ]
);
const photos_with_query = [
    { region_name: ecoregion.us_l4name, ...Object.fromEntries(entries) }
];

實時片段：

 const first5elements = [{ url: { c: 'url' }, pathalias: 'path' }]; const entries = first5elements.flatMap( (item, i) => [ ['image_' + (i + 1), item.url.c], ['image_author_' + (i + 1), item.pathalias] ] ); const photos_with_query = [ { region_name: 'ecoregion.us_l4name', ...Object.fromEntries(entries) } ]; console.log(photos_with_query);