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

简介: 前端 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]
  1. _.filter() - 过滤数组,返回符合条件的元素,比如:
const numbers = [1, 2, 3, 4, 5];
const evens = _.filter(numbers, function(num) { return num % 2 === 0; });
console.log(evens); // [2, 4]
  1. _.debounce() - 限制某个函数的执行频率,比如:
window.addEventListener('resize', _.debounce(function() {
    console.log('Resize event triggered!');
}, 300));

总结

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

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

……

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

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

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


相关文章
|
28天前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
299 184
|
5月前
|
JavaScript 前端开发 API
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
281 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
211 1
|
4月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
205 8
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5560 24
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
189 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
156 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
10月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
342 5

热门文章

最新文章