lodash和underscore:js实用工具库

简介: lodash和underscore:js实用工具库

lodash VS underscore

一、对比

image.png

二、lodash

npm i --save lodash

使用示例

var _ = require("lodash");
// 拆分数组
_.chunk(["a", "b", "c", "d"], 2);
// [ [ 'a', 'b' ], [ 'c', 'd' ] ]
// 过滤掉假值
console.log(_.compact([0, 1, false, 2, "", 3]));
// => [1, 2, 3]
// 打乱集合
console.log(_.shuffle([1, 2, 3]));
// [ 2, 3, 1 ]
// 查找数据
var users = [
  { id: 1, user: "barney" },
  { id: 2, user: "fred" },
  { id: 3, user: "pebbles" }
];
console.log(
  _.find(users, function(user) {
    return user.id == 1;
  })
);
// { id: 1, user: 'barney' }
// 浅拷贝
var objects = [{ a: 1 }, { b: 2 }];
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true
// 深拷贝
var objects = [{ a: 1 }, { b: 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

三、underscore

<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.0-0/underscore-umd.min.js"></script>
<button onclick="echo_debounce()">echo_debounce</button>
<button onclick="echo_throttle()">echo_throttle</button>
<script>
    // doc: https://underscorejs.net/#debounce
    // https://www.lodashjs.com/docs/lodash.debounce
    // 防抖:每次点击都会重新开始计时
    // _.debounce(function, wait, [immediate])
    function echo(){
        console.log('click');
    }
    const echo_debounce = _.debounce(echo, 3000)
    // 节流:点击后会锁定时间一段时间
    // _.throttle(function, wait, [options])
    const echo_throttle = _.throttle(echo, 3000)
</script>

参考

JS魔法堂:函数节流(throttle)与函数去抖(debounce)

相关文章
|
7月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1382 103
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
JavaScript 前端开发 API
淘宝店铺阿里旺旺采集工具,连接批量转旺旺ID,用Js接口实现效果
以下是淘宝店铺阿里旺旺采集工具的JS实现代码,包含批量获取店铺旺旺ID功能,当然仅
|
3月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
845 0
|
7月前
|
JavaScript 前端开发 API
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
6月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
375 24
|
6月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。

热门文章

最新文章

下一篇
oss云网关配置