当前位置：首页 > JavaScript

js实现分类

2026-03-14 05:42:32JavaScript

实现分类的基本方法

使用JavaScript实现分类功能通常涉及数据分组、条件判断或利用算法模型。以下是几种常见场景的实现方式：

基于条件判断的分类

通过遍历数据并根据条件将元素分配到不同数组：

const items = [
  { name: 'Apple', type: 'fruit' },
  { name: 'Carrot', type: 'vegetable' },
  { name: 'Banana', type: 'fruit' }
];

const classified = {};
items.forEach(item => {
  if (!classified[item.type]) {
    classified[item.type] = [];
  }
  classified[item.type].push(item);
});
console.log(classified);

使用Array.reduce()方法

更函数式的实现方式：

js实现分类

const result = items.reduce((acc, item) => {
  (acc[item.type] = acc[item.type] || []).push(item);
  return acc;
}, {});

动态分类键处理

当分类键可能变化时：

function classifyBy(arr, key) {
  return arr.reduce((acc, obj) => {
    const groupKey = obj[key];
    (acc[groupKey] = acc[groupKey] || []).push(obj);
    return acc;
  }, {});
}
const grouped = classifyBy(items, 'type');

多级分类嵌套

处理多层分类需求：

js实现分类

const multiLevelData = [
  { category: 'food', subcat: 'fruit', item: 'apple' },
  { category: 'food', subcat: 'vegetable', item: 'carrot' }
];

const nestedClassified = multiLevelData.reduce((acc, curr) => {
  if (!acc[curr.category]) acc[curr.category] = {};
  if (!acc[curr.category][curr.subcat]) acc[curr.category][curr.subcat] = [];
  acc[curr.category][curr.subcat].push(curr.item);
  return acc;
}, {});

机器学习分类（TensorFlow.js）

对于复杂分类任务可引入机器学习：

import * as tf from '@tensorflow/tfjs';

// 创建简单分类模型
const model = tf.sequential();
model.add(tf.layers.dense({ units: 10, activation: 'relu', inputShape: [4] }));
model.add(tf.layers.dense({ units: 3, activation: 'softmax' }));
model.compile({ optimizer: 'adam', loss: 'categoricalCrossentropy' });

// 训练数据格式示例
const trainData = tf.tensor2d([
  [5.1, 3.5, 1.4, 0.2],
  [7.0, 3.2, 4.7, 1.4]
]);
const labels = tf.tensor2d([
  [1, 0, 0],  // Setosa
  [0, 1, 0]   // Versicolor
]);

分类性能优化技巧

大数据量时考虑性能优化：

// 使用Map替代普通对象
const mapClassification = new Map();
items.forEach(item => {
  if (!mapClassification.has(item.type)) {
    mapClassification.set(item.type, []);
  }
  mapClassification.get(item.type).push(item);
});

// 转换为普通对象输出
console.log(Object.fromEntries(mapClassification));

前端组件中的分类应用

在React中实现动态分类渲染：

function ItemList({ items }) {
  const classified = classifyBy(items, 'type');

  return (
    <div>
      {Object.entries(classified).map(([type, items]) => (
        <div key={type}>
          <h3>{type}</h3>
          <ul>
            {items.map(item => <li key={item.name}>{item.name}</li>)}
          </ul>
        </div>
      ))}
    </div>
  );
}

标签: js