Salesforce Javascript(二) 箭头函数

渴望统一 發表於 2020-10-3 16:11:00

本篇参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
我们在Salesforce LWC学习(十) 前端处理之 list 处理 篇中简单地介绍了一些数组常用的list的方法，其中可以看到(item,index) => {//TODO}的模式，比如 demo中forEach的写法
<div class="cnblogs_code">
<pre>inputFields.forEach(field => {
field.reset();
});</pre>
</div>
前端不好的童鞋（包括我）可能也没有细想，毕竟这个是规范，而且文档就这么写的，就正常用了，深入学习一下，这种模式在js中叫做箭头函数。
我们在程序中经常声明函数表达式，比如以下两种声明函数的方式。
<div class="cnblogs_code">
<pre>//第一种
let function_expression = function (]]) {
statements
};
//第二种
function name(]]) {

}</pre>
</div>
这种函数好处是可重用，但是有时候我们需要的只是完成某种特定功能的一个匿名的函数，不需要其他人调用，这时候我们可以考虑箭头函数，他的优点是比函数表达式更简洁，更适用于在那些本来需要匿名运行的地方，比如对某一数组进行sort，不对所有的数组sort，只是某个数组特定的sort，我们更方便写法就是使用箭头函数。比如 integerArray这个数组实现了按照数字大小进行排序。简简单单的一行表达式，便可以将这个功能实现。
<div class="cnblogs_code">
<pre>this.integerArray.sort((a,b) => a - b);</pre>
</div>
箭头表达式基本概念有了以后，说一下箭头表达式的语法。
 1. 全格式写法：全格式写法通常用于参数超过一个，处理逻辑超过1行的情况，我们针对多个参数直接使用逗号分隔，使用（）对他们进行维护到一组，然后 => 以后在花括号{}中进行逻辑语句的书写。
<div class="cnblogs_code">
<pre>(param1, param2, …, paramN) => { statements } </pre>
</div>
 比如下面的例子为校验页面中所有的 input是否满足入力条件，不满足的会在通过checkValidity暴露出来。这里的 reduce方法里面需要添加的就是一个函数，我们在这里就使用箭头函数去搞定这个功能，使整体代码看上去更简洁。两个参数使用()来包含，方法体使用大括号{}来包含逻辑。
<div class="cnblogs_code">
<pre>let allInputList = Array.from(this.template.querySelectorAll('lightning-input'));
const allValid = allInputList.reduce((validSoFar, inputFields) => {
inputFields.reportValidity();
return validSoFar && inputFields.checkValidity();
}, true);</pre>
</div>
2. 当逻辑处理只有一行格式写法：当参数包含一个或者多个，但是逻辑处理只有一行可以考虑以下的写法。
<div class="cnblogs_code">
<pre>(param1, param2, …, paramN) => expression 这种写法相当于(param1, param2, …, paramN) =>{ return expression; }</pre>
</div>
下面的例子用于对数字进行升序排序，因为逻辑处理只有一行，所以我们只需要通过表达式方式只有一行即可。
<div class="cnblogs_code">
<pre>this.integerArray.sort((a,b) => a - b);</pre>
</div>
3. 有一个参数格式写法：参数区域的括号是可选的，可写可不写，都是正确的方式。如果后面的操作逻辑也只有一行，也可以按照2步骤中不写大括号内容{}
<div class="cnblogs_code">
<pre>// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements } 等价于singleParam => { statements }</pre>
</div>
下面的例子用于lwc中输入框的内容重置，因为参数区域只有一个参数，所以可以不用使用括号。
<div class="cnblogs_code">
<pre>const inputFields = this.template.querySelectorAll(
'lightning-input-field'
);
if (inputFields) {
inputFields.forEach(field => {
field.reset();
});
}</pre>
</div>
下面是来自官方的demo。
<div class="cnblogs_code">
<pre>elements.map(function(element) {
return element.length;
}); // 返回数组：

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
return element.length;
}); // 

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
return element.length;
}); // 

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // </pre>
</div>
除了这种方式的箭头函数，箭头函数也可以有一个简写体或者常见的块体。
比如我们常规的函数写法为：
<div class="cnblogs_code">
<pre>var func = (x, y) => { return x + y; }; //常规编写明确的返回值</pre>
</div>
一个参数使用箭头函数可以省略成
<div class="cnblogs_code">
<pre>var func = x => x * x; </pre>
</div>
所以来一个进行练习，下面是使用箭头函数声明的函数，常规函数应该写成什么呢？
<div class="cnblogs_code">
<pre>let add = x => y => x + y;</pre>
</div>
答案如下：
<div class="cnblogs_code">
<pre>const add = function(x) {
return function(y) {
return x + y;
}
}</pre>
</div>
我们想要调用这个方法只需要 add(x)(y) 即可。
总结：本篇针对js基础薄弱的小伙伴简单地介绍了箭头函数的使用，在我们日常工作中这种写法司空见惯，不过还是要掌握好基础比较好。篇中有错误地方欢迎指出，有不懂欢迎留言。

</div>
<div id="MySignature" role="contentinfo">
作者：zero
博客地址：http://www.cnblogs.com/zero-zyq/
本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接 
如果文章的内容对你有帮助，欢迎点赞~
为方便手机端查看博客，现正在将博客迁移至微信公众号：Salesforce零基础学习，欢迎各位关注。 
来源：https://www.cnblogs.com/zero-zyq/p/13762556.html

頁: [1]

琼殿技术论坛's Archiver

Salesforce Javascript(二) 箭头函数