partition 方法的基本原理与实现方式
概念与返回结构
在前端开发中，partition 指的是把一个数组按给定的 谓词函数 分成两组，返回值通常是 [满足条件的子数组, 不满足条件的子数组]。这是一种常用的数据分流手段，用于在渲染前把数据分门别类。
与双向筛选相比，partition 提供了一次性遍历的能力，避免多次遍历带来的性能损耗，使得在大数据量场景下的前端渲染更高效。
// 简单的 partition 实现：对数组进行一次遍历，将元素按谓词划分到两组
function partition(arr, predicate) {const pass = [];const fail = [];for (const item of arr) {(predicate(item) ? pass : fail).push(item);}return [pass, fail];
}与 lodash 的 partition 对比
在一些项目中，lodash 提供了内置的 _.partition 函数，可以直接返回两个分组的数组：[符合条件的数组, 不符合条件的数组]。与自定义实现相比，使用现成的库可以减少实现细节的重复工作，但需要引入额外的依赖。
使用示例中，返回值结构保持一致，便于与 UI 渲染逻辑对接，且对谓词的表达能力更强于简单布尔判断。
// 使用 lodash 的 partition
// 假设已引入 lodash
const nums = [1, 2, 3, 4, 5];
const [evens, odds] = _.partition(nums, n => n % 2 === 0);
console.log(evens); // [2, 4]
console.log(odds); // [1, 3, 5]自定义实现的要点
在自定义实现中，核心要点包括 单次遍历、面向不可变性、以及对谓词函数的灵活性支持。通过 reduce/forEach 的组合，可以在保持简洁的同时实现高效分组。
为了避免副作用，推荐使用对新数组的拼接或推送，而不是对原始数据进行就地修改，从而提高代码的可维护性和可测试性。
// 一个更通用且保持不可变性的分组实现（使用 reduce）
function partitionImmutable(arr, predicate) {return arr.reduce(([pass, fail], item) => {if (predicate(item)) {pass = pass.concat(item);} else {fail = fail.concat(item);}return [pass, fail];},[[], []]);
}实战场景：在前端项目中的应用场景
场景一：用户数据分组：激活与禁用
在后台管理面板中，常需要把用户按 激活 与 禁用 两种状态进行分组，便于分别展示和统计。使用 partition 可以在一次遍历内完成分组，返回两个子数组，便于后续渲染和分页。
下面展示一个简单的示例，先定义分组逻辑，然后将结果绑定到两个不同的 UI 区域。
// 数据示例
const users = [{ id: 1, name: 'Alice', active: true },{ id: 2, name: 'Bob', active: false },{ id: 3, name: 'Carol', active: true }
];// 定义 partition 逻辑（若未通过谓词则进入另一组）
const [activeUsers, inactiveUsers] = partition(users, u => u.active);console.log('激活用户:', activeUsers);
console.log('禁用用户:', inactiveUsers);场景二：界面渲染优化：两组列表分离
在列表渲染时，通常需要把数据分成两组，以便分别渲染不同的 UI 区域（如主列表和快捷操作区）。partition 可以在一次遍历内完成分组，避免多轮筛选对性能的影响。
通过将数据源按条件分离，可以直接在渲染阶段使用两组数据，提升渲染效率和代码清晰度。
const items = [{ id: 1, label: 'item-1', show: true },{ id: 2, label: 'item-2', show: false },{ id: 3, label: 'item-3', show: true }
];// 使用 partition，将显示项与隐藏项分开
const [visibleItems, hiddenItems] = partition(items, it => it.show);console.log('可见项', visibleItems);
console.log('隐藏项', hiddenItems);场景三：数据处理与分页准备
在数据分页或分批加载的场景中，可以先将符合当前页条件的数据与其余数据分开，便于后续分页渲染和请求管理。partition 提供了一直线实现的方法，降低了实现复杂度。
实际应用中，结合你的分页逻辑，可以把“当前页数据”与“剩余数据”分离开来，简化渲染路径。
const dataset = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));// 假设当前页容量为 20，前 20 条放入当前页，其余留作加载
const [currentPage, rest] = partition(dataset, item => item.id <= 20);console.log('当前页数据量:', currentPage.length); // 20
console.log('剩余数据量:', rest.length); // 80实现要点与性能考量
单次遍历的优势
在大规模数据处理场景中，partition 通过一次遍历即可完成分组，避免了对同一数组的多次筛选操作，从而显著提升渲染性能和响应速度。
使用原生实现时，推荐优先采用 单次遍历 的写法，例如通过 for/of 或 reduce，确保遍历成本最小化。
// 使用 reduce 的单次遍历实现
function partition(arr, predicate) {const pass = [];const fail = [];arr.reduce((_, item) => {(predicate(item) ? pass : fail).push(item);}, 0);return [pass, fail];
}不可变性与副作用
保持数据的不可变性有助于提升 UI 的可预测性，避免副作用引发的渲染问题。partition 的实现应尽量返回新数组而非就地修改原始数据。
如果你需要严格的不可变性，可以使用 slice/concat 等方法逐步构造新数组，或采用前文提到的 reduce 风格实现。
// 不可变性友好实现示例
function partitionImmutable(arr, predicate) {const [pass, fail] = arr.reduce(([p, f], item) => (predicate(item) ? [p.concat(item), f] : [p, f.concat(item)]),[[], []]);return [pass, fail];
}与分组其他模式的对比
与单独使用两次 filter 相比，partition 的优点在于只遍历一次即可得到两组结果，减少了时间复杂度和中间状态的维护成本。
在某些场景下，直接使用 라이브러中的 partition 可以进一步提升开发效率，但需要权衡是否引入额外依赖以及打包体积。
// 与两次 filter 的对比示例（简化）
// 两次 filter
const active = users.filter(u => u.active);
const inactive = users.filter(u => !u.active);//partition 只需一次遍历
const [act, notAct] = partition(users, u => u.active);
