如何在JavaScript中将元素数组转换为含name和displayName的对象数组

问题1：循环时报错newObj[i].name is NOT DEFINED #

错误原因 #

• 你初始化的newObj是仅包含1个元素的数组，当循环变量i >=1时，newObj[i]本身就是undefined，访问它的name属性自然会报错
• 你的逻辑混淆了「单个对象模板」和「对象数组」，且每次循环直接把整个newObj数组推入结果，也不符合输出要求

修复方案 #

更简单的实现可以直接用数组的map方法完成转换：

const myArray = ['A', 'B', 'C', 'D', 'E', 'F'];
// 如需C重复两次，可先调整原数组再做映射即可
const myNewObj = myArray.map(item => ({
  name: item,
  displayName: item
}));

如果要用for循环实现，写法如下：

const myArray = ['A', 'B', 'C', 'D', 'E', 'F'];
const myNewObj = [];
for (let i = 0; i < myArray.length; i++) {
  // 每次循环生成一个新的对象，推入结果数组
  myNewObj.push({
    name: myArray[i],
    displayName: myArray[i]
  });
}

问题2：存入sessionStorage时显示[Object, Object] #

错误原因 #

sessionStorage仅支持存储字符串类型数据，直接存入JS对象时，浏览器会自动调用对象的toString()方法，最终就会得到[Object Object]的结果，和对象内部的属性无关，不需要额外提取属性重新封装。

修复方案 #

存入时用JSON.stringify()将对象数组转为JSON字符串，读取时用JSON.parse()转回JS对象即可：

// 存入
sessionStorage.setItem('myData', JSON.stringify(myNewObj));

// 读取
const storedData = JSON.parse(sessionStorage.getItem('myData'));

内容的提问来源于stack exchange，提问作者Peter The Angular Dude