js 怎么用partition将数组分为满足条件的两部分-js教程-PHP中文网

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

js 怎么用partition将数组分为满足条件的两部分

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