JS数组分割技巧：使用partition方法分组数据

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS如何用partition分割数组为两部分》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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）中，不可变性对于性能优化和状态管理至关重要。

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。