【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')) } } ```

相关推荐
NiceCloud喜云17 分钟前
IntelliJ IDEA 保姆级安装 + ClaudeAPI 配置教程
java·开发语言·前端·ide·chrome·docker·intellij-idea
zenRRan41 分钟前
Karpathy公开附议:AI Agent 的输出格式,正在从 Markdown 走向 HTML
前端·html
燐妤1 小时前
前端HTML编程5:JavaScript完全指南
前端·javascript·html
3D探路人1 小时前
模灵 大模型聚合API 转发流程技术实现
java·大数据·开发语言·前端·人工智能·计算机视觉
烛阴1 小时前
Unity资源加载进化论:从AssetBundle到Addressables,一文带你吃透手游资源管理
前端·c#·unity3d
TO_WebNow1 小时前
使用thinkPHP8.x 访问接口提示跨域
前端·php
掘金一周1 小时前
回家的时候用车,不回家感觉又没啥用,这车还要不要买 | 沸点周刊 5.14
前端
梦想的颜色2 小时前
前端UI宝藏SKILL——UI/UX Pro Max
前端·ui·ux
無名路人2 小时前
uniApp 小程序 vue3 app.vue静默登录其他页面等待登录完成方式二
前端·微信小程序·ai编程
CoCo的编程之路2 小时前
2026 前端效能飞跃:深度解析智能助手的页面构建最大化方案
前端·人工智能·ai编程·智能编程助手·文心快码baiducomate