javascript - 对象数组，将相似对象连接到一个对象

Question

基本上，我想转换这个对象数组：

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
];

对于这个对象数组：

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    images: [
      'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
];

如您所见，：

{
  type: 'image',
  image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
  children: [{ text: '' }],
},
{
  type: 'image',
  image: 'https://mankground-png.png',
  children: [{ text: '' }],
},
{
  type: 'image',
  image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
  children: [{ text: '' }],
},

它被替换为：

{
  type: 'image',
  images: [
    'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
  ],
},

所以，我想知道什么是最好的方法来获取所有拥有的对象type: image并将它们连接到一个包含这些图像数组的对象......另外，在这个例子中，只有一组type: image图像，但也许可以存在这样的东西；有很多type: image物体的地方...

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
];

其中，解决方案将是这样的：

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    images: [
      'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
  {
    type: 'image',
    images: [
      'https://mankground-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
];

标签： javascriptreactjsecmascript-6

Answer 1

这使用一个简单的循环以示例输出显示它们的方式对连续的图像对象进行分组。

请参阅评论以获取解释。

var data = [{type:"heading-one",children:[{text:"Introduction"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The Challenge"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The result"}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.514Z-tkabg-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.516Z-58nhz-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png",children:[{text:""}]},{type:"heading-one",children:[{text:"Conclusion"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]}];

// This will be the final result
var merged_data = [];

// For each item in the data array..
for(i=0; i<data.length; i++){
  
  // If the current item is an image...
  if(data[i].type === "image"){
  
    // If the last item on the merged array was not an array of images
    if(merged_data[merged_data.length-1].type !== "image"){
      
      // Add an empty image array to the end of the merged array
      merged_data.push({type: "image", images: []});
    }
    
    // Add our current image to the array on the end of the merged array
    merged_data[merged_data.length-1].images.push(data[i].image);
    
  }else{
  
    // The current item isn't an image, add it to the merged array as is
    merged_data.push(data[i]);
  }
}

console.log(merged_data);