JavaScript ES6 箭头函数语法与用法详解

作者:青柠

时间:2026-10-23

浏览:621

本文详细介绍JavaScript ES6引入的箭头函数(Arrow functions)用法。涵盖语法结构、单/多参数处理、隐式与显式返回值,以及作为Lambda表达式的特性。箭头函数不能作为构造函数使用,适合简化函数定义。

文章目录

箭头函数概述

本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法。分享给大家供大家参考,具体如下:

箭头函数是ES6(ES2015)标准新增的特性。因其使用“=>”符号,形似箭头而得名,英文中常被称为Fat arrow functions或Lambda表达式。需注意,箭头函数不能用作构造函数。

语法结构

语法

箭头函数的基本形态如下所示:


const greet = () => hello

箭头“=>”左侧定义参数。若无参数,需使用空括号“()”;若仅有一个参数,括号可省略;若有多个参数,则必须包含在括号内,并以逗号分隔。

箭头右侧为函数体。若函数体仅包含单行表达式,可直接置于箭头右侧,此时函数会自动返回该表达式的结果,无需显式使用return关键字。若函数体包含多行代码,则需使用大括号“{}”包裹,并显式使用return语句。

参数处理

单个参数


const greet = name => `hello, ${name}`

在示例中,name是greet函数的唯一参数。由于参数数量为一个,定义时省略了括号。

多个参数


const greet = (greeting, name) => `${greeting}, ${name}`

当greet函数包含greeting与name两个参数时,必须使用括号将参数包裹,且参数间以逗号分隔。

函数主体与返回值

函数主体

上述示例的函数体仅有一行表达式,其结果会自动返回,等效于以下写法:


const greet = (greeting, name) => {
 return `${greeting}, ${name}`
}

若函数体使用大括号包裹,则必须在内部显式使用return语句来返回所需结果。

如需了解更多JavaScript内容,可参考本站相关教程:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》。

希望本文对您的JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章