react使用Lodash 库实现根据数组内对象的某属性排序

～蓝桉2024-08-10 17:13

一、描述

根据数组内的对象的某个属性进行排序操作是很常见的方法，但是如果自己写一个方法，有可能出现错误的情况，且耗费时间，这里介绍一个第三方的工具"Lodash "库，用这个来实现根据数组内对象的某属性排序特别方法。

二、lodash

Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com)

Lodash是一个现代 JavaScript 工具库，提供了许多常用的函数和实用工具，旨在简化编程过程中的常见任务。Lodash 的核心主要集中在数组、对象和函数的处理上，帮助开发者更高效地进行数据操作和变换。

二、使用

首先先使用npm下载到自己的项目中

然后导入：

javascript 复制代码

// 调用第三方库，里面包含很多封装好的逻辑处理方法
import _ from 'lodash'

我们使用他里面的orderBy方法就可以实现我们这个功能。

三、代码和效果

javascript 复制代码

import { useState } from "react";
// 调用第三方库，里面包含很多封装好的逻辑处理方法
import _ from 'lodash'

const App = () => {
  const list = [
    {
      id: '1',
      value: 12
    },
    {
      id: '2',
      value: 1
    },
    {
      id: '3',
      value: 35
    },
    {
      id: '4',
      value: 20
    },
  ];
  // 将初始列表传递给 useState
  const [personList, setPersonList] = useState(list);
  // 降序排序
  const down = () => {
    setPersonList(_.orderBy(personList,'value','desc')) // 从大到小排序
  }
  // 升序排序
  const up = () => {
    setPersonList(_.orderBy(personList,'value','asc')) // 从小到大排序
  }

  return (
    <>
      <div className="btns">
        <button onClick={up}>从小到大排序</button>
        <button onClick={down}>从大到小排序</button>
      </div>
      <div>
        {personList.map(item => (
          <div key={item.id}>值是：{item.value}</div>
        ))}
      </div>
    </>
  );
};

export default App;

我这里举例了一个较为简单的例子，供参考使用。

我们这里根据personList里面的每一项里面的value进行排序操作：

效果就是：当点击从小到大排序按钮之后：

当点击从大到小排序按钮之后：

还是挺好用的。