常规函数转箭头函数示例

马黑黑

我们先看一个求a的b次方的常规函数写法：

• function pow(a, b) {
•     return Math.pow(a, b);
• };
  

针对初学者的解释：

function 是声明一个函数的引导词，属JS内置关键词，我们通过它创建一个自己的函数；

pow 是我们命名的函数名称，可以是其他的，比如 miYunsuan 或你喜欢的任何名称（不过它有一定规范，不能是数字、短连线开头等等）。函数可以有参数，也可以没有，不论有没有参数，函数都要紧跟着小括号，写成 pow() ，若有参数，参数写在小括号内，各参数间以小角逗号隔开，空格可要可不要（要空格是为了提升可读性，下同），比如只有一个参数，写成 pow(a)，两个参数，写成 pow(a,b) 或 pow(a, b)；

紧接着是花括号对 {} ，花括号对是函数体，即函数 pow() 的主体内容，就是对函数要做的事情的描述。左向 { 跟 右向小括号 ) 间一般保留一个空格也可以不要空格，右向 } 结尾处加一个小角分号 ; ，分行写时分号可以不加（但建议加，这样在压缩代码时或在一些严格模式的运行环境中（比如 pencil-code）可以正常运行）。

花括号对 {} 之内的代码是函数要运行的东东，上述的 return Math.pow(a, b); 表示，返回 Math.pow(a, b) 的运算结果。return 是JS内置指令，返回之意，Math.pow() 是JS内置数学方法 Math 的幂运算 pow 函数，需要两个参数，参数1 是求幂运算的数，参数2 是幂。小括号内的 a、b 是我们的自定义函数的参数名称，这里要传给内置运算函数进行运算。

我们编写的上述函数，看似简单，但它使用到的知识点很多，上面的描述还不够详尽，不过基本可以帮助初学者透彻理解常规函数的写法了。

现在，我们将上面的常规函数改写为箭头函数：

箭头函数不要 function 关键词，所以，直接写函数的名称：

• pow
  

接着，用一个等号带出参数，参数用小括号包裹起来，如果没有参数，直接写小括号：

• pow = (a, b)
• /* 没有参数的写法如下 */
• /* pow = () */
  

然后给上面的写法加上箭头符号 => ，注意，= 和 > 必须连在一起写，它们的前后可以有空格：

• pow = (a, b) =>
• /* 无参数是写成 pow = () => */
  

函数体即 {} 对里的内容，我们先照抄下来：

• pow = (a, b) => {
•     return Math.pow(a, b);
• };
  

箭头函数，如果花括号对 {} 内只有一行代码，可以简化，不需要花括号对 {}，此时，如果有 return 关键词，return 断断不可要，要去掉，所以上述代码可以简化成：

• aPow = (a, b) =>
•     Math.pow(a, b);
• ;
  

上面的代码，写成一行才是精髓所在，如此，行 3 的分号就不能要了：

• pow = (a, b) => Math.pow(a, b);
  

（昨天介绍过），假设自定义函数只带一个参数，参数的小括号也可以不要，若此，箭头函数写成：

• pow = a => Math.pow(a, b);
  

在 JS 代码世界，函数也是变量，它是变量中的一等公民。既是变量，所以，我通常在编写箭头函数时使用 var、let 或 const 关键词，它们用于声明变量（常量）：

• let pow = (a, b) => Math.pow(a, b);
  

【提示】以上所有代码，我们在同一行代码中使用两个相同的单词 pow ，要分清它们的不同，一个是自定义函数的名称，一个是跟在 Math 数学方法之后，是内置的函数名，Math.pow(参数1, 参数2) 。

最后，我在二楼给出一个可以互动的例子，里面有常规函数和箭头函数两个按钮，都可以运算 a 的 b 次方。我没有对输入进行检测，不过，如果运算式子不合法，运算结果会给出提示。

马黑黑

求 10 的 3 次方 ：

运算结果

传统函数 箭头函数

马黑黑

二楼代码：

1. <style>
   
2. #shu, #mi { color: red; padding: 2px 6px; }
   
3. </style>
   
4. 
   
5. <p>求 <span id="shu" contentEditable="true">10</span> 的 <span id="mi" contentEditable="true">3</span> 次方 ：<output id="Res">运算结果</output></p>
   
6. <p><button id="normalFn" type="button" value="">传统函数</button> <button id="arrowFn" type="button" value="">箭头函数</button></p>
   
7. 
   
8. <script>
   
9. 
   
10. function nPow(a,b) {
    
11.         return Math.pow(a,b);
    
12. };
    
13. 
    
14. aPow = (a, b) => Math.pow(a, b);
    
15. 
    
16. normalFn.onclick = () => Res.textContent = nPow(shu.textContent,mi.textContent) || '算式非法';
    
17. arrowFn.onclick = () => Res.textContent = aPow(shu.textContent,mi.textContent) || '算式非法';
    
18. 
    
19. </script>

复制代码

红影

nPow和aPow分别返回了不同函数的结果，结果是一样的

红影

10和3两个数字分别从id="shu"和id="mi"的span里得到的么，这个挺难理解。

红影

button id="normalFn"  这里的id没有对应的设置么？

马黑黑

红影 发表于 2024-1-7 13:58
button id="normalFn"  这里的id没有对应的设置么？

这是HTML的DOM。button 的 id 是按钮被JS识别的标识，它可以没有CSS样式、也可以有，看需要不需要设置按钮的外观。

马黑黑

红影 发表于 2024-1-7 13:54
nPow和aPow分别返回了不同函数的结果，结果是一样的

这两个自设函数其实内容是一样的，一个是常规写法的函数，一个是箭头函数，它们做相同的事情：求a的b次方。

马黑黑

红影 发表于 2024-1-7 13:56
10和3两个数字分别从id="shu"和id="mi"的span里得到的么，这个挺难理解。

这就是JS的功能：JS可以读取DOM指定节点（元素）的值，值可以是字符串、数值等。

红影

马黑黑 发表于 2024-1-7 14:03
这是HTML的DOM。button 的 id 是按钮被JS识别的标识，它可以没有CSS样式、也可以有，看需要不需要设置按 ...

哦哦，原来是来自内部设置

红影

马黑黑 发表于 2024-1-7 14:05
这两个自设函数其实内容是一样的，一个是常规写法的函数，一个是箭头函数，它们做相同的事情：求a的b次方 ...

你把它们对比着，只是想让我们看得更清楚

红影

马黑黑 发表于 2024-1-7 14:06
这就是JS的功能：JS可以读取DOM指定节点（元素）的值，值可以是字符串、数值等。

这个读取的方式有点超乎想象

千羽

吃瓜群众来了

樵歌

和楼上千羽一起吃瓜

起个网名好难

红影 发表于 2024-1-7 13:56
10和3两个数字分别从id="shu"和id="mi"的span里得到的么，这个挺难理解。

shu 数 ， mi 幂

马黑黑

樵歌 发表于 2024-1-7 20:06
和楼上千羽一起吃瓜

瓜很甜

马黑黑

红影 发表于 2024-1-7 19:33
哦哦，原来是来自内部设置

看样纸你还是没能分清 CSS、HTML、JS间的关系。时刻记住，HTML是web的核心，它由诸多元素组成一张网页。HTML里的元素，可以拥有自己的唯一的id标识（id="名称"），CSS可以通过 #id 选择器设置该元素的样式，JS可以通过 id 操作该元素。

马黑黑

千羽 发表于 2024-1-7 19:50
吃瓜群众来了

瓜多，随便用

马黑黑

红影 发表于 2024-1-7 19:34
这个读取的方式有点超乎想象

这个，不应该有这个感觉了，毕竟，音画帖里反复使用到这个方法。比方讲，操作音频控件（它就是一个元素，id="aud"），我们经常这么做：

aud.play(); //播放
aud.pause(); //暂停

这都是经典的通过 id 操作元素的应用实例。

不同的元素，有不同的属性、方法、事件等等等待JS去操作。一个可装载文本的容器，比如 div、p、span、outer 等，它们就有 textContent、innerText、InnerHTML 等文本值，textarea 等则使用value 表达它的文本值，这些，都可以通过JS去读取和写入；audio、video元素则有 play、pause 等事件，JS同样可以操作它们；JS还可以读取和更改元素的CSS样式。JS就是要操作这些，凡元素对应拥有的可操作的东西，JS都能做，设计JS时就是这么设想的。

马黑黑

红影 发表于 2024-1-7 19:33
你把它们对比着，只是想让我们看得更清楚

主要是我会经常使用箭头函数，大家要看懂我的代码，如果不懂箭头函数，那会有困难，所以专门将两种函数的写法分析给大家看。