JavaScript工具库——Lodash.js介绍安装及使用

news2024/11/18 3:23:21

前言：

        本文主要介绍-JavaScript工具库——Lodash.js介绍安装及使用！

        作为初入职场、或者对 JavaScript 很多原理掌握的还不是那么透彻的时候，Lodash 这个工具库绝对是一把“杀手锏”，让我们一起来看看这把 “杀手锏” 的厉害之处。

一、Lodash 简介

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

Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。 查看各个构件版本的区别并选择一个适合你的版本。

 Lodash 官网地址icon-default.png?t=M3K6https://www.lodashjs.com/

 

二、为什么选择 Lodash ？

  1.  Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

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

  2.  兼容性

    在 Chrome 74-75、Firefox 66-67、IE 11、Edge 18、Safari 11-12 和 Node.js 8-12 环境中测试通过。

三、如何安装 Lodash ？

  1.  浏览器环境：

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

 

  2.  通过 npm：

$ npm i -g npm
$ npm i --save lodash

 

  3.  Node.js：

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

 

                            看到这里的朋友可能会有些许懵，一起往下看吧~~~

 Lodash 集成了数组(Array)、集合(Array | Object)、函数(Function)、语言(Clone | Is | To)、数学(Math)、数字(Random)、对象(Object)、实用函数等等一些实用方法....

简单点说：Lodash 可以帮你用一行代码实现一个复杂对象数组的求和、一行代码实现按照升序降序对对象数组排序、一行代码实现一个想要的防抖节流等等。。。。

 

四、Lodash 那些有让人眼前一亮的常用方法？

// 导入 Lodash

import * as _ from "lodash";

  1.  sumBy --- 对数组对象特定字段 求和

        官网简介

_.sumBy(array, [iteratee=_.identity])

​
// 这个方法类似_.summin 除了它接受 iteratee 来调用 array中的每一个元素，来生成其值排序的标准。 iteratee 会调用1个参数: (value) 。

参数

  1. array (Array): 要迭代的数组。
  2. [iteratee=_.identity] (Function): 调用每个元素的迭代函数。

返回

     (number): 返回总和。

例子

var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
 
_.sumBy(objects, function(o) { return o.n; });
// => 20
 
// The `_.property` iteratee shorthand.
_.sumBy(objects, 'n');
// => 20

        个人项目使用

 

  2.  uniq --- 对数组去重

        官网简介

_.uniq(array)

// 创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

 参数

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

返回

     (Array): 返回新的去重后的数组。

例子

_.uniq([2, 1, 2]);
// => [2, 1]

         个人项目使用

 

 

  3.  maxBy --- 返回当前数组对象特定 字段 最大值

        官网简介

_.maxBy(array, [iteratee=_.identity])

// 这个方法类似_.max 除了它接受 iteratee 来调用 array中的每一个元素，来生成其值排序的标准。 iteratee 会调用1个参数: (value) 。

参数

  1. array (Array): 要迭代的数组。
  2. [iteratee=_.identity] (Function): 调用每个元素的迭代函数。

返回

     (*): 返回最大的值。

例子

var objects = [{ 'n': 1 }, { 'n': 2 }];
 
_.maxBy(objects, function(o) { return o.n; });
// => { 'n': 2 }
 
// The `_.property` iteratee shorthand.
_.maxBy(objects, 'n');
// => { 'n': 2 }

         个人项目使用

 

 

  4.  orderBy --- 对当前数组对象按照特定 字段 进行升序降序的排序

         官网简介

_.orderBy(collection, [iteratees=[_.identity]], [orders])

// 此方法类似于_.sortBy，除了它允许指定 iteratee（迭代函数）结果如何排序。 如果没指定 orders（排序），所有值以升序排序。 否则，指定为"desc" 降序，或者指定为 "asc" 升序，排序对应值。

 参数

  1. collection (Array|Object): 用来迭代的集合。
  2. [iteratees=[_.identity]] (Array[]|Function[]|Object[]|string[]): 排序的迭代函数。
  3. [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]]

          个人项目使用

 

  5.  throttle --- 节流函数

         官网简介

_.throttle(func, [wait=0], [options=])

// 创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。

// 注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。

// 如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。

 参数

  1. func (Function): 要节流的函数。
  2. [wait=0] (number): 需要节流的毫秒。
  3. [options=] (Object): 选项对象。
  4. [options.leading=true] (boolean): 指定调用在节流开始前。
  5. [options.trailing=true] (boolean): 指定调用在节流结束后。

返回

     (Function): 返回节流的函数。

例子

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

           个人项目使用

 

 

  6. set、has等一些其他ES6语法

_.set(object, path, value)

// 设置 object对象中对应 path 属性路径上的值，如果path不存在，则创建。 缺少的索引属性会创建为数组，而缺少的属性会创建为对象。 使用_.setWith 定制path创建。

// Note: 这个方法会改变 object。

 

_.has(object, path)

// 检查 path 是否是object对象的直接属性。

                     当然实用方法很多，感兴趣大家可以去官网文档看一下~~ 

五、为什么不用ES6完全替换Lodash？

     许多 Lodash 提供的功能已经可以用 ES6 来替换，有些Lodash方法，ES6是没有的。Lodash 这样的类库也在不断推动 JavaScript 语言本身的发展

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

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

相关文章

【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录&#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化&#xff0c;从以下几个方…
阅读更多...
学前端没这些工具怎么行

学前端没这些工具怎么行

目录 前端工具 1.编译软件 2.网上编辑软件 3.参考文档 4.扩展 5.学习软件 6.优秀的教育机构 7.转化工具 8.记录笔记程序 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#x1f381;系列专栏&#xff1a;…
阅读更多...
前端vue3项目中百度地图的使用api及实例

前端vue3项目中百度地图的使用api及实例

目录 一、使用百度地图的准备工作&#xff1f; 二、百度地图的简单Demo 三、百度地图的常用api有哪些&#xff1f; 1、百度地图的类型&#xff1f; 2、百度地图控件 一、使用百度地图的准备工作&#xff1f; 1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务…
阅读更多...
React--》状态管理工具—Mobx的讲解与使用

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具&#xff0c;mobx和react的关系相当于vuex和vue之间的关系&#xff0…
阅读更多...
IntelliJ IDEA【前端必备插件】

IntelliJ IDEA【前端必备插件】

有志者事竟成&#xff0c;破釜沉舟百二秦关终属楚苦心人天不负&#xff0c;卧薪尝胆三千越甲可吞吴。 &#x1f4cc;博主介绍 &#x1f492;首页:水香木鱼 &#x1f6eb;专栏&#xff1a;工欲善其事必先利其器 ✍简介: 博主姓&#xff1a;陈&#xff0c;名&#xff1a;春波。…
阅读更多...
前端开发神器VS Code安装教程

前端开发神器VS Code安装教程

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端 &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f4ac;个人格言&#xff1a;但行好事&#xff0c;莫问前程 安装VS CodeVS Code简介VS Code安装VS Code汉化结束语&#x1f4a1;&#x1f4a1;&…
阅读更多...
webpack热更新原理-连阿珍都看懂了

webpack热更新原理-连阿珍都看懂了

前言 在旧开发的时代&#xff0c;前端项目在开发的过程中修改代码&#xff0c;很有可能是手动切到浏览器刷新页面来看到改动效果。操作不方便且页面之前的编辑记录也都丢失&#xff0c;体验可以说为0。想象一下一个表达你努力填满了所有输入项&#xff0c;结果因为调了一下样式…
阅读更多...
vue3.0全新文档快速上手学习内容整理

vue3.0全新文档快速上手学习内容整理

目录 ## 1.Vue3简介 ## 2.Vue3带来了什么 ### 1.性能的提升 ### 2.源码的升级 ### 4.新的特性 1. Composition API&#xff08;组合API&#xff09; 2. 新的内置组件 3. 其他改变 # 一、创建Vue3.0工程 ## 1.使用 vue-cli 创建 ## 2.使用 vite 创建 # 二、常用 Com…
阅读更多...
vue3导出表格excel(支持多sheet页)，并自定义导出样式

vue3导出表格excel(支持多sheet页)，并自定义导出样式

前期准备 npm install file-saver npm install xlsx npm install xlsx-js-style 先说一说这里为什么选择用xlsx-js-style插件设置导出excel的样式。因项目需要&#xff0c;我在网上找了很多关于导出excel自定义样式的文章&#xff0c;用的最多最普遍的插件就是xlsx-style&#…
阅读更多...
unipush2.0教程

unipush2.0教程

解释一下名词 透传消息&#xff1a;无论手机app&#xff0c;是否在运行(打开了)&#xff0c;还是清了后台&#xff08;关闭&#xff09;&#xff0c;都可以收到消息 通知消息&#xff1a;只能app打开了&#xff0c;才能收到 1.开通unipush 2.点击上图的unipush2.0下面的配置&am…
阅读更多...
【VSCode】调试器debugger详细使用手册

【VSCode】调试器debugger详细使用手册

Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。 调试器扩展 VS Code 具有对Node.js运行时的内置调试支持&#xff0c;并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。 开始调…
阅读更多...
【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

文章目录一、权重叠加计算公式1、后代选择器权重计算2、后代选择器权重计算二3、链接伪类选择器权重计算二、代码示例1、标签结构2、后代选择器选择案例 12、后代选择器选择案例 23、后代选择器选择案例 3一、权重叠加计算公式 在使用 多个类型的 基础选择器 进行 组合 时 , 如…
阅读更多...
【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…
阅读更多...
HttpServletRequest 获取参数

HttpServletRequest 获取参数

1　HttpServletRequest获取参数方法 可以使用HttpServletRequest获取客户端的请求参数&#xff0c;相关方法如下&#xff1a; String getParameter(String name)&#xff1a;通过指定名称获取参数值&#xff1b;String[] getParameterValues(String name)&#xff1a;通过指定名…
阅读更多...
new bing 申请加入候补

new bing 申请加入候补

最近Chatgpt非常的火爆&#xff0c; 微软也是把新版必应Chatgpt的测试版已经推出。1.下载安装新必应(new bing)需要下载 Edge新版本 Edge dev下载链接: Microsoft Edge 预览体验成员 (microsoftedgeinsider.com)安装插件在设置中找到扩展-> 获取Microsoft Edge扩展搜索获取 …
阅读更多...
vue中的nexttick

vue中的nexttick

我们了解nexttick之前&#xff0c;我们先来看一个例子。 我们先要每一次都在点击按钮的时候&#xff0c;都进行字符串的累加操作&#xff0c;并且在该函数中计算该字符串所占的高度offsetHeight&#xff0c;但是我们当进行第一次点击的时候&#xff0c;此时打印的结果不符合,因…
阅读更多...
Javascript Object和Map之间的转换

Javascript Object和Map之间的转换

简单的区分Map和Object Map是ES6退出的一个类型&#xff0c;特点&#xff1a;任何值都可作为属性名 Object特点&#xff1a;属性名只能是字符串(一开始我也不信&#xff0c;测试后才发现的) 代码图片创建一个map类型 new Map([[key, value],[key1, value1] ])简单的介绍下面…
阅读更多...
vue 获取后端数据

vue 获取后端数据

目录 proxy 解决本地请求问题 vite Vue CLI fetch 代码演示 Post请求 ​编辑Get请求 Axios 安装 代码演示 Post请求 Get请求 TS 封装Axios 代码演示 proxy 解决本地请求问题 为什么会出现跨域问题? 浏览器的同源策略 首先给出浏览器“同源策略”的一种经典定义…
阅读更多...
this.$router.push跳转页面携带参数

this.$router.push跳转页面携带参数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、params和query使用方式二、实现代码1.index.js代码2.test.vue代码3.testParams代码4.testParams代码5.效果总结前言 this.$router.push进行页面跳转时。携带…
阅读更多...
Vue.js安装与创建默认项目（详细步骤）

Vue.js安装与创建默认项目（详细步骤）

前言 上一篇博文已经对Node.js的安装与配置进行了详细介绍&#xff0c;详见https://blog.csdn.net/qq_42006801/article/details/124830995 另外&#xff1a;文中项目存放的路径及项目名称可根据自身实际情况进行更改。 一、Vue.js简述 Vue是一套用于构建用户界面的渐进式Ja…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023