前端 JavaScript 的 _ 语法是个什么鬼？

前言

我们有时候会看这样的前端代码：

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>
  

然后就可以使用 _ 语法完成编程任务了。

常用函数

1. _.map() - 遍历数组并返回新数组，比如：

   const numbers = [1, 2, 3];
   const doubled = _.map(numbers, function(num) { return num * 2; });
   console.log(doubled); // [2, 4, 6]
   

2. _.filter() - 过滤数组，返回符合条件的元素，比如：

   const numbers = [1, 2, 3, 4, 5];
   const evens = _.filter(numbers, function(num) { return num % 2 === 0; });
   console.log(evens); // [2, 4]
   

3. _.debounce() - 限制某个函数的执行频率，比如：

   window.addEventListener('resize', _.debounce(function() {
       console.log('Resize event triggered!');
   }, 300));
   

总结

通过 Lodash 可以简化 JavaScript 编程中的许多常见任务，比如数组和对象的操作、函数的节流和防抖、深度拷贝等。除了以上常见的使用场景之外，还有更多的功能，比如：

• _.reduce：对数组中的元素进行累积操作。
• _.forEach：遍历数组中的每个元素。
• _.find：查找第一个满足条件的元素。
• _.sortBy：对数组进行排序。

……

等待童鞋们自己去了解发掘，只有自己真正用过的技术，才是自己的技术。

需要注意的是，使用这些工具库可以帮助我们更简洁地编写代码，但实际上，它们也只是对 JavaScript 的基础语法的运用而已，有条件的童鞋们，不妨多学习学习 JavaScript 的基础语法。

我是老杨，一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟，是软件项目管理师，也是快乐的程序猿，持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号，相互交流，共同进步！