展平嵌套数组时控制数组的顺序

Question

我有一个名为 dogs 的对象数组，每个对象都有一个名为 type 的键和一个字符串值，以及一个名为 images 的键和一个对象数组。我想展平数组并将 type 键复制到 images 数组中的每个对象。我已经设法实现了这一点，产生了以下结果：

[
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  }
]

但是，我想保持初始数组的顺序，因此它看起来像：

[
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  },
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  },
  {
    "type": "labrador",
    "src": "unique-url"
  },
  {
    "type": "german-shepherd",
    "src": "unique-url"
  },
  {
    "type": "husky",
    "src": "unique-url"
  }
]

我该怎么做？任何指针将不胜感激

const dogs = [
  {
    type: 'labrador',
    images: [
      { src: 'unique-url'},
      { src: 'unique-url'},
      { src: 'unique-url'}
    ]
  },
  {
    type: 'german-shepherd',
    images: [
      { src: 'unique-url'},
      { src: 'unique-url'},
      { src: 'unique-url'}
    ]
  },
  {
    type: 'husky',
    images: [
      { src: 'unique-url'},
      { src: 'unique-url'},
      { src: 'unique-url'}
    ]
  },
]

const result = dogs
    .map((d) =>
      d.images.map((i) => ({
        type: d.type,
        ...i,
      }))
    )
    .flat()

console.log(result)

Answer 1

几个 for 循环可能是一种简单的方法。这里外层循环处理图像数组的索引，而内层循环依次处理每只狗：

const dogs = [
  {
    type: 'labrador',
    images: [
      { src: 'unique-url-l1'},
      { src: 'unique-url-l2'},
      { src: 'unique-url-l3'}
    ]
  },
  {
    type: 'german-shepherd',
    images: [
      { src: 'unique-url-g1'},
      { src: 'unique-url-g2'},
      { src: 'unique-url-g3'}
    ]
  },
  {
    type: 'husky',
    images: [
      { src: 'unique-url-h1'},
      { src: 'unique-url-h2'},
      { src: 'unique-url-h3'}
    ]
  },
];

const inner_length = Math.max(...dogs.map((dog) => dog.images?.length || 0));

let arr = [];
for(let i = 0; i < inner_length; i++) {
  for(let j = 0; j < dogs.length; j++) {
    let image = dogs[j].images?.[i];
    
    if(image) {
      arr.push({ type: dogs[j].type, ...image });
    }
  }
}

console.log(arr);

更类似于问题代码的reduce方法：

const dogs = [
  {
    type: 'labrador',
    images: [
      { src: 'unique-url-l1'},
      { src: 'unique-url-l2'},
      { src: 'unique-url-l3'}
    ]
  },
  {
    type: 'german-shepherd',
    images: [
      { src: 'unique-url-g1'},
      { src: 'unique-url-g2'},
      { src: 'unique-url-g3'},
    ]
  },
  {
    type: 'husky',
    images: [
      { src: 'unique-url-h1'},
      { src: 'unique-url-h2'},
      { src: 'unique-url-h3'}
    ]
  },
];

let arr = dogs
  .reduce((acc, dog) =>
    dog.images.reduce((acc2, image, i) => {
      acc2[i] ??= [];
      acc2[i].push({ type: dog.type, ...image });
      return acc2;
    }, acc)
  , [])
  .flat();

console.log(arr);

以上使用我认为称为桶排序的方法在展平整个数组之前按图像的原始（内部）数组位置对图像进行分组。

展平嵌套数组时控制数组的顺序

control order of array when flattening nested array

javascript

arrays