您现在的位置是:首页 > 正文

lodash入门

2024-01-30 23:47:50阅读 0

简介

Lodash是一个著名的javascript原生库,不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是,很多方法lodash已经帮你写好了,直接调用就行,不用自己费尽心思去写了,而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁。 类似的还有Underscore.js和Lazy.js

支持

chrome 43往上
Firefox 38往上
IE 6-11
MS Edge
Safari 5往上
(几乎涵盖现在市面上可以见到的大部分浏览器)

如何安装
浏览器

<script src="lodash.js"></script> 直接下载下来引入,或者使用cdn

NPM
$ npm i -g npm
$ npm i --save lodash
复制代码

先全局安装,在单独安装到项目中

node.js

var _ = require('lodash');

为什么使用lodash

通过使用数组,数字,对象,字符串等方法,Lodash使JavaScript变得更简单。

常用lodash函数

(参考版本lodash v4.16.1)

1、N次循环
<script type="text/javascript">
	console.log('------- javascript -------');
	//js原生的循环方法
	for(var i = 0; i < 5; i++){
		console.log(i);
	}
	console.log('------- lodash -------');
	//ladash的times方法
	_.times(5,function(a){
		console.log(a);
	});
</script>
复制代码

for语句是执行循环的不二选择,但在上面代码的使用场景下,_.times()的解决方式更加简洁和易于理解。

2、深层查找属性值
<script type="text/javascript">
    var ownerArr = [{
        "owner": "Colin",
        "pets": [{"name": "dog1"}, {"name": "dog2"}]
    }, {
        "owner": "John",
        "pets": [{"name": "dog3"}, {"name": "dog4"}]
    }];
    var jsMap = ownerArr.map(function (owner) {
        return owner.pets[0].name;
    });
    console.log('------- jsMap -------');
    console.log(jsMap);

    var lodashMap = _.map(ownerArr, 'pets[0].name');
    console.log('------- lodashMap -------');
    console.log(lodashMap);
</script>
复制代码

Lodash中的_.map方法和JavaScript中原生的数组方法非常的像,但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。

3、深克隆对象
<script type="text/javascript">
    var objA = {
        "name": "戈德斯文"
    };
    var objB = _.cloneDeep(objA);
    console.log(objA);
    console.log(objB);
    console.log(objA === objB);
</script>
复制代码

深度克隆JavaScript对象是困难的,并且也没有什么简单的解决方案。你可以使用原生的解决方案:JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是,这种方案仅在对象内部没有方法的时候才可行。

4、在指定范围内获取一个随机值
<script type="text/javascript">
    function getRandomNumber(min, max){
        return Math.floor(Math.random() * (max - min)) + min;
    }
    console.log(getRandomNumber(15, 20));

    console.log(_.random(15, 20));

</script>
复制代码

Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值, 你也可以指定返回的结果为浮点数_.random(15,20,true)

5、扩展对象
<script type="text/javascript">
    Object.prototype.extend = function(obj) {
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {    //判断被扩展的对象有没有某个属性,
                this[i] = obj[i];
            }
        }
    };

    var objA = {"name": "戈德斯文", "car": "宝马"};
    var objB = {"name": "柴硕", "loveEat": true};

    objA.extend(objB);
    console.log(objA); 

    console.log(_.assign(objA, objB));
</script>
复制代码

_.assign 方法也可以接收多个参数对象进行扩展,都是往后面的对象上合并

6、从列表中随机的选择列表项
<script type="text/javascript">
    var smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"];

    function randomSmarter(smartTeam){
        var index = Math.floor(Math.random() * smartTeam.length);
        return smartTeam[index];
    }

    console.log(randomSmarter(smartTeam));

    // Lodash
    console.log(_.sample(smartTeam));
    console.log(_.sampleSize(smartTeam,2));
</script>
复制代码

此外,你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n),n为需要返回的元素个数

7、判断对象中是否含有某元素
<script type="text/javascript">
    var smartPerson = {
            'name': '戈德斯文',
            'gender': 'male'
        },
        smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"];


    console.log(_.includes(smartPerson, '戈德斯文'));
    console.log(_.includes(smartTeam, '杨海月'));
    console.log(_.includes(smartTeam, '杨海月',2));
</script>
复制代码

_.includes()第一个参数是需要查询的对象,第二个参数是需要查询的元素,第三个参数是开始查询的下标

8、遍历循环
<script type="text/javascript">
    _([1, 2]).forEach(function(value) {
        console.log(value);
    });
    _.forEach([1, 3] , function(value, key) {
        console.log(key,value);
    });
</script>
复制代码

这两种方法都会分别输出‘1’和‘2’,不仅是数组,对象也可以,数组的是后key是元素的下标,当传入的是对象的时候,key是属性,value是值

9、遍历循环执行某个方法

_.map()

<script type="text/javascript">
    function square(n) {
        return n * n;
    }

    console.log(_.map([4, 8], square));
    // => [16, 64]

    console.log(_.map({ 'a': 4, 'b': 8 }, square));
    // => [16, 64] (iteration order is not guaranteed)

    var users = [
        { 'user': 'barney' },
        { 'user': 'fred' }
    ];

    // The `_.property` iteratee shorthand.
    console.log(_.map(users, 'user'));
    // => ['barney', 'fred']
</script>
复制代码
10、检验值是否为空

_.isEmpty()

<script type="text/javascript">
    _.isEmpty(null);
    // => true

    _.isEmpty(true);
    // => true

    _.isEmpty(1);
    // => true

    _.isEmpty([1, 2, 3]);
    // => false

    _.isEmpty({ 'a': 1 });
    // => false
</script>
复制代码
11、查找属性

_.find()_.filter()_.reject()

<script type="text/javascript">
    var users = [
        {'user': 'barney', 'age': 36, 'active': true},
        {'user': 'fred', 'age': 40, 'active': false},
        {'user': 'pebbles', 'age': 1, 'active': true}
    ];

    console.log(_.find(users, function (o) {
        return o.age < 40;
    }));
    console.log(_.find(users, {'age': 1, 'active': true}));
    console.log(_.filter(users, {'age': 1, 'active': true}));
    console.log(_.find(users, ['active', false]));
    console.log(_.filter(users, ['active', false]));
    console.log(_.find(users, 'active'));
    console.log(_.filter(users, 'active'));

</script>
复制代码

_.find()第一个返回真值的第一个元素。 _.filter()返回真值的所有元素的数组。 _.reject()_.filter的反向方法,不返回真值的(集合)元素

12、数组去重

_.uniq(array)创建一个去重后的array数组副本。

参数 array (Array): 要检查的数组。

返回新的去重后的数组

<script type="text/javascript">
    var arr1 = [2, 1, 2];

    var arr2 = _.uniq(arr1);


    function unique(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

    console.log(arr1);
    console.log(arr2);
    console.log(unique(arr1));
</script>
复制代码

_.uniqBy(array,[iteratee=_.identity])这个方法类似 _.uniq,除了它接受一个 iteratee(迭代函数),调用每一个数组(array)的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数:(value)。

<script type="text/javascript">
    console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor));
    // => [2.1, 1.2]
    
    console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));
    // => [{ 'x': 1 }, { 'x': 2 }]
</script>
复制代码

Math.floor只是向下取整,去重,并没有改变原有的数组,所以还是2.1和1.2,不是2和1。

13、模板插入

_.template([string=''], [options={}])

<div id="container"></div>

<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var data = [{name: '戈德斯文'}, {name: '柴硕'}, {name: '杨海月'}];
        var t = _.template($("#tpl").html());
        $("#container").html(t(data));
    });
</script>
<script type="text/template" id="tpl">
    <% _.each(obj,function(e,i){ %>
        <ul>
            <li><%= e.name %><%= i %></li>
        </ul>
    <%})%>
</script>
复制代码

注意,这个<script>标签的typetext/template,类似于react的JSX的写法,就是js和html可以混写,用<% %>括起来的就是js代码,可以执行,直接写的就是html的标签,并且有类似MVC框架的的数据绑定,在<%= %>中可以调用到数据呈现(纯属个人见解,不知道理解的对不对)

就这么多了,剩下的自己可以查看中文文档官方文档或者看看别人写的博客,虽然现在很多方法ES6已经自己就已经封装好了,我们还是写ES5的多,有个偷懒少写方法的路子,为啥不用!!

转载于:https://juejin.im/post/5bc89446e51d450e6d01501c

网站文章

  • 七大统计模型

    七大统计模型

    一、多元回归 1、概述: 在研究变量之间的相互影响关系模型时候,用到这类方法,具体地说:其可以定量地描述某一现象和某些因素之间的函数关系,将各变量的已知值带入回归方程可以求出因变量的估计值,从而可以进行预测等相关研究。  2、分类  分为两类:多元线性回归和非线性线性回归;其中非线性回归可以通过一定的变化转化为线性回归,比如:y=lnx 可以转化为y=u    u=ln...

    2024-01-30 23:47:44
  • 这是你了解的JS函数吗?

    先来一个问题,以下代码会输出什么结果?(内心os: 好像没有问题我这篇文章没法儿继续了): function func({a, b}, x, y) { console.log(arguments[0]...

    2024-01-30 23:47:10
  • array解析

    code<?php/** * Created by deshengkong. * Date: 14/12/23 * Time: 下午8:07 */echo 'PHP version:'. phpversion() . PHP_EOL;$arr2 = array( 1 => 'giraffe', '2' => 'panda', 9223372036854

    2024-01-30 23:47:03
  • linux对文件进行排序,Linux中用Sort和Tsort对文件进行排序 (2)

    最后一组选项处理输入、输出和临时文件。例如, -c 选项,当它用于 sort -c &lt; file 中时,它检查输入文件是否已进行了排序(您也可以使用其它选项),如果已进行了排序,则报告一个错误。...

    2024-01-30 23:46:55
  • 吴恩达机器学习——绘图快速入门

    吴恩达机器学习——绘图快速入门

    画一个正弦函数: 代码: t = 0:0.1:5; y1 = sin(2*pi/5*t); plot(t,y1); t是一个数组,是0到5,间隔为0.1的数组。 Plot()函数绘制以x为x轴,y1位y轴的图形: 运行结果如下:(其中可以进行很多设定,比如线条的表示,颜色,x与y轴的取值范围,图像的名称等等) 同理,我们可以绘制余弦函数的图 ...

    2024-01-30 23:46:25
  • 服务器 CPU 负载过高,如何定位问题

    服务器 CPU 负载过高,如何定位问题

    一、排查 CPU 故障的常用命令top:Linux命令。可以实时查看各个进程的 CPU 使用情况。也可以查看最近一段时间的 CPU 使用情况。默认按 CPU 使用率排序。ps:Linux 命令。强大的...

    2024-01-30 23:46:17
  • conda创建python环境

    conda创建python环境

    2024-01-30 23:46:10
  • WIN10杀进程

    WIN10杀进程

    WIN10杀进程查看进程列表通过上面的方式可以查看占用端口号的进程查看进程列表使用tasklist | findstr “navicat”,查找进程名包含“navicat”的所有进程,详细使用方式使用...

    2024-01-30 23:46:02
  • python-Interview(面试-试题)-python进阶-04

    内建函数 1、map 函数和 reduce 函数? ①从参数方面来讲: map()包含两个参数,第一个参数是一个函数,第二个是序列(列表 或元组)。 其中,函数(即 map的第一个参数位置的函数)可以...

    2024-01-30 23:45:33
  • HTML练习4制作京东登录页,day4 CSS属性和京东登录

    HTML练习4制作京东登录页,day4 CSS属性和京东登录

    1、盒子练习.div1{background-color: darkcyan;width: 100px;height: 100px;margin-left: 20px;margin-top: 20px...

    2024-01-30 23:45:26