当前位置:首页 > 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验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…