如何使用ES6获取对象数组指定对象的元素及编写动态适配代码

固定键名场景实现 #

你需要的结果是提取arrayOne中索引为0的元素下child数组的e1、e2字段组合为二维数组，直接用ES6的map方法即可实现：

const arrayOne =[
    { child: [
      {e1: 'ABCD', e2: 'BCDF'}, 
      {e1: '1234', e2: '5689'}, 
      {e1: 'QAZX', e2: 'WESD'}]},
    { child: [
      {e1: 'UHYT', e2: 'QYDG'}, 
      {e1: '9568', e2: '4587'}, 
      {e1: 'ISSF', e2: 'QEIR'}
    ]}
  ]

const arrayTwo = arrayOne[0].child.map(item => [item.e1, item.e2])

运行后得到的arrayTwo就是你期望的[['ABCD', 'BCDF'], ['1234', '5689'], ['QAZX', 'WESD']]。如果要提取其他索引位置的父元素，直接修改arrayOne[0]的索引值即可。

动态适配键名的通用实现 #

如果child、e1、e2这类键名可能变更，可以把键名抽为可配置参数，避免改键名时修改核心逻辑：

// 键名配置，变更时仅修改此处即可
const KEY_CONFIG = {
  // 父级数组的键名
  listKey: 'child',
  // 需要提取的子元素键名列表，顺序和输出顺序对应
  itemKeys: ['e1', 'e2']
}

/**
 * 通用提取函数
 * @param {Array} source 原始数组
 * @param {Number} targetIndex 要提取的父元素索引，默认0
 * @param {Object} config 键名配置
 * @returns {Array} 提取后的结果数组
 */
function extractTargetArray(source, targetIndex = 0, config) {
  const { listKey, itemKeys } = config
  return source[targetIndex][listKey].map(item => 
    itemKeys.map(key => item[key])
  )
}

// 调用示例
const arrayTwo = extractTargetArray(arrayOne, 0, KEY_CONFIG)

• 要提取其他父元素时，修改调用时的targetIndex参数即可
• 键名发生变更时，直接更新KEY_CONFIG的对应值即可，不需要改动核心逻辑

异常兼容优化 #

如果需要兼容索引不存在、键名不存在的场景，避免代码报错，可以加可选链和默认值处理：

function extractTargetArray(source, targetIndex = 0, config) {
  const { listKey, itemKeys } = config
  const targetList = source?.[targetIndex]?.[listKey]
  if (!Array.isArray(targetList)) return []
  return targetList.map(item => 
    itemKeys.map(key => item?.[key] ?? '')
  )
}

内容的提问来源于stack exchange，提问作者R.H