JavaScript数组内使用for循环创建对象报错问题咨询

错误原因 #

• JS不支持直接在数组字面量[]中写入for循环语句生成元素，你的第二份代码存在语法错误
• 最初的实现只生成了包含单个对象的数组，因此所有数据会被填充到表格的同一行

正确实现方案 #

方案1：for循环实现（匹配你原本的开发思路） #

先初始化空数组，遍历data时逐一向数组内插入构造好的对象即可：

// 初始化空数组
const products = []
for (let i = 0; i < data.length; i++) {
  products.push({
    username: JSON.stringify(data[i], ['from']),
    content: JSON.stringify(data[i], ['content']),
    date: JSON.stringify(data[i], ['updatedAt'])
  })
}

方案2：map方法实现（更简洁的现代JS写法） #

使用数组内置的map方法可以直接生成处理后的新数组，无需手动初始化空数组和调用push：

const products = data.map(item => ({
  username: JSON.stringify(item, ['from']),
  content: JSON.stringify(item, ['content']),
  date: JSON.stringify(item, ['updatedAt'])
}))

注意：箭头函数直接返回对象字面量时，需要用小括号包裹对象，否则JS会将对象的大括号识别为函数体的边界，产生语法错误

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