如何将对象数组中info字段的数组转换为指定结构的对象数组？

问题场景 #

原始数据：

let data = [{id:1,info:['Optical','Drive']},{id:2,info:['Paper','Binder']}];

预期将每个对象的info字段从字符串数组转换为包含name（原字符串值）和length（字符串长度）的对象数组，预期结果：

let data = [{id:1,info:[{name:'Optical',length:7},{name:'Drive',length:5}]},{id:2,info:[{name:'Paper',length:5},{name:'Binder',length:6}]}];

尝试代码及问题：

const getLength = (str) => (str.length)
const addLength = (str) => {
  try {
    let newObj = {};
    newObj.name = str;
    newObj.length = getLength(str);
    return newObj;
  } catch (error) {
    console.log(error)
  }
}
const mapedData = data.map((object) => {
  object.info.map((str) => (addLength(str)))
})

执行后得到结果 [ undefined, undefined ]，需要修复。

错误原因 #

1. 外层map无返回值：data.map的回调函数仅执行了object.info.map(...)，但没有返回处理后的对象，map默认返回undefined，最终生成全为undefined的数组。
2. 可选隐患：原对象污染：直接修改object.info会改动原始的data数组，若需保留原始数据，应返回新对象而非修改原对象。

修复方案 #

方案1：允许修改原对象（简单直接） #

在data.map回调中返回修改后的原对象：

const getLength = (str) => str.length;
const addLength = (str) => {
  try {
    return { name: str, length: getLength(str) };
  } catch (error) {
    console.log(error);
    return null; // 异常时返回默认值避免流程中断
  }
};
const mapedData = data.map((object) => {
  object.info = object.info.map(addLength);
  return object;
});

方案2：返回新对象（无副作用，推荐） #

不修改原始数据，生成全新的对象数组：

const getLength = (str) => str.length;
const addLength = (str) => {
  try {
    return { name: str, length: getLength(str) };
  } catch (error) {
    console.log(error);
    return null;
  }
};
const mapedData = data.map((object) => ({
  ...object, // 复制原对象所有属性
  info: object.info.map(addLength) // 替换info为转换后的新数组
}));

两种方案执行后，mapedData都会得到预期结果，方案2不会改动原始data数组，更符合无副作用的编程原则。

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