【React】Lodash

1.为什么选择 Lodash ?

【中文文档】
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

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

2.安装

浏览器环境:

<script src="lodash.js"></script>

通过 npm:

$ 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): 排序排序后的新数组。

例子
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]]

使用
// 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'))
      }
    }

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-08 14:08:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-08 14:08:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-08 14:08:03       82 阅读
  4. Python语言-面向对象

    2024-06-08 14:08:03       91 阅读

热门阅读

  1. 【C#】C#读写Excel文件

    2024-06-08 14:08:03       31 阅读
  2. mysql centos xtrabackup

    2024-06-08 14:08:03       32 阅读
  3. UG数控编程入门:从基础到精通的全方位指南

    2024-06-08 14:08:03       33 阅读
  4. 用FFMPEG对YUV序列进行编辑的笔记

    2024-06-08 14:08:03       28 阅读
  5. 【RabbitMQ】exchange\channel\queue的联系

    2024-06-08 14:08:03       31 阅读
  6. 骑砍2霸主MOD开发(14)-进击的巨人

    2024-06-08 14:08:03       35 阅读
  7. 详解MySQL的MVCC机制

    2024-06-08 14:08:03       35 阅读
  8. 正则限制字符串的长度必须是n的倍数

    2024-06-08 14:08:03       30 阅读
  9. 解释Hibernate框架的作用和与JDBC的区别

    2024-06-08 14:08:03       31 阅读
  10. CSS-布局-flex

    2024-06-08 14:08:03       28 阅读
  11. npm发布自己的插件包

    2024-06-08 14:08:03       30 阅读
  12. c语言如何改变文件读取位置

    2024-06-08 14:08:03       30 阅读