JavaScript如何从对象数组中提取指定键值对生成新数组

原有写法评估 #

你当前使用的for循环遍历+push的写法不属于过度设计，逻辑直白、运行性能稳定，全版本JS环境都可兼容，唯一的不足是写法偏冗余，有更贴合数组操作语义的简洁实现。

推荐实现：使用Array.prototype.map #

数组原生的map方法设计初衷就是遍历原数组，对每个元素做规则转换后返回等长的新数组，和你的需求场景完全匹配，写法比for循环简洁很多：

const items = [
  { id: "45054", name: "Brittany" },
  { id: "8980", name: "Amber" },
  { id: "9843", name: "Leslie" },
  { id: "45306", name: "Doug" },
  { id: "7863", name: "Kevin" }
]

const ids = items.map(item => ({ id: item.id }))

console.log(ids)

方案说明 #

• 该实现和你原有for循环的逻辑、运行结果完全一致，没有额外性能损耗
• 语义辨识度更高：代码里出现map时，其他开发者可以立刻判断出这是在做数组元素的结构转换，不需要逐行读循环逻辑
• 扩展成本低：后续如果需要提取更多字段，只需要修改回调里返回的对象即可，比如要同时提取id和name，直接写成item => ({ id: item.id, name: item.name })
• 兼容处理：如果需要适配不支持ES6箭头函数的老旧环境，把回调换成普通函数即可：

  var ids = items.map(function(item) {
    return { id: item.id }
  })
  

扩展场景：多字段通用提取 #

如果后续有频繁从对象中提取指定若干字段的需求，可以封装一个极简的通用提取工具，避免重复写相同的取值逻辑：

const pickFields = (obj, targetKeys) => 
  targetKeys.reduce((result, key) => {
    result[key] = obj[key]
    return result
  }, {})

// 用法示例：提取id字段
const ids = items.map(item => pickFields(item, ['id']))
// 提取多个字段示例
const idAndNames = items.map(item => pickFields(item, ['id', 'name']))

注意如果只是单次提取单个id字段，不需要额外封装工具函数，直接用基础的map写法即可，可读性最高。

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