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 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
26 4
|
8天前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
19 4
|
11天前
|
移动开发 JavaScript 前端开发
专为webkit内核而生的javascript库mango正式发布
专为webkit内核而生的javascript库mango正式发布
|
11天前
|
SQL JavaScript 前端开发
websql数据库javascript操作库--websqlWrapper
websql数据库javascript操作库--websqlWrapper
|
30天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
1月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
1月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
1月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
34 1
|
1月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
128 0

热门文章

最新文章