JS数组partition方法使用详解

JS如何用partition分割数组？本文深入探讨了JavaScript中实现数组分区的多种方法，重点介绍了使用reduce方法的高效性和简洁性，并对比了使用两个filter和for循环/forEach的优缺点。Reduce方法因其单次遍历的特性，在性能上更具优势，尤其适用于大数据量处理。文章还剖析了数组分区在UI渲染优化、数据清洗验证以及游戏开发等实际场景中的应用，并强调了实现自定义分区函数时需要注意的性能陷阱和边界情况处理，如避免重复计算predicate函数、关注内存开销、处理非数组输入等，旨在帮助开发者编写更健壮、高效的JS代码。掌握这些技巧，能让你在实际开发中游刃有余，提升代码质量和执行效率。

JavaScript中实现数组分区的常见方法有三种：使用reduce、使用两个filter、使用for循环或forEach；2. reduce方法只需遍历一次数组，性能较好且代码简洁，是推荐的首选方案；3. 两个filter方法代码直观但会遍历数组两次，predicate函数若复杂则性能较差，不推荐用于大数据量场景；4. for循环或forEach为命令式写法，性能与reduce相近，逻辑清晰，适合不熟悉函数式编程的开发者；5. 实际开发中，数组分区常用于UI渲染优化（如区分待办与已完成任务）、数据清洗与验证（分离有效与无效数据）、游戏开发中的实体管理（区分活跃与非活跃对象）等场景；6. 实现时需注意避免重复执行predicate函数、关注内存开销（因生成新数组）、确保predicate函数轻量高效、处理非数组或空数组等边界情况，并保持函数的不可变性以提升代码健壮性。

在JavaScript里，如果你想把一个数组根据某个条件分成两部分，比如一部分满足条件，另一部分不满足，其实并没有一个像Python或Ruby那样内置的partition方法可以直接调用。但说实话，这事儿一点都不复杂，我们完全可以自己动手实现一个，而且方法还挺多的，核心思路无非就是遍历一次，然后把符合条件的丢到一边，不符合的丢到另一边。最常见的做法就是用reduce或者一个简单的for循环来搞定。

解决方案

要实现一个将数组分为满足条件和不满足条件两部分的函数，我们可以利用reduce方法，它非常适合这种将数组“折叠”成一个新结构的需求。

/**
 * 将数组根据提供的条件函数分为两部分。
 *
 * @param {Array} arr 要分区的数组。
 * @param {Function} predicate 一个函数，对数组中的每个元素进行测试。
 *                            返回 true 表示满足条件，false 表示不满足。
 * @returns {Array} 一个包含两个数组的数组：第一个是满足条件的元素，第二个是不满足条件的元素。
 */
function partition(arr, predicate) {
  if (!Array.isArray(arr)) {
    console.warn("partition函数期望接收一个数组，但收到了非数组类型。");
    return [[], []]; // 返回空数组以避免后续错误
  }

  return arr.reduce((acc, item) => {
    // acc 是累加器，初始值是 [[], []]
    // predicate(item) 判断当前元素是否满足条件
    if (predicate(item)) {
      acc[0].push(item); // 满足条件，放入第一个数组
    } else {
      acc[1].push(item); // 不满足条件，放入第二个数组
    }
    return acc;
  }, [[], []]); // 初始值是一个包含两个空数组的数组
}

// 示例用法：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [evenNumbers, oddNumbers] = partition(numbers, num => num % 2 === 0);

console.log("偶数:", evenNumbers); // 偶数: [2, 4, 6, 8, 10]
console.log("奇数:", oddNumbers);  // 奇数: [1, 3, 5, 7, 9]

const users = [
  { name: 'Alice', isActive: true },
  { name: 'Bob', isActive: false },
  { name: 'Charlie', isActive: true },
  { name: 'David', isActive: false }
];

const [activeUsers, inactiveUsers] = partition(users, user => user.isActive);

console.log("活跃用户:", activeUsers);   // 活跃用户: [{ name: 'Alice', isActive: true }, { name: 'Charlie', isActive: true }]
console.log("非活跃用户:", inactiveUsers); // 非活跃用户: [{ name: 'Bob', isActive: false }, { name: 'David', isActive: false }]

这个partition函数的核心就是reduce。它遍历一次数组，每次迭代都根据predicate函数的返回值，把当前元素推入累加器（acc）中的第一个数组（满足条件）或第二个数组（不满足条件）。最终返回的acc就是我们想要的两个分好类的数组。

在JavaScript中实现数组分区有哪些常见的替代方案？

除了上面提到的reduce方法，我们其实还有几种方式来达到数组分区的目的，每种都有它自己的特点和适用场景。我个人觉得，了解这些不同的实现方式，能让我们在面对具体问题时，选择最合适、最优雅的方案。

• 使用两个filter方法： 这是最直观，也可能是很多人首先想到的方法。既然要分成两部分，那我就用filter过滤出满足条件的一部分，再用filter过滤出不满足条件的另一部分不就行了？

  function partitionWithTwoFilters(arr, predicate) {
    const satisfied = arr.filter(predicate);
    const unsatisfied = arr.filter(item => !predicate(item)); // 注意这里要对predicate取反
    return [satisfied, unsatisfied];
  }
  
  const [even, odd] = partitionWithTwoFilters(numbers, num => num % 2 === 0);
  // console.log(even, odd);

  这种方式代码写起来确实简洁明了，可读性也很好。但它的一个明显缺点是，它会遍历原始数组两次。对于小型数组来说，这点性能开销几乎可以忽略不计。但如果你的数组非常大，或者predicate函数内部有比较耗时的操作，那么两次遍历的开销就可能会变得显著。在追求极致性能的场景下，我通常会避免这种做法。

• 使用forEach或传统的for循环： 这是最基础、最“原始”的实现方式，也是性能上最接近reduce的单次遍历方法。

  function partitionWithLoop(arr, predicate) {
    const satisfied = [];
    const unsatisfied = [];
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i];
      if (predicate(item)) {
        satisfied.push(item);
      } else {
        unsatisfied.push(item);
      }
    }
    return [satisfied, unsatisfied];
  }
  
  const [evenLoop, oddLoop] = partitionWithLoop(numbers, num => num % 2 === 0);
  // console.log(evenLoop, oddLoop);

  这种方式和reduce在本质上是一样的，都是单次遍历。它的优点是非常清晰，没有reduce的函数式编程概念，对于不熟悉reduce的开发者来说更容易理解。在某些追求极致性能且不介意命令式编程风格的场景下，我甚至会更倾向于这种显式的循环。

总的来说，如果你想代码简洁且性能不是瓶颈，reduce是我的首选。如果性能至关重要，或者你更喜欢命令式风格，那么for循环或forEach会是很好的选择。而两个filter的方式，我个人觉得在大多数需要分区的场景下，除非是为了追求极致的简洁度而牺牲一点性能，否则并不推荐。

JS数组分区在哪些实际开发场景中特别有用？

数组分区这种操作，看似简单，但在实际的Web开发中，它的应用场景远比你想象的要广泛和实用。它不仅仅是把数据分成两份那么简单，更是一种逻辑上的分类和组织，能让我们的代码更清晰、数据处理更高效。

• UI渲染优化与状态管理： 这是最常见的场景之一。比如，你有一个用户列表，有些用户是活跃的，有些是非活跃的。如果你想在UI上分别展示他们，或者根据他们的状态应用不同的样式，partition就非常方便。

  const allTasks = [
    { id: 1, title: '完成报告', completed: false },
    { id: 2, title: '开会', completed: true },
    { id: 3, title: '回复邮件', completed: false }
  ];
  
  const [completedTasks, pendingTasks] = partition(allTasks, task => task.completed);
  
  // 在前端框架（如React, Vue）中，你可以这样渲染：
  // 
  
  //   
  待办事项
  //   {pendingTasks.map(task => )}
  //   
  已完成事项
  //   {completedTasks.map(task => )}
  // 

  这样，你就不需要两次遍历allTasks来分别找到已完成和待办的任务，一次分区就搞定了。这对于管理UI组件的状态，或者实现一些筛选功能，都非常有用。

• 数据清洗与验证： 在处理用户输入或者从后端获取的数据时，我们经常需要验证数据的有效性。partition可以帮助我们把有效数据和无效数据（或者说，需要进一步处理的错误数据）清晰地分开。

  const rawUserData = [
    { id: 1, email: 'test@example.com', age: 30 },
    { id: 2, email: 'invalid-email', age: 25 },
    { id: 3, email: 'another@example.com', age: 'twenty' } // 年龄格式错误
  ];
  
  function isValidUser(user) {
    return typeof user.email === 'string' && user.email.includes('@') &&
           typeof user.age === 'number' && user.age > 0;
  }
  
  const [validUsers, invalidUsers] = partition(rawUserData, isValidUser);
  
  console.log("有效用户:", validUsers);
  console.log("无效用户 (需要处理或提示):", invalidUsers);

  这样，你就可以对validUsers进行后续的业务逻辑处理，而invalidUsers则可以用于生成错误报告或者给用户友好的提示。这比手动循环判断再分别push要优雅得多。

• 游戏开发中的实体管理： 在一些简单的游戏逻辑中，比如管理屏幕上的敌人或道具，你可能需要将“存活的”和“已死亡/消失的”实体分开处理。

  const gameEntities = [
    { id: 'enemy-1', health: 100, alive: true },
    { id: 'player', health: 50, alive: true },
    { id: 'enemy-2', health: 0, alive: false } // 已经死亡
  ];
  
  const [activeEntities, removedEntities] = partition(gameEntities, entity => entity.alive);
  
  // 接下来只对 activeEntities 进行游戏逻辑更新和渲染
  // removedEntities 可以从内存中清理掉

  这种模式在游戏循环中非常常见，可以有效管理需要更新和渲染的活跃对象，同时方便清理不再需要的对象。

这些例子都表明，partition不仅仅是一个技术实现，更是一种思维方式：如何高效、清晰地根据某种条件对数据进行分类。它让我们的代码更具表达力，也更容易维护。

实现自定义分区函数时，有哪些常见的陷阱或性能考量？

虽然实现一个partition函数看起来很简单，但在实际应用中，尤其是在处理大量数据或性能敏感的场景时，还是有一些细节和“坑”需要我们留意。

• 重复计算predicate函数： 这是使用两个filter方法时最明显的问题。arr.filter(predicate)会遍历一次并执行predicate，然后arr.filter(item => !predicate(item))又会遍历一次并再次执行predicate（虽然是取反）。如果你的predicate函数内部有复杂的计算，或者涉及到对DOM的操作、网络请求等，那么两次执行的开销就会翻倍。这就是为什么我个人更倾向于reduce或单次for循环的原因，它们只对每个元素执行一次predicate。

• 创建新数组的内存开销： 无论是reduce、filter还是for循环，它们在内部都会创建新的数组来存储分区后的结果。这意味着，如果你在处理一个非常大的数组（比如几十万甚至上百万个元素），那么partition函数会同时在内存中维护原始数组、以及两个新的子数组。这可能会导致内存占用增加。在某些极端内存受限的环境下，你可能需要考虑原地修改数组（虽然这会破坏原始数组，通常不推荐），或者使用流式处理（如果数据源支持）。不过，对于大多数Web应用场景，这种内存开销通常在可接受范围内。

• predicate函数的性能： 这个函数的效率直接决定了整个partition函数的性能。如果你的predicate函数内部有循环、正则表达式的复杂匹配、或者其他计算量大的操作，那么即使是单次遍历，累积起来的开销也可能变得很大。所以在设计predicate时，尽量让它保持轻量和高效。举个例子，如果你的predicate是检查一个字符串是否包含某个子串，string.includes()通常比new RegExp().test()要快，除非你需要复杂的模式匹配。

• 处理空数组或非数组输入： 一个健壮的partition函数应该能优雅地处理边界情况。如果传入的arr是空数组，或者根本不是数组，你的函数应该返回什么？在我的示例中，我加入了if (!Array.isArray(arr))的检查，并返回了[[], []]，这样可以避免后续操作出错。这虽然是个小细节，但在实际项目中，这种健壮性是很有价值的。

• 可变性与不可变性： 我提供的partition实现是“纯函数”的，它不会修改原始数组arr，而是返回新的数组。这符合函数式编程的理念，也让代码更易于理解和调试，因为你不需要担心函数执行后原始数据被意外修改。在JavaScript中，尽可能保持数据的不可变性是一个好习惯，尤其是在前端框架（如React）中，不可变性对于性能优化和状态管理至关重要。

理解这些考量，能帮助我们写出不仅仅是“能用”，更是“好用”且“健壮”的代码。有时候，一个看似简单的工具函数，背后也藏着不少值得深思的工程实践。

本篇关于《JS数组partition方法使用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！