JavaScript forEach 函数中不发生返回？

Question

我正在使用 DocxJS 包来创建一个文档。在我的文档中，我正在尝试创建一个函数，该函数将迭代一些前端道具并为数组中的每个对象创建多个段落。每当我遍历数组并 console.log 它时，它都可以正常工作。当我做同样的事情并尝试使用 return 语句编写文档中所述的“新段落”时，它无法正常工作并且什么也不返回。

这里是包和文档： 包邮：https://www.npmjs.com/package/docx 文档：https://docx.js.org/#/

我的数组标记如下所示：

[{item}, {item}, {item}]

数组里面的对象是：

{item.value, item.description, item.tags}

这是我创建的函数：

const createItem = () => {
    let itemArray = this.props.goods.products.items;
    console.log(itemArray);

    // This will properly console.log the item description for each one (3 total)
    itemArray.forEach((item) => {
        console.log(item.description);
    })

    // This doesn't return anything, but the console.log DOES return the item descriptions like before
    itemArray.forEach((item) => {
         return new Paragraph({
             text: `${item.description}`,
             alignment: AlignmentType.CENTER,
             style: 'educationDegree'
         }, console.log(item.description));
    })
}

稍后在我使用 docx 包创建的文档中，我只是像这样调用函数：createItem()

我试过传入 createItem(this.props.goods.products.items) 但它什么也没做。我试过这样做：this.createItem(this.props.goods.products.items) 它只是返回 this.createItem 不是一个函数。

我只是不明白为什么这不能正常工作并在迭代数组时返回每个项目的 item.description？目前它只返回我请求的控制台日志。

Answer 1

这样的东西应该适合你：

const itemArray = [{description: 'Lorem ipsum'}, {description: 'Lorem ipsum'}]

const AlignmentType = {
   CENTER: 'center'
}

class Paragraph {
  constructor(text, alignment, style) {
    this.text = text
      this.alignment = alignment
      this.style = style
  }
}

const paragraphArray = itemArray.reduce((acc, item) => [...acc, new Paragraph(item.description, AlignmentType.CENTER, 'educationDegree')],[])

Answer 2

Array.prototype.forEach() 总是返回 void 无论使用什么 Array.prototype.reduce() 或者编写一个自定义函数来接收一个数组并返回一个新数组（不是对你传递的那个的引用）你可以参考mdnMDN Array

您可以看到文档中提到的 forEach 的返回值始终未定义我建议您使用 Array.prototype.reduce()

   let resArr = itemArray.reduce((acc,item) =>{
             let para = new Paragraph({
                 text: `${item.description}`,
                 alignment: AlignmentType.CENTER,
                 style: 'educationDegree'
             })
             acc.push(para)
             return acc;
        },[]);

获取新对象而不是改变现有的引用对象是一种很好的做法，因此认为这会有所帮助。