我有以下数组


    const arr = [
      {
       Images: [{ id: 1 }, { id: 2 }, { id: 3 }],
       MediaCategoryName: "Exterior",
       id: 51
      },

       {
       Images: [{ id: 7 }, { id: 8 }, { id: 9 }],
       MediaCategoryName: "Construction",
       id: 687
      },

      {
      Images: [{ id: 10 }, { id: 11 }, { id: 21 }],
      MediaCategoryName: "home",
      id: 755
     }
    ];

我如何从它们中创建新数组,并且只放置Images个?

我需要这样的东西

newArr = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 7 }, { id: 8 }
         , { id: 9 }, { id: 10 }, { id: 11 }, { id: 21 }
         ]

有人能帮我做到这一点吗?

谢谢:)

推荐答案

using Array.prototype.flatMap()
It is just like doing a map to return images and then performing a flat afterwards

const arr = 
  [ { Images: [{ id:  1}, {id:  2}, {id:  3 }] , MediaCategoryName: 'Exterior',     id:  51 } 
  , { Images: [{ id:  7}, {id:  8}, {id:  9 }] , MediaCategoryName: 'Construction', id: 687 } 
  , { Images: [{ id: 10}, {id: 11}, {id: 21 }] , MediaCategoryName: 'home',         id: 755 } 
  ];


const res = arr.flatMap(({Images}) => Images)

console.log(JSON.stringify(res))
.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}

Javascript相关问答推荐

构造HTML表单以使用表单数据创建对象数组

在拖放时阻止文件打开

加载背景图像时同步旋转不显示的问题

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

IF语句的计算结果与实际情况相反

如何使用JavaScript拆分带空格的单词

如何发送从REST Api收到的PNG数据响应

FileReader()不能处理Firefox和GiB文件

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

如何使用[ModelJSON,ArrayBuffer]调用tf.loadGraphModelSync

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

使用props 将VUE 3组件导入JS文件

按下键盘上的空格键后,单词就会变色.我想在最后一封信之后立即给它们涂上 colored颜色

如何在Angular中运行没有哈希的项目

我正在用JS编码一个链表,而我编写的一个Prepreend函数并没有按照我的预期工作

我的NPM Vue库没有生成/导出TS类型

我如何判断css@layer是否在css和Javascript中受支持?

在移动设备上点击脚本元素时出现蓝框

如何在使用会话时防止争用情况?