当前位置:首页 > JavaScript

js实现分类

2026-04-05 23:44:27JavaScript

使用数组的 filter 方法分类

通过 filter 方法可以根据条件筛选数组元素,将符合条件和不符条件的元素分别归类。
示例代码:

const items = [1, 2, 3, 4, 5];
const even = items.filter(item => item % 2 === 0); // 分类为偶数
const odd = items.filter(item => item % 2 !== 0); // 分类为奇数
console.log(even); // [2, 4]
console.log(odd); // [1, 3, 5]

使用 reduce 方法实现多分类

reduce 方法适合将数组元素按多个类别分组,结果通常以对象形式存储。
示例代码:

const data = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];
const categories = data.reduce((acc, item) => {
  if (!acc[item.type]) acc[item.type] = [];
  acc[item.type].push(item.name);
  return acc;
}, {});
console.log(categories); // { fruit: ['apple', 'banana'], vegetable: ['carrot'] }

基于 Map 的动态分类

Map 结构适合需要动态键名或复杂键值的分类场景。
示例代码:

const users = [
  { id: 1, role: 'admin' },
  { id: 2, role: 'user' },
  { id: 3, role: 'admin' }
];
const roleMap = new Map();
users.forEach(user => {
  if (!roleMap.has(user.role)) roleMap.set(user.role, []);
  roleMap.get(user.role).push(user.id);
});
console.log(Array.from(roleMap)); // [['admin', [1, 3]], ['user', [2]]]

使用 Set 去重后分类

若需先去除重复项再分类,可结合 Set 和数组方法。
示例代码:

const numbers = [1, 2, 2, 3, 4, 4];
const unique = [...new Set(numbers)];
const smallNumbers = unique.filter(n => n < 3);
const largeNumbers = unique.filter(n => n >= 3);
console.log(smallNumbers); // [1, 2]
console.log(largeNumbers); // [3, 4]

按条件分组的通用函数

封装一个可复用的分类函数,支持自定义条件逻辑。
示例代码:

js实现分类

function classify(array, classifierFn) {
  return array.reduce((result, item) => {
    const key = classifierFn(item);
    (result[key] || (result[key] = [])).push(item);
    return result;
  }, {});
}

const numbers = [1, 2, 3, 4, 5];
const result = classify(numbers, n => n % 2 === 0 ? 'even' : 'odd');
console.log(result); // { odd: [1, 3, 5], even: [2, 4] }

标签: js
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…

js实现文件夹

js实现文件夹

使用JavaScript创建文件夹 在浏览器端的JavaScript中无法直接操作文件系统创建文件夹,这是出于安全考虑。但在Node.js环境中可以通过文件系统模块(fs)实现。 Node.js中使…

js验证码实现

js验证码实现

验证码的基本原理 验证码(CAPTCHA)用于区分人类用户和自动化程序。常见类型包括图形验证码、滑动验证码、短信验证码等。JavaScript 可用于前端验证码的生成和验证逻辑。 图形验证码实现 使…