javascript - 为什么下面的map函数会产生 undefined object ？

Question

我有一个数组context.buildingFields.finished，如下所示:

[{ name: 'a' type: 'text', value: '1' }, { name: 'b' type: 'file', value: '2' }] 

我有一个函数循环遍历该数组来创建一个新的context.createPanoramasPayload，其中仅类型为file的字段:

function handleCreatePanoramas (uploadedPhoto, context, callback) {
    const panoramasFields = context.buildingFields.finished
    context.createPanoramasPayload = panoramasFields.map(field => {
      if (field.type !== 'file') return
      return {
        name: 'index',
        value: uploadedPhoto
      }
    })
    callback(context.createPanoramasPayload)
  }
}

我想我会生成这样的东西(比如只有一个 file 类型的字段):

[{ name: 'b' type: 'file', value: '2' }] 

但是，我得到的是这样的:

[undefined, { name: 'b' type: 'file', value: '2' }] 

这是为什么呢？以及如何修改代码来达到我想要的效果？

Answer 1

map 返回一个与给定数组长度相同的数组。像这样返回没有帮助，因为这会在映射数组中生成一个未定义值。相反，您需要先应用过滤器:

context.createPanoramasPayload = panoramasFields.filter(field => {
    return field.type === 'file';
}).map(field => {
    return {
        name: 'index',
        value: uploadedPhoto
    }
})

这符合函数式编程方式。

顺便说一句，由于回调函数现在除了返回某些内容之外不执行任何其他操作，因此您可以使用箭头函数的表达式语法:

context.createPanoramasPayload = panoramasFields
    .filter(field => field.type === 'file')
    .map(field => ({
        name: 'index',
        value: uploadedPhoto
    }));