lodash-es 工具库

这篇具有很好参考价值的文章主要介绍了lodash-es 工具库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、概述

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)。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

二、安装及使用

2.1 安装

安装 lodash-es

npm i lodash-es

引入 lodash-es 中的函数

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

2.2 浅拷贝 clone

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

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

2.3 深拷贝 cloneDeep

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

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

2.4 防抖 debounce

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

参数

  1. func (Function): 要防抖动的函数。
  2. [wait=0] (number): 需要延迟的毫秒数。
  3. [options=] (Object): 选项对象。
  4. [options.leading=false] (boolean): 指定在延迟开始前调用。
  5. [options.maxWait] (number): 设置 func 允许被延迟的最大值。
  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);

2.5 节流 throttle

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

参数:

  1. func (Function): 要节流的函数。
  2. [wait=0] (number): 需要节流的毫秒。
  3. [options=] (Object): 选项对象。
  4. [options.leading=true] (boolean): 指定调用在节流开始前。
  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);

2.6 打乱值 shuffle

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

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

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

三、Vue 动画案例

<transition-group> 组件还有一个特殊之处。除了进入和离开,它还可以为定位的改变添加动画。只需了解新增的 v-move 类就可以使用这个新功能,它会应用在元素改变定位的过程中。像之前的类名一样,它的前缀可以通过 name attribute 来自定义,也可以通过 move-class attribute 手动设置

如下代码,是一个九宫格的布局,利用 lodash 中的 shuffle 随机打乱其顺序,然后通过 move 属性实现过渡效果,非常炫酷:

页面演示效果:
lodash-es 工具库
示例代码:文章来源地址https://www.toymoban.com/news/detail-439189.html

<template>
   <TransitionGroup name="list" tag="ul" class="list" leave-active-class="animate__animated animate__bounce"
        enter-active-class="animate__animated animate__flipInY">
        <li v-for="item in list" :key="item.id">{{ item.number }}</li>
    </TransitionGroup>
</template>
  
<script setup>
import { shuffle } from 'lodash-es'
import HTransition from './HTransition.vue';
import { ref } from 'vue'
let isShow = ref(false)

const list = ref(Array.apply(null, { length: 90 }).map((_, index) => {
    return {
        id: index,
        number: (index % 9) + 1
    }
}))

const confuse = () => {
    list.value = shuffle(list.value)
}
</script>
  
<style scoped lang="less">
.list {
    width: 270px;
    display: flex;
    flex-wrap: wrap;
    background-color: orange;
    position: relative;
}

li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    list-style: none;
    border: solid 1px #e7e7e7;
}

.list-move {
    transition: transform 0.8s ease;
}
</style>

到了这里,关于lodash-es 工具库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js工具类Lodash、功能介绍、用法

    Lodash 是一个非常流行的 JavaScript 实用工具库,它提供了一系列优化后可重复使用的函数,简化了 JS 开发中各种常见任务的编写。 以下是 Lodash 常用功能及用法的详细介绍: 1.复制数组: clone(array) 用法举例: 2.合并多个数组: concat(...arrays) 用法举例: 3.删除数组中所有符合

    2024年02月11日
    浏览(42)
  • Radash一款JavaScript最新的实用工具库,Lodash的平替!

    一说lodash应该大部分前端同学都知道吧,陪伴我们好多年的JavaScript工具库,但是自从 ES6 出现后就慢慢退出前端人的视线,能ES6写的代码绝对不会用Lodash,也不是完全不用,就是用的少了。 看过Lodash源码的都知道,都是ES5的各种封装,写的很繁琐各种处理,Lodash 源码的学习

    2024年04月28日
    浏览(50)
  • Lodash 真的死了吗?Lodash 5 在哪里?

    与一些传言相反,Lodash依然活跃,并正在迈向Lodash 5的发布! Lodash 是那些为 JavaScript 提供便利功能的实用程序库之一,它使编程变得更加轻松。许多开发者使用它来简化对象和数组的处理。 它也是一个像 Moment.js 那样被捕获得措手不及的库。由于没有模块化,它从一些项目中

    2024年02月06日
    浏览(41)
  • lodash 之 _.isEmpty

    lodash.isEmpty() 是 Lodash 库中的一个函数,用于检查给定值是否为空。它可以用于判断对象、数组、字符串等不同类型的值是否为空。 _.isEmpty() 函数接受一个值作为参数,然后返回一个布尔值。如果值为空,即没有实际内容,函数返回 true;否则返回 false。 在示例中,_.isEmpty(

    2024年02月11日
    浏览(48)
  • lodash的merge()方法

    在JavaScript开发中,对象合并是一个常见的操作。Lodash是一个流行的实用工具库,其中的merge()方法能够方便地将多个对象进行合并。本文将深入介绍lodash的merge()方法,包括它的使用方法、深浅拷贝的原理,以及与JavaScript内置的Object.assign()方法的区别和联系。 merge()方法是Lod

    2024年02月09日
    浏览(37)
  • 使用Lodash实现深拷贝(cloneDeep)

    1.运行 vue ui 命令进入vue项目的可视化面板 2.点击依赖按钮——安装依赖——运行依赖——输入== loadsh==选择并安装 在Vscode新建终端,输入== npm i --save lodash == 回车安装完成 1.在需要使用的lodash深拷贝的组件中,导入lodash 2.例如: 可参考官方文档:https://lodash.com/

    2024年02月14日
    浏览(34)
  • lodash之cloneDeep()源码阅读笔记

    基本上都在写业务代码,没有机会写库,还是想了解一下lodash的库源码是怎么样的,平时用的最多的就是cloneDeep()方法了,终于有空详细看看其中的源码。 本文基于lodash@5.0.0版本的源码进行阅读。 /cloneDeep.js cloneDeep入口函数 调用了一个内部的方法,传入的参数中有一个 CLON

    2024年02月13日
    浏览(35)
  • 都听说过 lodash,但你会用吗?

    Lodash 是 JavaScript 社区最出名的一个工具库,提供了许多高效、高兼容性的工具函数。 不过,随着浏览器和 web 技术的发展,一些人开始反对在项目中使用 lodash。主要原因有: ES6 之后拓展了 JavaScript 特性,许多功能不再需要额外工具库。 现代浏览器对 ES 语法的支持性提升。

    2024年02月16日
    浏览(45)
  • 微信小程序如何引入moment和lodash

    1、在app.js同级目录下,打开终端,初始化npm,执行 2、打开微信开发工具,在最上面当行区域选择工具,点击构建npm 3、引入moment使用 1、打开终端,执行 2、在utils文件夹下新建一个lodash-fix.js文件,文件内容如下 3、引入lodash-fix和lodash并使用

    2024年02月17日
    浏览(44)
  • 使用lodash的throttle函数会触发两次

    当使用lodash的throttle函数时会触发两次,分别在最开始和最后。 严格来说不算是bug,因为官方文档写的很清楚。throttle函数其实有三个参数: _.throttle(func, [wait=0], [options=]) func : 要节流的函数 wait : 等待时间 options : 选项 options.leading=true (boolean): 指定调用在节流开始前,也就是

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包