【React】Lodash

1.为什么选择 Lodash ?

【中文文档】

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

  1. 遍历 array、object 和 string
  2. 对值进行操作和检测
  3. 创建符合功能的函数

2.安装

浏览器环境:

javascript 复制代码
<script src="lodash.js"></script>

通过 npm:

javascript 复制代码
$ npm i --save lodash

3.使用

*.orderBy(collection, iteratees=\[*.identity], orders)

此方法类似于_.sortBy,除了它允许指定 iteratee(迭代函数)结果如何排序。

如果没指定 orders(排序),所有值以升序排序。 否则,指定为"desc" 降序,或者指定为 "asc" 升序,排序对应值。

参数

collection (Array|Object): 用来迭代的集合。

iteratees=\[_.identity] (Array\[\]|Function\[\]|Object\[\]|string\[\]): 排序的迭代函数。

orders (string\[\]): iteratees迭代函数的排序顺序。

返回

(Array): 排序排序后的新数组。

例子
javascript 复制代码
var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// 以 `user` 升序排序 再  `age` 以降序排序。
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
使用
javascript 复制代码
// 1. 先import
// _是使用各种方法的前缀
import _ from 'lodash'
//const [contentList,setContent] = useState(defaultList)
// 刚开始的时候,想要 排序 操作
const [contentList,setContent] = useState(_.orderBy(defaultList,'like','desc'))
    //tab切換
const [type,setType] = useState('hot')
   const changTab = (t)=>{
      setType(t)
      if(t === 'hot'){
        setContent(_.orderBy(contentList,'like','desc'))
      }else{
        setContent(_.orderBy(contentList,'ctime','desc'))
      }
    }
相关推荐
星辰徐哥2 分钟前
工具推荐:HTML5+AI开发必备的前端调试工具
前端·人工智能·html5
Full Stack Developme3 分钟前
Linux Shell 教程概览
linux·前端·chrome
Maimai108083 分钟前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·javascript·react.js·前端框架·web3·状态模式
星辰徐哥3 分钟前
技能提升:自然语言处理在HTML5前端的应用
前端·自然语言处理·html5
the_answer4 分钟前
React Server Components 深度剖析:前端架构的范式革命
前端
徐小夕5 分钟前
我们放弃了单Agent方案:HiCAD 3.0 用 Harness 做多Agent编排,把3D建模的准确率提升了30%
前端·算法·github
胡萝卜术6 分钟前
从零搞懂 AJAX:手把手带你从 XMLHttpRequest 到 fetch,彻底理解前后端数据交互
前端·后端·面试
星河耀银海6 分钟前
接口调用:HTML5前端调用AI接口的基础语法与示例
前端·人工智能·html5
HarvestHarvest9 分钟前
【Copy Web独立开发者实战:我是如何用 AI 实现网页 UI 1:1 完美复刻的?】
前端·人工智能·ui
RuoyiOffice9 分钟前
从 0 到 1 搭建 RuoyiOffice:30 分钟跑通后端+前端+移动端
前端·spring boot·uni-app·开源·oa·ruoyioffice·hrm