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 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将数组分为满足条件的两部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514871.html
微信扫一扫 
支付宝扫一扫 
