• Lodash的部分用法

    因为项目中有在使用Lodash的用法，发现蛮好用的，于是乎上官方文档学习了一下相关方法，话不读说，先附上官网地址：

    https://www.lodashjs.com/

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

    介绍几个我在项目中使用的方法:

    (1)_.cloneDeep(value)

    这个方法类似_.clone，除了它会递归拷贝 value。其实也叫深拷贝。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         let objects = {
    15.             name: '黎明',
    16.             score: ['20', '30', '40'],
    17.             hobby: {
    18.                 sing: '今夜你会不会来',
    19.                 index: 1
    20.             }
    21.         }
    22.  
    23.         let deep = _.cloneDeep(objects); //_.cloneDeep其实是一个深拷贝的方法
    24.         objects.score.push('50')//验证一下深拷贝有没有拷贝下来数据
    25.         console.log(deep);
    26.     </script>
    27. </body>
    28.  
    29. </html>

    看一下运行结果：

    可以看到已经完成了对数据的深拷贝了。 

    （2） _.uniqBy（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.        //返回新的去重后的数组
    15.        console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor));//向下取值 2.1 1.2 
    16.  
    17.        console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));//{ 'x': 1 }, { 'x': 2 }
    18.     </script>
    19. </body>
    20.  
    21. </html>

    看一下运行结果：

    （3） _.find（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.find()包含三个参数：
    15.         // 1.一个用来迭代的集合，这里指的是users数组
    16.         // 2.每次迭代调用的函数 ，这里指的是function(d){}这个函数
    17.         // 3.开始搜索的索引位置 ，这里指的是满足d.age < 40 这个条件的第一项值
    18.       let users = [
    19.   { 'user': 'barney',  'age': 36, 'active': true },
    20.   { 'user': 'fred',    'age': 40, 'active': false },
    21.   { 'user': 'pebbles', 'age': 1,  'active': true }
    22. ];
    23.  
    24. let res=_.find(users, function(d) { return d.age < 40; });//来寻找第一个满足条件的元素,其实就是数组的find方法
    25. console.log(res);//输出数组的第一项值，因为第一项满足条件了
    26.     </script>
    27. </body>
    28.  
    29. </html>

    看一下运行结果：

    （4） _.groupBy（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.groupBy()包含两个个参数：
    15.         // 1.一个用来迭代的集合，这里指的是数组[6.1, 4.2, 6.3]
    16.         // 2.这个迭代函数用来转换key ，这里指的是 4 和6 这两个key值
    17.        let res= _.groupBy([6.1, 4.2, 6.3], Math.floor);//向下取值
    18.        console.log(res);// => { '4': [4.2], '6': [6.1, 6.3] }
    19.  
    20.     </script>
    21. </body>
    22.  
    23. </html>

    看一下运行结果：

    再举一个例子：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.groupBy()包含两个个参数：
    15.         // 1.一个用来迭代的集合，这里指的是数组['one', 'two', 'three']，实际项目中这里其实是接口返回的数据（数组结构形式）
    16.         // 2.这个迭代函数用来转换key ，这里指的是 3 和5 这两个key值，因为要输出数组的每一项数据
    17.        let res=  _.groupBy(['one', 'two', 'three'], 'length');
    18.        console.log(res);
    19.  
    20.     </script>
    21. </body>
    22.  
    23. </html>

     看一下运行结果：

    （5） _.map（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.map()包含两个参数：（其实就是数组的map方法）
    15.         // 1.一个用来迭代的集合，这里指的是数组[4, 8]，实际项目中这里其实是接口返回的数据（数组结构形式）
    16.         // 2.每次迭代调用的函数 ，这里指的是fn这个函数
    17.  
    18.         //返回新的映射后数组,数组的长度并不会改变
    19.         function fn(n) {
    20.             return n * n;
    21.         }
    22.  
    23.        let res= _.map([4, 8], fn);
    24.        console.log(res); // [16, 64]
    25.        
    26.     </script>
    27. </body>
    28.  
    29. </html>

     看一下运行结果：

     再举一个例子：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.map()包含两个参数：（其实就是数组的map方法）
    15.         // 1.一个用来迭代的集合，这里指的是数组users ，实际项目中这里其实是接口返回的数据（数组结构形式）
    16.         // 2.每次迭代调用的函数 ，这里指的是要遍历users数组的每一项值
    17.  
    18.         //返回新的映射后数组,数组的长度并不会改变
    19.       
    20.  
    21.         let users = [{
    22.                 'user': 'barney'
    23.             },
    24.             {
    25.                 'user': 'fred'
    26.             }
    27.         ];
    28.  
    29.         // The `_.property` iteratee shorthand.
    30.         let res = _.map(users, 'user');
    31.         console.log(res);  // => ['barney', 'fred'] 返回的是遍历的每一项值
    32.       
    33.     </script>
    34. </body>
    35.  
    36. </html>

    看一下运行结果：

    （6） _.sumBy（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.sumBy包含两个参数：
    15.         // 1.要迭代的数组，这里指的是数组objects，实际项目中这里其实是接口返回的数据（数组结构形式）
    16.         // 2.调用每个元素的迭代函数 ，这里指的是function这个函数
    17.  
    18.         //返回总和
    19.         let objects = [{
    20.             'n': 4
    21.         }, {
    22.             'n': 2
    23.         }, {
    24.             'n': 8
    25.         }, {
    26.             'n': 6
    27.         }];
    28.  
    29.         //下面这两种写法是等价的
    30.         let res1 = _.sumBy(objects, function (o) {
    31.             return o.n;//一个是返回每一项的值相加
    32.         });
    33.         console.log(res1); // => 20
    34.  
    35.         let res2 = _.sumBy(objects, 'n');//一个是把每一项的值直接传入
    36.         console.log(res2); // => 20
    37.     </script>
    38. </body>
    39.  
    40. </html>

    看一下运行结果：

    （7） _.ceil（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         //_.ceil包含两个参数：其实就是Math.ceil()方法
    15.         // 1.要向上舍入的值，这里指的是4.006 6.004  6040
    16.         // 2.向上舍入的的精度 ，这里指的是 2 和-2
    17.  
    18.         //返回总和
    19.         let res1 = _.ceil(4.006);
    20.         console.log(res1);     // => 5
    21.    
    22.         let res2 = _.ceil(6.004, 2); //保留2位小数
    23.         console.log(res2);    // => 6.01
    24.     
    25.         let res3 = _.ceil(6040, -2);
    26.         console.log(res3);// => 6100
    27.         
    28.         
    29.     </script>
    30. </body>
    31.  
    32. </html>

    看一下运行结果：

    （8） _.filter（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         //_.filter包含两个参数：其实就是数组的filter方法
    15.         // 1.一个用来迭代的集合，这里指的是数组users
    16.         // 2.每次迭代调用的函数 ，这里指的是 function
    17.  
    18.         //返回一个新的过滤后的数组
    19.         let users = [{
    20.                 'user': 'barney',
    21.                 'age': 36,
    22.                 'active': true
    23.             },
    24.             {
    25.                 'user': 'fred',
    26.                 'age': 40,
    27.                 'active': false
    28.             }
    29.         ];
    30.  
    31.         let res = _.filter(users, function (o) {
    32.             return !o.active;
    33.         }); //要过滤出取反的一项
    34.         console.log(res); // => objects for ['fred']
    35.     </script>
    36. </body>
    37.  
    38. </html>

    看一下运行结果：

    （9） _.remove（）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // _.remove包含两个参数：
    15.         // 1.要修改的数组，这里指的是数组array
    16.         // 2.每次迭代调用的函数 ，这里指的是 function
    17.  
    18.         //返回移除元素组成的新数组
    19.         var array = [1, 2, 3, 4];
    20.         var evens = _.remove(array, function (n) {
    21.             return n % 2 == 0; //取余，其实是要输出偶数
    22.         });
    23.  
    24.         console.log(array);// => [1, 3]
    25.         
    26.         console.log(evens);// => [2, 4]
    27.     </script>
    28. </body>
    29.  
    30. </html>

     看一下运行结果：

    就说这么多吧，详细的还是多看看官方文档，我这里只是大概介绍一下，不难的这个。 

  • 相关阅读:
    canvas绘制基本图形——矩形
    【cmake】cmake应用：安装和打包
    剑指 Offer 10- II. 青蛙跳台阶问题【力扣】
    国庆假期买哪款耳机好？国庆假期必备蓝牙耳机推荐
    界面控件Telerik UI for WPF - 如何使用RadSpreadsheet记录或评论
    非线性链表之树结构和堆的代码实现
    【首因效应】第一印象
    Gartner 2022年顶级战略技术趋势报告
    AJAX学习笔记7 AJAX实现省市联动
    android 12.0app应用卸载黑名单
  • 原文地址：https://blog.csdn.net/huihui_999/article/details/127778679