前言
我们有时候会看这样的前端代码:
const doubled = _.map(numbers, function(num) { return num * 2; });
刚接触前端的童鞋可能会有点惊奇,不知道这个 _
是什么语法,为什么这么神通广大?
其实 _
是 Lodash 或 Underscore.js 这两个工具库的一个命名约定,并不是 JavaScript 的内置语法。
Underscore.js 是一个轻量级的 JavaScript 工具库,提供了许多实用的函数;
Lodash 是基于 Underscore.js 发展起来的一个更现代的工具库,优化了性能,并且提供了更多的功能。
本文通过一些例子聊聊如何使用这个 _
语法,希望对你有所帮助。
引入库
-
如果你在项目中使用 npm,可以通过以下命令安装 Lodash,比如
npm install lodash
-
在 HTML 文件中,你也可以通过 CDN 引入,比如:
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
然后就可以使用 _
语法完成编程任务了。
常用函数
-
_.map() - 遍历数组并返回新数组,比如:
const numbers = [1, 2, 3]; const doubled = _.map(numbers, function(num) { return num * 2; }); console.log(doubled); // [2, 4, 6]
-
_.filter() - 过滤数组,返回符合条件的元素,比如:
const numbers = [1, 2, 3, 4, 5]; const evens = _.filter(numbers, function(num) { return num % 2 === 0; }); console.log(evens); // [2, 4]
-
_.debounce() - 限制某个函数的执行频率,比如:
window.addEventListener('resize', _.debounce(function() {console.log('Resize event triggered!'); }, 300));
总结
通过 Lodash 可以简化 JavaScript 编程中的许多常见任务,比如数组和对象的操作、函数的节流和防抖、深度拷贝等。除了以上常见的使用场景之外,还有更多的功能,比如:
_.reduce
:对数组中的元素进行累积操作。_.forEach
:遍历数组中的每个元素。_.find
:查找第一个满足条件的元素。_.sortBy
:对数组进行排序。
……
等待童鞋们自己去了解发掘,只有自己真正用过的技术,才是自己的技术。
需要注意的是,使用这些工具库可以帮助我们更简洁地编写代码,但实际上,它们也只是对 JavaScript 的基础语法的运用而已,有条件的童鞋们,不妨多学习学习 JavaScript 的基础语法。
我是老杨,一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟,是软件项目管理师,也是快乐的程序猿,持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号,相互交流,共同进步!