嵌套对象映射时，如何仅将存在的可选参数添加至数组？

原对象（修正语法错误后） #

原代码存在语法问题（数组元素需为对象），修正后的嵌套对象如下：

const payload = {
  abc: "abc",
  something: [
    {
      somevalue: "somevalue",
      nestedAray: [
        { anotherValue: "anotherValue" },
        { optionalValue: "optionalValue", optionalValue1: "optionalValue1" }
      ]
    }
  ]
};

预期映射结果（修正语法错误后） #

原预期输出存在结构错误，修正后的目标对象如下：

{
  name: "abc",
  skills: {
    Java: "somevalue",
    JSLibrary: [
      { JavaScript: "anotherValue" },
      { Angular: "optionalValue", NodeJs: "optionalValue1" }
    ]
  }
}

解决方案 #

方法1：条件判断添加可选键 #

先构建基础对象，通过if判断可选键是否存在，仅在存在时添加属性：

const output = {
  name: payload.abc,
  skills: {}
};

// 取something数组的第一个元素（若有多个元素可保留循环逻辑）
const targetItem = payload.something[0];
output.skills.Java = targetItem.somevalue;
output.skills.JSLibrary = [];

// 遍历嵌套数组处理映射
for (let j = 0; j < targetItem.nestedAray.length; j++) {
  const nestedItem = targetItem.nestedAray[j];
  const skillObj = {};

  // 映射固定键
  if (nestedItem.anotherValue) {
    skillObj.JavaScript = nestedItem.anotherValue;
  }
  if (nestedItem.optionalValue) {
    skillObj.Angular = nestedItem.optionalValue;
  }

  // 检查并添加可选键
  if (nestedItem.hasOwnProperty('optionalValue1')) {
    skillObj.NodeJs = nestedItem.optionalValue1;
  }

  output.skills.JSLibrary.push(skillObj);
}

方法2：对象展开+短路运算（简洁版） #

利用ES6对象展开运算符和逻辑短路，仅当可选键存在时才包含该属性：

const output = {
  name: payload.abc,
  skills: {
    Java: payload.something[0].somevalue,
    JSLibrary: payload.something[0].nestedAray.map(item => ({
      ...(item.anotherValue && { JavaScript: item.anotherValue }),
      ...(item.optionalValue && { Angular: item.optionalValue }),
      ...(item.optionalValue1 && { NodeJs: item.optionalValue1 })
    }))
  }
};

关键说明 #

• 检查可选键时，hasOwnProperty('optionalValue1')可确保属性确实属于当前对象（避免继承属性干扰）；若允许属性值为null/false等假值，优先使用该方法。
• 若仅需排除undefined，直接判断item.optionalValue1即可。
• 使用map方法替代嵌套for循环，更符合JavaScript数组处理的简洁风格。

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