JS如何实现分组功能-js教程-PHP中文网

使用reduce方法可高效实现JS数据分组，通过遍历数组并以指定键累积分组结果，支持处理嵌套属性、复合键、键值缺失及类型不一致等复杂场景，结合Map或分批处理可进一步优化性能。

js如何实现分组功能

JavaScript中实现分组功能，核心思想其实就是遍历你手头的数据集合，然后根据你预设的一个“规则”或者说“键”，把那些符合相同规则的数据项归拢到一起。说白了，就是把散落在各处的数据，按某种共同点整理成一个个小堆。最常用、也最灵活的实现方式，我个人觉得是利用

Array.prototype.reduce()

登录后复制

方法。

解决方案

要用JS实现分组，最直接且高效的方式是利用数组的

reduce

登录后复制

方法。它允许你遍历数组，并累积一个结果。

假设我们有一组用户数据，想根据他们的城市进行分组：

const users = [
    { id: 1, name: 'Alice', city: 'New York' },
    { id: 2, name: 'Bob', city: 'London' },
    { id: 3, name: 'Charlie', city: 'New York' },
    { id: 4, name: 'David', city: 'Paris' },
    { id: 5, name: 'Eve', city: 'London' },
];

// 使用 reduce 实现分组
const groupedByCity = users.reduce((accumulator, currentUser) => {
    const city = currentUser.city; // 获取分组的键
    if (!accumulator[city]) {
        accumulator[city] = []; // 如果这个城市还没有对应的数组，就创建一个
    }
    accumulator[city].push(currentUser); // 把当前用户添加到对应的城市数组中
    return accumulator; // 返回累积器，供下一次迭代使用
}, {}); // 初始值是一个空对象

console.log(groupedByCity);
/*
输出大致会是这样：
{
  "New York": [
    { id: 1, name: 'Alice', city: 'New York' },
    { id: 3, name: 'Charlie', city: 'New York' }
  ],
  "London": [
    { id: 2, name: 'Bob', city: 'London' },
    { id: 5, name: 'Eve', city: 'London' }
  ],
  "Paris": [
    { id: 4, name: 'David', city: 'Paris' }
  ]
}
*/

登录后复制

这个过程有点像在整理文件：你拿到一份文件（

currentUser

登录后复制

），看一眼它的分类标签（

currentUser.city

登录后复制

），然后找到对应的文件夹（

accumulator[city]

登录后复制

）。如果文件夹不存在，就先创建一个新的（

!accumulator[city]

登录后复制

），再把文件放进去。这个

accumulator

登录后复制

就是你最终的分组结果。

如何处理复杂或多层级的数据分组需求？

实际开发中，数据结构往往比简单的扁平对象要复杂得多。你可能需要根据嵌套属性分组，或者同时依据多个条件来分组。

对于多层级的数据，例如

user.address.country

登录后复制

，你只需要调整获取键的逻辑：

const usersWithAddress = [
    { id: 1, name: 'Alice', address: { city: 'New York', country: 'USA' } },
    { id: 2, name: 'Bob', address: { city: 'London', country: 'UK' } },
    { id: 3, name: 'Charlie', address: { city: 'Boston', country: 'USA' } },
    { id: 4, name: 'David', address: { city: 'Paris', country: 'France' } },
];

const groupedByCountry = usersWithAddress.reduce((acc, user) => {
    const country = user.address?.country; // 使用可选链操作符，防止 address 不存在
    if (country) { // 确保国家存在才进行分组
        if (!acc[country]) {
            acc[country] = [];
        }
        acc[country].push(user);
    }
    return acc;
}, {});

console.log(groupedByCountry);

登录后复制

这里我加入了

?.

登录后复制

可选链操作符和

if (country)

登录后复制

判断，这是个好习惯，能避免在数据结构不完全一致时报错。

而当需要根据多个条件组合分组时，你可以拼接一个复合键。比如，要同时根据城市和国家分组：

const groupedByCityAndCountry = usersWithAddress.reduce((acc, user) => {
    const city = user.address?.city;
    const country = user.address?.country;
    if (city && country) {
        const compositeKey = `${city}-${country}`; // 创建复合键
        if (!acc[compositeKey]) {
            acc[compositeKey] = [];
        }
        acc[compositeKey].push(user);
    }
    return acc;
}, {});

console.log(groupedByCityAndCountry);
/*
输出示例：
{
  "New York-USA": [ { ...Alice... } ],
  "London-UK": [ { ...Bob... } ],
  "Boston-USA": [ { ...Charlie... } ],
  "Paris-France": [ { ...David... } ]
}
*/

登录后复制

这种复合键的方式非常灵活，你可以根据任意多的属性来生成唯一的键，实现更细粒度的分组。

在分组过程中，如何处理键值缺失或数据类型不一致的情况？

这是个很现实的问题，数据往往不那么“干净”。如果分组的键值可能缺失（

null

登录后复制

undefined

登录后复制

）或者数据类型不一致（比如有时是数字ID，有时是字符串ID），你需要增加一些健壮性判断。

处理键值缺失：当某个数据项用于分组的键可能不存在时，如果不做处理，

accumulator[undefined]

登录后复制

或

accumulator[null]

登录后复制

可能会出现，这通常不是你想要的结果。

const products = [
    { id: 1, name: 'Laptop', category: 'Electronics' },
    { id: 2, name: 'Mouse', category: 'Electronics' },
    { id: 3, name: 'Keyboard' }, // 缺少 category
    { id: 4, name: 'Monitor', category: null }, // category 为 null
    { id: 5, name: 'Headphones', category: 'Electronics' }
];

const groupedBySafeCategory = products.reduce((acc, product) => {
    // 优先使用实际的 category，如果缺失或为 null/undefined，则使用 'Other'
    const category = product.category || 'Other'; 

    if (!acc[category]) {
        acc[category] = [];
    }
    acc[category].push(product);
    return acc;
}, {});

console.log(groupedBySafeCategory);
/*
输出示例：
{
  "Electronics": [ { ...Laptop... }, { ...Mouse... }, { ...Headphones... } ],
  "Other": [ { ...Keyboard... }, { ...Monitor... } ]
}
*/

登录后复制

这里我用了

product.category || 'Other'

登录后复制

，这是一个常见的短路求值技巧，当

product.category

登录后复制

是 falsy 值（

undefined

登录后复制

null

登录后复制

''

登录后复制

false

登录后复制

）时，它会回退到

'Other'

登录后复制

。这样，所有没有明确分类的产品都会被归到“Other”组。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

处理数据类型不一致：如果你的分组键可能出现类型不一致，比如数字

登录后复制

和字符串

"1"

登录后复制

，它们在作为对象键时会被视为不同的键。为了确保它们被归为一类，你需要进行类型转换：

const items = [
    { id: 1, type: 100 },
    { id: 2, type: '100' }, // 注意这里是字符串
    { id: 3, type: 200 }
];

const groupedByTypeConsistent = items.reduce((acc, item) => {
    // 将 type 统一转换为字符串，确保键的唯一性
    const typeKey = String(item.type); 

    if (!acc[typeKey]) {
        acc[typeKey] = [];
    }
    acc[typeKey].push(item);
    return acc;
}, {});

console.log(groupedByTypeConsistent);
/*
输出示例：
{
  "100": [ { id: 1, type: 100 }, { id: 2, type: '100' } ],
  "200": [ { id: 3, type: 200 } ]
}
*/

登录后复制

通过

String(item.type)

登录后复制

，无论是数字还是字符串，都会被统一转换为字符串作为对象的键，从而避免了因类型不同而导致的重复分组。

对于大量数据，JS分组操作的性能考量与优化策略有哪些？

在处理大量数据时，性能总是值得关注的话题。对于JavaScript中的分组操作，特别是使用

reduce

登录后复制

这种单次遍历的方式，它的时间复杂度通常是 O(n)，其中 n 是数组的长度。这意味着处理的数据量越大，所需时间就越长，但它是线性增长的，效率相对较高。

内存消耗： 分组操作会创建一个新的对象来存储分组后的数据。这个新对象的大小取决于原始数据的数量和分组的粒度。如果分组后的键非常多，或者每个组内的数据项非常多，那么这个结果对象可能会占用大量内存。在浏览器环境中，过大的内存占用可能导致页面卡顿甚至崩溃。

优化策略：

避免不必要的计算： 在
```
reduce
```
登录后复制
的回调函数内部，确保只进行必要的计算。比如，如果分组键可以提前计算好，就不要在每次迭代中重复计算。不过，通常情况下，获取一个属性值并不会造成显著的性能瓶颈。

合理选择数据结构：

普通对象 (
{}
登录后复制
)：最常用，键只能是字符串或Symbol。对于大多数情况已经足够。
Map
登录后复制
对象：如果你的分组键是非字符串类型（例如，希望用对象或数字作为键而不进行类型转换），或者你预期会有非常多的分组键，
```
Map
```
登录后复制
可能会比普通对象有轻微的性能优势，因为它在内部管理键值对的方式更优化。

// 使用 Map 进行分组，键可以是任意类型
const dataWithMixedKeys = [
    { id: 1, groupKey: { a: 1 } },
    { id: 2, groupKey: { a: 1 } }, // 注意：这里是不同的对象实例，Map 会视为不同的键
    { id: 3, groupKey: 100 },
    { id: 4, groupKey: '100' }
];

const groupedByMap = dataWithMixedKeys.reduce((map, item) => {
    const key = item.groupKey;
    if (!map.has(key)) {
        map.set(key, []);
    }
    map.get(key).push(item);
    return map;
}, new Map());

console.log(groupedByMap);
// 注意：由于 {a:1} 是两个不同的对象实例，它们会被视为两个不同的键
// Map(4) {
//   { a: 1 } => [ { id: 1, groupKey: { a: 1 } } ],
//   { a: 1 } => [ { id: 2, groupKey: { a: 1 } } ],
//   100 => [ { id: 3, groupKey: 100 } ],
//   '100' => [ { id: 4, groupKey: '100' } ]
// }

登录后复制

对于对象作为键的情况，

Map

登录后复制

会比较引用地址，所以两个内容相同的对象如果不是同一个引用，也会被视为不同的键。这需要你根据实际需求来判断是否适用。

分批处理 (Batch Processing)： 如果数据量极其庞大，导致一次性处理会阻塞主线程（在浏览器中表现为页面卡顿），可以考虑将数据分批处理。例如，使用
```
setTimeout
```
登录后复制
或
```
requestAnimationFrame
```
登录后复制
将处理任务分解成多个小块，在不同的事件循环周期中执行。但这会增加代码复杂度，通常只在极端情况下考虑。
服务器端处理： 对于百万级别甚至千万级别的数据，前端JS进行分组操作通常是不现实的，也并非其设计初衷。这种情况下，数据处理应该在服务器端完成，由数据库或后端服务提供聚合好的数据。