如何从两个现有数组生成包含自定义额外属性的对象数组

实现方案 #

思路 #

通过数组map方法按索引匹配两个数组的对应元素，支持传入自定义属性名，再通过对象展开运算符合并额外需要添加的固定属性即可。

通用封装函数 #

可以直接复用下方的通用函数，灵活适配不同的属性名和额外属性需求：

/**
 * 基于两个数组生成对象数组
 * @param {Array} arr1 第一个输入数组
 * @param {String} key1 第一个数组元素对应的属性名
 * @param {Array} arr2 第二个输入数组
 * @param {String} key2 第二个数组元素对应的属性名
 * @param {Object} extraProps 要追加的额外固定属性，可选
 * @returns {Array} 生成的对象数组
 */
function generateObjectArray(arr1, key1, arr2, key2, extraProps = {}) {
  if (arr1.length !== arr2.length) {
    throw new Error('两个输入数组长度必须一致，避免索引错位');
  }
  return arr1.map((item, index) => ({
    [key1]: item,
    [key2]: arr2[index],
    ...extraProps
  }));
}

调用示例 #

对应你给出的输入场景，调用方式如下：

// 原始数组
const arr1 = ["A","B","C"];
const arr2 = [1,2,3];

// 调用函数生成目标结果
const result = generateObjectArray(arr1, 'name', arr2, 'id', {trash: false});

输出的result就是你需要的目标结构：

[{name: "A", id: 1, trash: false},{name: "B", id: 2, trash: false},{name: "C", id: 3, trash: false}]

简化版写法 #

如果不需要复用逻辑，也可以直接写单次调用的简化代码：

const arr1 = ["A","B","C"];
const arr2 = [1,2,3];
const result = arr1.map((item, index) => ({
  name: item,
  id: arr2[index],
  trash: false
}));

注意事项 #

• 需保证两个输入数组长度一致，否则会触发校验报错，也可以根据业务需求调整为以短数组长度为准等其他逻辑。
• 额外属性如果需要动态取值，也可以修改逻辑为传入生成函数，按索引计算属性值。

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