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)

相关文章
|
2月前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
99 1
用python执行js代码:PyExecJS库
|
2月前
|
数据可视化 前端开发 JavaScript
可视化工具D3.js
可视化工具D3.js
|
8天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
74 9
|
10天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
34 10
|
3天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
8天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
25天前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
39 3
|
27天前
|
存储 JavaScript 前端开发
Node.js 常用工具
10月更文挑战第6天
17 2
|
21天前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
22天前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
8 0