Lodash使用示例(比较全)

最新推荐文章于 2022-06-28 16:11:30 发布
最新推荐文章于 2022-06-28 16:11:30 发布
阅读量309 收藏
点赞数
原文链接：http://www.cnblogs.com/smartsmile/p/7668431.html
版权 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lodash使用示例</title>
    <script src="~/Js/lodash.core.min.js"></script>
    <script>
        var users = [
            { 'user': 'barney', 'age': 36 },
            { 'user': 'fred', 'age': 40 },
            { 'user': 'pebbles', 'age': 18 }
        ];
        var nums = [1, 2, 3];

        /*****************************查找****************************************/
        var names = _
            .chain(users)
            .map(function (o) {
                return o.user;
            })
            .join(",")
            .value();
        console.log(names);
        // => barney,fred,pebbles

        console.log(_.find(users, function (o) { return o.age >= 40; }));
        // => object for 'fred'

        /******************************查找***************************************/
        var oldest = _
            .chain(users)
            .sortBy('age')
            .map(function (o) {
                return '最年长的是：' + o.user + ' is ' + o.age;
            })
            .last()
            .value();
        console.log(oldest);
        // => 最年长的是：fred is 40

        /*************************************************************************/
        var youngest = _
            .chain(users)
            .sortBy('age')
            .map(function (o) {
                return '最年轻的是：' + o.user + ' is ' + o.age;
            })
            .head()
            .value();
        console.log(youngest);
        // => 最年轻的是：pebbles is 18

        /*************************************************************************/
        var userObj = _.chain(users)
            .map(function (o) {
                return [o.user, o.age];
            })
            .value();
        console.log(userObj[0]);
        // => ["barney", 36]

        /*************************************************************************/
        /*
            创建一个新数组，包含原数组中所有的非假值元素。
            例如false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。
        */
        var compact = _.compact([0, 1, false, 2, '', 3]);
        console.log(compact); 
        // => [1, 2, 3]

        /*************************************************************************/
        /*  _.difference(array, [values])
            array (Array): 要检查的数组。
            [values] (...Array): 排除的值。
        */
        //var difference = _.difference([3, 2, 1], [4, 2]);
        console.log(_.difference([3, 2, 1], [4, 2]));
        // => [3, 1]

        /*************************************************************************/
        var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
        var differenceWith = _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
        console.log(differenceWith);
        // => [{ 'x': 2, 'y': 1 }]

        /*************************************************************************/
        //创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
        console.log(_.drop(nums, nums.length - 1));
        // => [3]

        /*************************************************************************/
        //创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）
        console.log(_.dropRight(nums, nums.length - 1));
        // => [1]

        /*************************************************************************/
        console.log(_.dropWhile(users, function (o) { return o.age == 36; }));
        // => objects for ['fred', 'pebbles']

        /*************************************************************************/
        //返回找到元素的 索引值（index），找不到则返回 -1。
        console.log(_.findIndex(users, function (o) { return o.user == 'fred'; }));
        // => 1

        /*************************************************************************/
        console.log(_.head([3, 2, 1]));
        console.log(_.first([3, 2, 1]));
        // => 3

        /*************************************************************************/
        //返回 值value在数组中的索引位置, 没有找到为返回-1。
        console.log(_.indexOf([1, 2, 3, 2], 2));
        // => 1

        /*************************************************************************/
        //去除数组array中的最后一个元素
        console.log(_.initial([1, 2, 3]));
        // => [1, 2]

        /*************************************************************************/
        //返回一个包含所有传入数组交集元素的新数组
        console.log(_.intersection([2, 1], [4, 2], [1, 2]));
        // => [2]

        /*************************************************************************/
        var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
        var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
        console.log(_.intersectionWith(objects, others, _.isEqual));
        // => [{ 'x': 1, 'y': 2 }]

        console.log(_.join(['a', 'b', 'c'], ','));
        // => a,b,c

        //返回array中的最后一个元素
        console.log(_.last([1, 2, 3]));
        // => 3

        //获取array数组的第n个元素 索引从0开始，如果n为负数，则返回从数组结尾开始的第n个元素
        console.log(_.nth([1, 2, 3], 1));
        // => 2
        console.log(_.nth([1, 2, 3, 4], -1));
        // => 4

        /*************************************************************************/
        //移除数组array中所有和给定值相等的元素
        console.log(_.pull([1, 2, 3, 1, 2, 3], 2, 3));
        // => [1, 1]
        console.log(_.pullAll([1, 2, 3, 1, 2, 3], [2, 3]));
        // => [1, 1]

        //这个方法类似于_.pullAll 
        //区别是这个方法接受一个 iteratee（迭代函数），通过产生的值进行了比较。
        console.log(_.pullAllBy(
            [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }],
            [{ 'x': 1 }, { 'x': 3 }],
            'x'));
        // => [{ 'x': 2 }]

        console.log(_.pullAllWith(
            [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }],
            [{ 'x': 3, 'y': 4 }],
            _.isEqual));
        // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]

        /*************************************************************************/
        //返回被移除元素组成的新数组。
        var array = [5, 10, 15, 20];
        var evens = _.pullAt(array, 1, 3);
        console.log(array);
        // => [5, 15]
        console.log(evens);
        // => [10, 20]

        /*************************************************************************/
        //返回被移除元素组成的新数组。
        var array = [1, 2, 3, 4];
        var evens = _.remove(array, function (n) {
            return n % 2 == 0;
        });
        console.log(array);
        // => [1, 3]
        console.log(evens);
        // => [2, 4]

        console.log(_.reverse([1, 2, 3]));
        // => [3, 2, 1]

        //_.slice(array, [start=0], [end=array.length])
        //裁剪数组array，从 start 位置开始到end结束，但不包括 end 本身的位置
        console.log(_.slice([1, 2, 3], 1));
        // => [2, 3]

        //返回一个新的不重复的数组
        console.log(_.uniq([1, 1, 2, 1, 1, 2, 3]));
        // => [1, 2, 3]
        var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
        console.log(_.uniqWith(objects, _.isEqual));
        // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

        /*************************************************************************/
        var arr = [
            { name: 'aa', age: 22 },
            { name: 'bb', age: 18 },
            { name: 'cc', age: 40 }
        ];
        console.log(_.sortBy(arr, function (o) { return o.age; }));
        console.log(_.sortBy(arr, ['age']));  //可多字段排序['name','age']

        console.log(_.groupBy([6.1, 4.2, 6.6], Math.floor));
        // => { '4': [4.2], '6': [6.1, 6.3] }

        /*****************************循环***************************************/
        _([1, 2]).forEach(function (value) {
            console.log(value);
        });
        // => Logs '1' then '2'

        _.forEach({ 'a': 1, 'b': 2 }, function (value, key) {
            console.log(key + " " + value);
        });
        // => Logs 'a 1' then 'b 2' 


        /*****************************查找***************************************/
        var collection1 = [
            { name: 'aa', age: 20, gender: 'm' },
            { name: 'bb', age: 21, gender: 'f' },
            { name: 'cc', age: 22, gender: 'm' }
        ];

        /*****************************包含***************************************/
        console.log(_.includes({ 'user': 'fred', 'age': 40 }, 'fred'));
        // => true

        /*****************************包含***************************************/
        function square(n) {
            return n * n;
        }
        console.log(_.map([4, 8], square));
        // => [16, 64]

        /*****************************排序***************************************/
        var users = [
            { 'user': 'fred', 'age': 48 },
            { 'user': 'barney', 'age': 34 },
            { 'user': 'fred', 'age': 40 },
            { 'user': 'barney', 'age': 36 }
        ];
        // 以 `user` 升序排序 再  `age` 以降序排序。
        console.log(_.orderBy(users, ['user', 'age'], ['asc', 'desc']));
        // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

        /*****************************长度***************************************/
        console.log(_.size([1, 2, 3]));
        // => 3
        console.log(_.size('pebbles'));
        // => 7
        console.log(_.size('歌曲abc'));
        // => 5

        //now 获得 Unix 纪元 (1 January 1970 00:00:00 UTC) 直到现在的毫秒数。
        //var temp = _.defer(function (stamp) {
        //    console.log(_.now() - stamp);
        //}, _.now());
        //console.log(_.now() + "______" + temp);

        /*****************************强制转换数组************************************/
        //如果不是数组, 那么强制转为数组。
        console.log(_.castArray(1));
        // => [1]

        console.log(_.castArray({ 'a': 1 }));
        // => [{ 'a': 1 }]

        console.log(_.castArray('abc'));
        // => ['abc']

        /*****************************拷贝************************************/
        //_.clone(value) 创建一个 value 的浅拷贝
        var objects = [{ 'a': 1 }, { 'b': 2 }];
        var shallow = _.clone(objects);
        console.log(shallow[0] === objects[0]);
        // => true

        /*****************************等于************************************/
        var object = { 'a': 1 };
        var other = { 'a': 1 };
        console.log(_.eq(object, object));  // => true
        console.log(_.eq(object, other));  // => false
        console.log(_.eq(1, 1));  // => false

        console.log("--------------------------------------------------------"); 
        /*****************************大于************************************/
        console.log(_.gt(3, 1));  // => true
        /*****************************大于等于********************************/
        console.log(_.gte(3, 3));  // => true
        /*****************************小于************************************/
        console.log(_.lt(1, 3)); // => true
        /*****************************小于等于********************************/
        console.log(_.lte(3, 3));  // => true

        //是否数组
        console.log(_.isArray([1, 2, 3]));   // => true
        console.log(_.isArray('abc'));   // => false
        //是否boolean型
        console.log(_.isBoolean(false));  // => true

        console.log("--------------------------------------------------------");
        //是否日期类型
        console.log(_.isDate('02 31 2017')); // => false
        console.log(_.isDate(new Date)); // => true
        //是否整数
        console.log(_.isInteger(3)); // => true
        console.log(_.isInteger(3.1)); // => false
        console.log(_.isInteger('3')); // => false
        //是否字符串
        console.log(_.isString('abc')); // => true
        console.log(_.isString(1)); // => false
        /*****************************转换成数组********************************/
        console.log(_.toArray('abc'));
        // => ['a', 'b', 'c']

        //向上取精度 _.ceil(number, [precision=0])
        console.log(_.ceil(6.014, 2));
        // => 6.02

        //向下取精度 _.floor(number, [precision=0])
        console.log(_.floor(6.014, 2));
        // => 6.01

        //四舍五入取精度
        console.log(_.round(4.006, 2));
        // => 4.01

        //返回最大数
        console.log(_.max([4, 2, 8, 6])); // => 8
        console.log(_.maxBy(users, function (o) { return o.age })); // => {user: "fred", age: 48}

        //返回平均值
        console.log(_.mean([4, 2, 8, 6])); // => 5
        console.log(_.meanBy(users, function (o) { return o.age })); // => 39.5

        //返回最小数
        console.log(_.min([4, 2, 8, 6])); // => 2
        console.log(_.minBy(users, function (o) { return o.age })); // => {user: "barney", age: 34}

        //求和
        console.log(_.sum([4, 2, 8, 6])); // => 20
        console.log(_.sumBy(users, function (o) { return o.age })); // => 158

        //检查字符串string是否以给定的target字符串开始
        console.log(_.startsWith('abc', 'a')); // => true
        //检查字符串string是否以给定的target字符串结尾
        console.log(_.endsWith('abc', 'c'));  // => true

        /*****************************Pad填充********************************/
        console.log(_.pad('abc', 8, '#')); // => ##abc###
        console.log(_.padEnd('abc', 8, '#')); // => abc#####
        console.log(_.padStart('abc', 8, '#')); // => #####abc

        console.log(_.repeat('abc', 2)); // => 'abcabc'
        console.log(_.repeat('abc', 0)); // => ''

        console.log(_.replace('Hi Fred Fred', 'Fred', 'Barney')); // => 'Hi Barney Fred'

        console.log(_.trim('##abc###', '#')); // => abc
        console.log(_.trimStart('##abc###', '#')); // => abc###
        console.log(_.trimEnd('##abc###', '#')); // => #abc

        console.log(_.truncate('hi-diddly-ho there, neighborino', { 'length': 5 })); // => hi...
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/smartsmile/p/7668431.html

diehe5608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
lodash 3.10.1 单页html文档
11-09
lodash 3.10.1版本的单页html文档。 通过马克飞象导出，所以效果和官网的有所区别
1. 创建一个vue实例
洪布斯的博客
12-26 542
vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
lodash如何引入html,Lodash 快速入门指南 - 文章教程
weixin_31749299的博客
06-16 1358
Lodash是一个著名的 JavaScript 原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率，提高 JS 原生方法性能的 JS 库。简单的说就是，很多方法 Lodash 已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash 使用了一个简单的 _ 符号，就像 jQuery 的 $ 一样，十分简洁。类似的还有 Underscore.js 和 Laz...
lodash如何引入html,javascript – 如何导入单个Lodash功能？
weixin_35853464的博客
06-16 834
使用webpack,我正在尝试导入isEqual,因为lodash似乎正在导入所有内容.我尝试过以下操作但没有成功：import { isEqual } from 'lodash'import isEqual from 'lodash/lang'import isEqual from 'lodash/lang/isEqual'import { isEqual } from 'lodash/lang...
lodash如何引入html,JS模板工具lodash.template的简单用法
weixin_34638141的博客
06-16 563
lodash是从underscore分支的一个项目，之前我写了一篇JS模板工具underscore.template的简单用法，lodash跟underscore很相似，这也简单介绍一下lodash的template方法。先把underscore的文章中用过的代码贴过来，把underscore的js文件换成lodash的js，其他一字不改，然后我们试试： - - _.each(datas, fu...
graphql-lodash：with使用lodash语法对GraphQL查询进行数据处理
01-30
GraphQL Lodash给你的权力lodash就在您的GraphQL查询中使用@_指令。 注意：这是一个实验项目，旨在探索查询和转换并置的概念。 我们鼓励您在我们的尝试它或查看详细的。查询示例以下是一些可以针对StartWars API...
lodash-id：使用lodash或lowdb可以轻松操纵基于id的资源
02-05
lodash-id lodash-id可以使用或轻松操纵基于id的资源getById insert upsert updateById updateWhere replaceById removeById removeWhere createId安装# with lodashnpm install lodash lodash-id --save# with ...
JavaScript工具库之Lodash详解
10-16
主要介绍了JavaScript工具库之Lodash详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
ES6小技巧之代替lodash
10-16
主要给大家介绍了关于ES6小技巧之代替lodash的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue最简单的前后端交互示例详解
12-09
一、学习 vue 面临的问题 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于...
Lodash 中文文档 _ Lodash 中文网.html
04-08
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。 查看各个构件版本的区别并选择一个适合你的版本。
防抖和节流应用以及lodash.js文件引入
weixin_48723546的博客
06-28 1045
防抖和节流应用以及lodash.js文件引入
javascript数据绑定在页面上显示lodash
大灰狼的小绵羊哥哥的博客
08-04 807
Document   来自于username=  时间是 var strHtml=""; var data={ username:111, dataItem:[ { massage:'123', arriveTime:'2014-11-08' }, { massage:'abc', arriveTim
lodash学习笔记—— 数组对象比较函数
qq_38519358的博客
11-27 4777
_.difference(array, [values]) difference方法可以将两个数组进行递归比较，生成一个新的不同数据得数组： 安装： npm install --save lodash eg: const array1 = [ { id: 1, plantCode: 'ShP', workshopCode: null, ...
lodash入门
weixin_33862041的博客
10-18 456
简介 Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 类似的还有Underscore.js和Lazy.js 支持 ch...
input val值比较； 数字与字符串大小比较 ；typeof/instanceof的用法
qq_25131799的博客
05-17 1552
&lt;div style="width: 1000px;margin: 0px auto;"&gt; &lt;input id="input1" type="text" /&gt; &lt;input id="input2" type="number" /&gt; &lt;div class="btn btn-info btn-sm&
Javascript lodash 部分引入
Leon的专栏
04-07 1752
部分引入lodash所使用的函数，减少内存使用。 var_={ omit:require('lodash/omit'), zipObject:require('lodash/zipObject'), map:require('lodash/map'), get:require('lodash/get'), values:re...
Webpack按需打包Lodash的几种方式
热门推荐
sxjing11的博客
06-07 1万+
在数据操作时，Lodash 就是我的弹药库，不管遇到多复杂的数据结构都能用一些函数轻松拆解。 ES6 中也新增了诸多新的对象函数，一些简单的项目中 ES6 就足够使用了，但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库，即使是压缩后，现最新版本也有 71k的体积。不能为了吃一口饭而买下一个饭店啊。 针对这个问题，其实已经有很多可选方案了。 函数模块
lodash所有方法示例
最新发布
05-19
下面是一些常用的Lodash方法及其示例： 1. _.chunk(array, [size]): 把一个数组拆分成多个数组，每个数组包含指定数量的元素。 ``` _.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']] _.chunk(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值