Array.prototype.map() 期望返回一个值，但不能根据其他问题返回 null，在箭头函数的末尾

Question

我正在使用带有不以 else 结尾的 if 语句的 map 函数。 我必须严格只显示定义的 recourseTypes。

在 eslint 中，我的 => 出现错误，因为它没有以 else 结尾

Array.prototype.map() 期望在箭头函数结束时返回一个值。

有没有正确的方法来写这个？

代码：

   routes: async () => {
      const apiURL = process.env.BASE_URL
      const response = await axios.get(`${apiURL}/urls`)
      const { data: resources } = response.data
      const urlModule = resources.map((resource) => {
        const { resourceType } = resource

    if (resourceType === 'brand') {
      return {
        url: `/${resource.url}`,
        changefreq: 'weekly',
        priority: 0.9,
      }
    } else if (resourceType === 'product') {
      return {
        url: `/${resource.url}`,
        changefreq: 'monthly',
        priority: 0.8,
      }
    } else if (resourceType === 'category') {
      return {
        url: `/${resource.url}`,
        changefreq: 'weekly',
        priority: 0.7,
      }
    } else if (resourceType === 'document') {
      return {
        url: `/${resource.url}`,
        changefreq: 'weekly',
        priority: 0.6,
      }
    }
  })

  return [
    {
      url: '/',
      changefreq: 'daily',
      priority: 1,
    },
    {
      url: '/account',
      changefreq: 'daily',
      priority: 1,
    },
    {
      url: '/account/order-history',
      changefreq: 'daily',
      priority: 1,
    },
    ...urlModule,
  ]
},

Answer 1

您需要找出在else情况下返回的默认值。 从技术上讲，它不需要在else块中，因为您在另一个if块中返回，它可以只是在函数的末尾。 为确保仅包含允许的resourceType ，您可以返回某种输出，如果有人没有使用正确的resourceType ，您将能够将其识别为“错误”。 您说您不想返回null ，大概是因为您不希望在最终数组中使用它，因此您可以返回null然后使用简单的.filter(item => item)进行过滤以确保一切都是真实的，或者您可以显式检查null 。 无论哪种方式，您都必须返回某种可识别的“错误”默认值并处理这种情况。

Answer 2

澄清： resources数组包含我们使用if/else子句比较的所有资源类型？ 由于Array.map()将返回与输入数组包含的相同数量的元素，否则它将返回未定义的元素。

建议：我们可以使用多个if语句来代替多个if/else-if子句以获得更好的性能。

演示：

 // Response coming from API. const resources = [{ resourceType: 'brand', url: 'brandUrl' }, { resourceType: 'product', url: 'productUrl' }, { resourceType: 'category', url: 'categoryUrl' }, { resourceType: 'document', url: 'documentUrl' }]; // Array of required ResourceTypes. const requiredResourceTypes = ['brand', 'product', 'document']; // Logic to filter and get the URL's object of the required resourceTypes. const urlModule = resources.filter(({resourceType}) => requiredResourceTypes.includes(resourceType)).map((resource) => { const { resourceType } = resource if (resourceType === 'brand') { return { url: `/${resource.url}`, changefreq: 'weekly', priority: 0.9, } } if (resourceType === 'product') { return { url: `/${resource.url}`, changefreq: 'monthly', priority: 0.8, } } if (resourceType === 'category') { return { url: `/${resource.url}`, changefreq: 'weekly', priority: 0.7, } } if (resourceType === 'document') { return { url: `/${resource.url}`, changefreq: 'weekly', priority: 0.6, } } }); console.log(urlModule);

性能测试结果截图：