Axios处理技巧：避免Map生成undefined方法

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《Axios响应处理：避免Map生成undefined的技巧》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

1. 问题背景：map方法中的undefined陷阱

在JavaScript中，Array.prototype.map()方法会遍历数组的每个元素，并根据回调函数的返回值创建一个新数组。一个常见的误区是，当回调函数内部包含条件判断，并且在条件不满足时没有明确返回任何值，或者返回了undefined，map方法仍然会在新数组中为这些不满足条件的元素保留一个undefined占位符。

考虑以下场景：我们通过Axios发起GraphQL突变请求，获取到一个响应数据。同时，我们有一个update_vars数组，其中包含一系列标签。我们的目标是从响应数据中提取id，但仅限于那些label与update_vars中任一标签匹配的项。

原始的尝试代码可能如下：

const func = async (vars, update_vars) => {
  // 假设 axiosFunction 返回的 response.data 是一个包含多个对象的数组
  // 例如：[{id: '112', label: 'val 1'}, {id: '113', label: 'val 2'}, {id: '152', label: 'val 13'}]
  await axiosFunction({ query: create_fields, variables: vars }).then(
    (response) => {
      if (update_vars !== undefined) {
        // 这里的 response.data.label 在原始问题中被误解为单个对象属性
        // 实际上，如果需要匹配多个响应项，response.data 应该是一个数组
        // 假设 response.data 结构为 { data: [{id: '112', label: 'val 1'}, ...] }
        const yo = update_vars.att.map((att) => { // 迭代 update_vars.att
          // 这里的逻辑存在问题：它试图将 update_vars.att 的每个元素与一个单一的 response.data 进行比较
          // 如果 response.data 是一个数组，则 response.data.label 是 undefined
          // 如果 response.data 是一个对象，则只能匹配一个标签
          if (att.label === response.data.label) {
            return response.data.id;
          }
          // 如果条件不满足，此处隐式返回 undefined
        });
        console.log(yo); // 结果可能包含大量 undefined，例如：[undefined, '113', undefined, undefined]
      }
    }
  );
};

上述代码的主要问题在于：

1. map的特性：当if条件不满足时，回调函数没有明确的return语句，JavaScript会隐式返回undefined。map方法会忠实地将这些undefined收集到新数组中。
2. 匹配逻辑：原始代码尝试将update_vars.att中的每个att.label与response.data.label（如果response.data是一个单对象）进行比较。然而，根据期望的输出['112', '113']，我们实际上需要从response中筛选出所有匹配update_vars中标签的项，这暗示response.data本身是一个包含多个对象的数组。

2. 解决方案：结合Set、filter和map进行高效数据处理

为了避免undefined值并高效地实现筛选和转换，我们可以采用以下策略：

1. 构建标签查找集合（Set）：将update_vars中所有需要匹配的标签提取到一个Set中。Set数据结构提供了O(1)的平均时间复杂度进行元素查找，比数组的includes方法（O(N)）更高效。
2. 筛选响应数据（filter）：使用Array.prototype.filter()方法遍历Axios响应中的数据项。只有当数据项的label存在于我们之前构建的Set中时，才保留该数据项。filter方法会创建一个新数组，其中只包含满足回调函数条件的元素，从而有效地减少了数组的长度，移除了不相关的元素。
3. 转换数据（map）：对经过filter筛选后的数组使用Array.prototype.map()方法，提取出我们最终需要的id值。此时，由于数组已经被预先筛选，map操作将不再产生undefined。

示例代码

假设update_vars和response的数据结构如下：

// 模拟 update_vars 数据
const update_vars = [
  { label: 'val 1' },
  { label: 'val 2' },
  { label: 'val 3' },
  { label: 'val 4' }
];

// 模拟 Axios 响应数据结构，其中 response.data 是一个数组
const response = {
  data: [
    { id: '112', other_id: '352009093', label: 'val 1' },
    { id: '113', other_id: '3520012', label: 'val 2' },
    { id: '152', other_id: '234578', label: 'val 13' } // 此项的标签不匹配
  ]
};

使用Set、filter和map的解决方案：

// 1. 从 update_vars 中提取所有标签并存入 Set
const labelsToMatch = new Set(update_vars.map(item => item.label));

// 2. 过滤 response.data，只保留标签匹配的项
const filteredResponseItems = response.data.filter(item => labelsToMatch.has(item.label));

// 3. 从过滤后的项中提取 id
const resultIds = filteredResponseItems.map(item => item.id);

console.log(resultIds); // 输出: ['112', '113']

代码详解

1. new Set(update_vars.map(item => item.label)):

   • update_vars.map(item => item.label)：首先，我们使用map方法遍历update_vars数组，提取每个对象的label属性，生成一个只包含标签字符串的数组，例如 ['val 1', 'val 2', 'val 3', 'val 4']。
   • new Set(...)：然后，我们将这个标签数组作为参数传递给Set构造函数。Set会自动去除重复的标签，并提供极快的has()方法来检查某个值是否存在于集合中。

2. response.data.filter(item => labelsToMatch.has(item.label)):

   • response.data.filter(...)：我们对response.data数组（假设其为包含多个对象的数组）调用filter方法。
   • item => labelsToMatch.has(item.label)：对于response.data中的每一个item，我们检查其label属性是否存在于labelsToMatch这个Set中。如果存在（即labelsToMatch.has(item.label)返回true），则该item会被保留在filteredResponseItems新数组中；否则，它将被丢弃。

3. filteredResponseItems.map(item => item.id):

   • filteredResponseItems.map(...)：现在，filteredResponseItems数组只包含那些label匹配的响应数据项。
   • item => item.id：我们对这个已经筛选过的数组使用map方法，简单地提取每个item的id属性，生成最终的目标数组resultIds。

3. 注意事项与最佳实践

• 理解map与filter的区别：

  • map：用于“转换”数组中的每个元素，返回一个与原数组长度相同的新数组。如果不需要转换所有元素或需要减少数组长度，单独使用map并返回undefined是不合适的。
  • filter：用于“筛选”数组中的元素，返回一个只包含满足条件元素的新数组，其长度可能小于或等于原数组。

• Set的性能优势：当需要频繁检查一个元素是否存在于一个集合中时，Set的has()方法通常比数组的includes()方法（尤其是在大型数组中）性能更优。

• 链式调用：在实际开发中，上述三个步骤通常可以链式调用，使代码更简洁：

  const labelsToMatch = new Set(update_vars.map(item => item.label));
  const resultIds = response.data
    .filter(item => labelsToMatch.has(item.label))
    .map(item => item.id);
  console.log(resultIds); // 输出: ['112', '113']

• 数据结构清晰化：在处理来自API的响应时，务必明确响应数据的具体结构。如果响应预期是一个对象数组，那么在代码中应按数组处理，避免因误解数据结构而导致逻辑错误。

4. 总结

通过巧妙地结合Set、filter和map这三个强大的JavaScript数组操作方法，我们可以高效、准确地处理复杂的数据转换和筛选任务，尤其是在处理API响应时。这种方法不仅避免了Array.prototype.map方法在条件不满足时生成undefined值的常见陷阱，而且通过利用Set的快速查找能力，显著提升了数据处理的性能。掌握这种模式对于编写健壮、可维护且高性能的JavaScript代码至关重要。

理论要掌握，实操不能落！以上关于《Axios处理技巧：避免Map生成undefined方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！