React项目中提取数组对象Category列唯一值并控制台打印的方法

API 探路者

2026-8-21

获取数组对象中Category的唯一值（React项目）

你是JavaScript新手，在React项目中处理数组对象数据时，需要从给定的data数组里提取Category列的所有唯一值（Red、Green）并通过console.log输出，目前只能打印整个数组对象，不知道如何选取目标列和实现去重。

解决方案1：使用`map` + `Set`（推荐，简洁高效）

直接在App.js中添加处理逻辑：

import data from './data';

function App() {
  // 提取所有Category值
  const allCategories = data.map(item => item.Category);
  // 利用Set自动去重，再转成数组
  const uniqueCategories = [...new Set(allCategories)];
  
  // 打印结果
  console.log('唯一的Category值：', uniqueCategories);

  return (
    <div className="App">
      <LineChart />
    </div> 
  );
}

export default App;

代码说明：

data.map(item => item.Category)：遍历数组，把每个对象的Category属性提取出来，得到包含重复值的数组：["Red", "Red", "Green", "Green"]
new Set(allCategories)：ES6的Set集合会自动过滤重复元素，得到Set {"Red", "Green"}
[...new Set(allCategories)]：用扩展运算符...把Set转换为普通数组，最终得到["Red", "Green"]

解决方案2：使用`reduce`（手动去重，适合理解数组方法）

如果想手动实现去重逻辑，可以用reduce：

import data from './data';

function App() {
  const uniqueCategories = data.reduce((acc, item) => {
    // 检查累加器中是否已存在当前Category，不存在则添加
    if (!acc.includes(item.Category)) {
      acc.push(item.Category);
    }
    return acc;
  }, []); // 初始值为空数组

  console.log('唯一的Category值：', uniqueCategories);

  return (
    <div className="App">
      <LineChart />
    </div> 
  );
}

export default App;