JavaScript中如何根据数组值创建含同名属性的对象结构

需要将题库数组中存储的选项列表，转换为固定结构的对象数组存入新对象的options字段下，原实现代码如下：

const quiz = [
    {question: 'Who is the main character of DBZ',
    options: ['Vegetta','Gohan','Goku']}
]

const newObj = {
    options: []
}
quiz.forEach((item)=>{
    item.options.forEach((item, index)=>{
        
    newObj.options[`name${index}`] = item
    })
})

• 期望输出结构：

newObj = {
    options: [{name: 'Vegetta'},{name:'Gohan'},{name:'Goku'}]
}

• 实际输出结构：

newObj = {
  options: [ name0: 'Vegetta', name1: 'Gohan', name2: 'Goku' ] 
}

• 赋值逻辑写错：newObj.options[\name${index}`] = item是给options`数组本身添加自定义字符串属性，不是向数组的元素列表中追加内容。数组本质也是特殊对象，允许添加自定义属性，但这些属性不会被算入数组元素，完全不符合目标结构。
• 键名逻辑写错：你需要的每个数组元素是固定带name键的对象，不需要把索引拼到键名里生成name0/name1这类键。
• 嵌套遍历参数重名：两层forEach都用item当参数名，很容易混淆上下文引用导致逻辑错误。

如果你的quiz数组里只有这一个题目，直接用map做转换最简洁：

const quiz = [
    {question: 'Who is the main character of DBZ',
    options: ['Vegetta','Gohan','Goku']}
]

const newObj = {
    options: quiz[0].options.map(option => ({name: option}))
}

如果需要兼容quiz里有多个题目、要把所有题目的选项都汇总到options数组里，就用遍历追加的写法：

const quiz = [
    {question: 'Who is the main character of DBZ',
    options: ['Vegetta','Gohan','Goku']}
]

const newObj = {
    options: []
}
quiz.forEach(quizItem => {
    quizItem.options.forEach(optionVal => {
        // 把每个选项转成{name: 值}的结构，追加到数组中
        newObj.options.push({name: optionVal})
    })
})

运行后得到的newObj结构和预期完全一致。

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