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<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）中，你可以这样渲染： // <div className="task-list"> // <h2>待办事项</h2> // {pendingTasks.map(task => <TaskItem key={task.id} task={task} />)} // <h2>已完成事项</h2> // {completedTasks.map(task => <TaskItem key={task.id} task={task} />)} // </div>这样，你就不需要两次遍历
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）中，不可变性对于性能优化和状态管理至关重要。
理解这些考量，能帮助我们写出不仅仅是“能用”，更是“好用”且“健壮”的代码。有时候，一个看似简单的工具函数，背后也藏着不少值得深思的工程实践。
评论（已关闭）
评论已关闭