常规函数转箭头函数示例
本帖最后由 马黑黑 于 2024-1-7 12:48 编辑我们先看一个求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 次方。我没有对输入进行检测，不过，如果运算式子不合法，运算结果会给出提示。
<style>
#shu, #mi { color: red; padding: 2px 6px; }
</style>
<p> 求 <span id="shu" contentEditable="true">10</span> 的 <span id="mi" contentEditable="true">3</span> 次方 ：<output id="Res">运算结果</output></p>
<p><br><button id="normalFn" type="button" value="">传统函数</button> <button id="arrowFn" type="button" value="">箭头函数</button></p>
<script>
function nPow(a,b) {
return Math.pow(a,b);
};
aPow = (a, b) => Math.pow(a, b);
normalFn.onclick = () => Res.textContent = nPow(shu.textContent,mi.textContent) || '算式非法';
arrowFn.onclick = () => Res.textContent = aPow(shu.textContent,mi.textContent) || '算式非法';
</script> 二楼代码：<style>
#shu, #mi { color: red; padding: 2px 6px; }
</style>
<p>求 <span id="shu" contentEditable="true">10</span> 的 <span id="mi" contentEditable="true">3</span> 次方 ：<output id="Res">运算结果</output></p>
<p><button id="normalFn" type="button" value="">传统函数</button> <button id="arrowFn" type="button" value="">箭头函数</button></p>
<script>
function nPow(a,b) {
return Math.pow(a,b);
};
aPow = (a, b) => Math.pow(a, b);
normalFn.onclick = () => Res.textContent = nPow(shu.textContent,mi.textContent) || '算式非法';
arrowFn.onclick = () => Res.textContent = aPow(shu.textContent,mi.textContent) || '算式非法';
</script>
nPow和aPow分别返回了不同函数的结果，结果是一样的{:4_187:} 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样式、也可以有，看需要不需要设置按 ...
哦哦，原来是来自内部设置{:4_187:} 马黑黑 发表于 2024-1-7 14:05
这两个自设函数其实内容是一样的，一个是常规写法的函数，一个是箭头函数，它们做相同的事情：求a的b次方 ...
你把它们对比着，只是想让我们看得更清楚{:4_187:} 马黑黑 发表于 2024-1-7 14:06
这就是JS的功能：JS可以读取DOM指定节点（元素）的值，值可以是字符串、数值等。
这个读取的方式有点超乎想象{:4_203:} 吃瓜群众来了{:4_173:} 和楼上千羽一起吃瓜{:4_189:} 红影 发表于 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
你把它们对比着，只是想让我们看得更清楚
主要是我会经常使用箭头函数，大家要看懂我的代码，如果不懂箭头函数，那会有困难，所以专门将两种函数的写法分析给大家看。