loadsh

news2025/1/16 19:09:12

官网(当前版本4.x)Lodash Documentationicon-default.png?t=N7T8https://lodash.com/docs/4.17.15

简介

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

如何安装
浏览器<script src="lodash.js"></script> 直接下载下来引入,或者使用cdn
<!--加载整个Lodash库-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha384-k56c0oKfr4BDg8eoY5KLcdipYOdndmou832cgWza7jWe4nxoxyLvCvS4wU4J6dX" crossorigin="anonymous"></script>

<!--通过指定模块加载Lodash库-->
<script src="https://cdn.jsdelivr.net/npm/lodash.get@4.17.15/lodash.get.min.js" integrity="sha384-103JNzcBlmBHo7wkhefW7GlF54j8ja5oEnIWW5lMDaPHJKz/EygRv5PhzQnJTcWf" crossorigin="anonymous"></script>
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框架的的数据绑定,在<%= %>中可以调用到数据呈现(纯属个人见解,不知道理解的对不对)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1154345.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WorkPlus:领先的IM软件,助力企业高效沟通与协作

随着信息技术的发展&#xff0c;企业内部沟通协作变得至关重要&#xff0c;而IM&#xff08;即时通讯&#xff09;软件成为了企业中不可或缺的工具。在众多IM软件中&#xff0c;WorkPlus凭借其卓越的功能和优质的用户体验&#xff0c;成为了企业首选。 WorkPlus为何备受企业青睐…

一文弄懂Linux信号机制

目录 1.什么是信号&#xff1f; 2.信号实现原理 ​3.信号生命周期 4.信号分类 5.信号常见概念 6.信号阻塞和信号忽略的区别&#xff1f; 1.什么是信号&#xff1f; Linux信号机制是进程间通信的一种方式&#xff0c;用于在不同进程之间传递信息。它通过向目标进程发送一…

图片加水印怎么加?

图片加水印怎么加&#xff1f;一般我们给图片加水印都会使用一些工具来进行的。很多常见的 作图工具都有给图片加水印的功能呢。图片加水印是一种常见的图像处理技术&#xff0c;可以在图片上添加一些标识、文字或图形&#xff0c;以保护图片的版权&#xff0c;或者用于品牌宣传…

在Maven中发布项目到Nexus私有服务器

一、测试环境 Sonatype Nexus 3.61.0-02 Maven 3.9.2 二、环境配置 2.1找到maven的配置文件 2.2添加私有仓库账户密码 <servers><server><id>nexus</id><username>admin</username><password>admin</password></server&…

批量预处理哨兵2影像

批量预处理哨兵2影像 最近下载70多景哨兵2影像&#xff0c;平均每个影像在cmd中处理时间都需要半个小时。算下来我一景一景手动处理需要37个小时左右&#xff0c;每天在电脑前待8个小时也要4天多&#xff0c;很浪费时间。如果能够批处理&#xff0c;不需要我手动做的话&#x…

作为开发者如何有效使用 ChatGPT(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

基于EasyCVR技术的大数据视频汇聚与智能分析平台设计方案

一、背景需求 大数据中心的数据建设如火如荼&#xff0c;针对其中城市中的视频监管及算法分析&#xff0c;各卡口监控、治安监控&#xff0c;电警监控不同网络、不同地域&#xff0c;如何进行视频融合、进行统一监管&#xff0c;则是大数据中心解决方案数据汇聚的重中之重。 现…

java判断上午下午的方法

一、代码 import java.text.SimpleDateFormat; import java.util.Date; import java.util.Locale;public class Main1 {public static void main(String[] args) {Date nowDate new Date();SimpleDateFormat sdf new SimpleDateFormat("aa", Locale.ENGLISH);Strin…

流程图用什么软件做?这4款软件不容错过

流程图是管理者用于管理的一种方式&#xff0c;它能够让管理者详细地知道工作中&#xff0c;哪个环节出了问题&#xff0c;从而针对问题&#xff0c;确定可实施的方案。因此&#xff0c;如何制作出一个完整流畅的流程图&#xff0c;是所有管理者都在思考的问题&#xff0c;小编…

安装Python环境

Python 安装包下载地址&#xff1a;https://www.python.org/downloads/ 打开该链接&#xff0c;可以看到有两个版本的 Python&#xff0c;分别是 Python 3.x 和 Python 2.x&#xff0c;如下图所示&#xff1a; Python下载页面截图 图 1 Python 下载页面截图&#xff08;包含…

专题|国内九大科技上市公司聚焦AIGC落地,八仙过海,谁更神通?

【科技明说 &#xff5c; 重磅专题】 从AI高谈阔论的概念&#xff0c; 到AI真金白银的投资&#xff0c;再到AI因ChatGPT大模型的升温&#xff0c;每一次技术带动产业的革新&#xff0c;都离不开不了两样东西的驱动。一是此起彼伏的技术迭代&#xff0c;二是不计后果的资本注入…

水溶性纳米银颗粒 纳米银颗粒 银纳米颗粒溶液

西&#xff09;产品名称&#xff1a;水溶性纳米银颗粒 安&#xff09;别名 &#xff1a;纳米银溶液 银纳米颗粒溶液 纳米银胶体等 瑞&#xff09;浓度&#xff1a;0.1mg/mL 其它均可定制 禧&#xff09;粒径&#xff1a;5nm 10nm 15nm 20nm 25nm 30nm 35nm 40nm 50nm 60nm 80…

Qt自定义文件选择框

文章目录 前言一、头文件二、源文件三、qss文件四、效果 前言 在开发过程中,经常遇到使用文件选择框的情况,qt默认的文件选择框,样式可能与开发的桌面程序差异比较大.此时,我们可以自定义文件选择框,设置其样式,尽量做到样式统一. 一、头文件 #ifndef CUSTOMFILEDIALOG_H #d…

【数据结构】顺序表的学习

前言:在之前我们学习了C语言的各种各样的语法&#xff0c;因此我们今天开始学习数据结构这一个模块&#xff0c;因此我们就从第一个部分来开始学习"顺序表"。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:C程序设计谭浩强版本…

环信 IM+AI编程挑战赛开启报名!

大赛背景 即时通讯已成为现代生活中不可或缺的一部分&#xff0c;近年来人工智能的迅猛发展也为即时通讯带来了前所未有的智能化体验。高度拟人的陪伴型机器人&#xff0c;全能实用的服务型机器人&#xff0c;高效智能的对话机器人&#xff0c;AI 与即时通讯的结合创新&#x…

ARM版CentOS Linux系统镜像安装教程

Linux系统受程序员钟爱&#xff0c;目前国内常见版本有Ubuntu和CentOS等&#xff0c;CentOS是较为稳定的Linux系统。如何在苹果电脑上安装Linux系统呢&#xff0c;小编为大家准备了ARM版CentOS Linux系统镜像文件资源&#xff0c;一起来看看吧&#xff01; ARM版CentOS Linux系…

Jenkins自动化部署简单配置

下载安装jenkins 安装Jenkins步骤 点击Next的时候会有jdk版本跟Jenkins版本不符合的情况 1. 看下任务管理器内Jenkins服务是否启动&#xff0c;在浏览器里面输入localhost:2023&#xff08;端口号是安装时输入的&#xff09; 2. 根据路径找到放置密码的文件&#xff08;C…

[SpringCloud] Feign 与 Gateway 简介

目录 一、Feign 简介 1、RestTemplate 远程调用中存在的问题 2、定义和使用 Feign 客户端 3、Feign 自定义配置 4、Feign 性能优化 5、Feign 最佳实践 6、Feign 使用问题汇总 二、Gateway 网关简介 1、搭建网关服务 2、路由断言工厂 3、路由的过滤器配置 4、全局过…

SpringCloud(五) Eureka与Nacos的区别

SpringCloud(二) Eureka注册中心的使用-CSDN博客 SpringCloud(四) Nacos注册中心-CSDN博客 在这两篇博文中我们详细讲解了Eureka和Nacos分别作为微服务的注册中心的使用方法和注意事项,但是两者之间也有一些区别. 一, Nacos实例分类 Nacos实例分为两种类型: 临时实例:如果实例…

C# Onnx P2PNet 人群检测和计数

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Onnx…