基于ES6，如何以最简洁方式精简对象中数组的指定属性？

问题描述 #

现有如下JavaScript对象：

const data = {
  title: 'firstStackOverFlowQuestion!',
  id: '100',
  datePosted: '04-10-2022',
  options: [
    {
      questionId: 1,
      difficultyLevel: 1,
      difficultyScale: 10,
      complexity: 2,
      complexityScale: 10,
    },
    {
      questionId: 2,
      difficultyLevel: 4,
      difficultyScale: 10,
      complexity: 3,
      complexityScale: 10,
    },
    {
      questionId: 3,
      difficultyLevel: 8,
      difficultyScale: 10,
      complexity: 6,
      complexityScale: 10,
    },
  ]
}

需要将其中的options数组精简为仅保留questionId和difficultyLevel两个属性，要求使用ES6的map、展开运算符等特性写出最简洁的实现方式。

实现方案 #

最简洁的写法可以结合对象解构和Array.map()完成，同时用展开运算符保留原对象的其他属性：

const simplifiedData = {
  ...data,
  options: data.options.map(({ questionId, difficultyLevel }) => ({ questionId, difficultyLevel }))
};

代码说明 #

• 展开运算符...data：直接保留原data对象中除options外的所有属性（title、id、datePosted），无需手动逐个复制。
• Array.map()+对象解构：遍历options数组时，直接解构出需要保留的两个属性，再利用ES6属性简写返回新对象，既精简代码又保证原数组的不可变性。

内容的提问来源于stack exchange，提问作者Dubzero