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

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',
    ],
  },
];

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);

Answer 2

您可以使用此代码片段来转换数组。

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."}]}];

const transformArray = (givenArray) => {
  let imagesArray = givenArray.filter((item) => item.type === "image");
  let withoutImageArray = givenArray.filter((item) => item.type !== "image");
  let arrayOfImageLinks = imagesArray.map((item) => item.image);
  return [...withoutImageArray, { type: "images", images: arrayOfImageLinks }];
};

console.log(transformArray(data));

每当您需要更改将数组传递给此方法时，您将获得转换后的数组。

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

Array of objects, join similar objects to one object

javascript

ecmascript-6

reactjs