lodash-es 工具库

简介: lodash-es 工具库

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

Vue权限系统案例

个人博客地址

Lodash中文文档

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库,算是从 Underscore 分离来的超集。

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

遍历 array、object 和 string

对值进行操作和检测

创建符合功能的函数

lodash 为了良好的浏览器兼容性,它使用了旧版 es5 的模块语法;而lodash-es则使用了 es6 的模块语法,这让 webpack 之类的打包工具可以对其进行tree shake (摇树优化)以删除未使用的代码来优化打包体积。所以在使用lodash库时,推荐通过lodash-es来进行导入操作。

注:tree-shaking(摇树优化)的作用:移除上下文中未引用的代码(dead code)。

安装 lodash-es

npm i lodash-es

引入 lodash-es 中的函数

import { shuffle, cloneDeep, throttle, debounce } from 'lodash-es'

1.1 浅拷贝 clone

_.clone(value) 创建一个 value 的浅拷贝。返回拷贝后的值。

var objects = [{ 'a': 1 }, { 'b': 2 }];
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);  // true

1.2 深拷贝 cloneDeep

_.cloneDeep(value) 类似 _.clone 但是它会递归拷贝 value。返回拷贝后的值。

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); // false

1.3 防抖 debounce

_.debounce(func, [wait=0], [options=]) 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。 返回新的 debounced(防抖动)函数。

参数:

  1. 1. func (Function): 要防抖动的函数。
  2. 2. [wait=0] (number): 需要延迟的毫秒数。
  3. 3. [options=] (Object): 选项对象。
  4. 4. [options.leading=false] (boolean): 指定在延迟开始前调用。
  5. 5. [options.maxWait] (number): 设置 func 允许被延迟的最大值。
  6. 6. [options.trailing=true] (boolean): 指定在延迟结束后调用。
// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
// 确保 `batchLog` 调用1次之后,1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

1.4 节流 throttle

_.throttle(func, [wait=0], [options=]) 创建一个节流函数,在 wait 秒内最多执行 func 一次的函数。 返回节流的函数。

参数:

  1. 1. func (Function): 要节流的函数。
  2. 2. [wait=0] (number): 需要节流的毫秒。
  3. 3. [options=] (Object): 选项对象。
  4. 4. [options.leading=true] (boolean): 指定调用在节流开始前。
  5. 5. [options.trailing=true] (boolean): 指定调用在节流结束后。
// 避免在滚动时过分的更新定位
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);

1.5 打乱值 shuffle

_.shuffle(collection) 创建一个被打乱值的集合。返回打乱的新数组。

参数:collection (Array|Object): 要打乱的集合

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

Vue 动画案例

image.gif

代码实现:

相关文章
|
2月前
|
JavaScript
es6模块中使用commonjs定义的库
es6模块中使用commonjs定义的库
|
4月前
|
JavaScript 开发工具 git
使用TS+rollup打造一个npm工具库
使用TS+rollup打造一个npm工具库
161 0
|
JavaScript 编译器
Babel对ES6模块化代码转换、ES6模块化引入NPM包
Babel对ES6模块化代码转换、ES6模块化引入NPM包
96 0
|
6月前
|
JavaScript 前端开发
前端 JS 经典:ES6 和 CommonJs 用法
前端 JS 经典:ES6 和 CommonJs 用法
37 0
|
6月前
|
JavaScript 前端开发
除了ES6的模块导出语法,还有哪些其他的方式可以在Vue项目中进行模块化开发?
除了ES6的模块导出语法,还有哪些其他的方式可以在Vue项目中进行模块化开发?
35 2
|
缓存 前端开发 JavaScript
前端封装库/工具库的实用工具库之Lodash
当今,前端开发已经成为了互联网行业中的主流技术之一。在大多数项目中,我们都需要用到很多的 JavaScript 工具库来提供便利的操作和优化性能。其中一个非常流行的 JavaScript 工具库是 Lodash。 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了对数组、数字、对象、字符串等常用数据类型的处理方法,并且支持链式调用和函数式编程风格,优化了 JavaScript 应用的性能和可读性。
363 1
|
Web App开发 前端开发 JavaScript
UMD 被淘汰了吗?不考虑的 UMD 的库如何在纯 UMD 前端项目中运行?
UMD 被淘汰了吗?不考虑的 UMD 的库如何在纯 UMD 前端项目中运行?
231 0
|
JavaScript 前端开发 API
Vue3组件库打包指南,一次生成esm、esm-bundle、commonjs、umd四种格式
本文为`Varlet`组件库源码主题阅读系列第二篇,读完本篇,你可以了解到如何将一个Vue3组件库打包成各种格式
638 0
|
JavaScript C++
lodash和underscore:js实用工具库
lodash和underscore:js实用工具库
163 0
lodash和underscore:js实用工具库
typescript78-react支持ts的目录结构
typescript78-react支持ts的目录结构
376 0
typescript78-react支持ts的目录结构