Salesforce Javascript(二) 箭头函数

本篇参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我们在Salesforce LWC学习(十) 前端处理之 list 处理 篇中简单地介绍了一些数组常用的list的方法，其中可以看到(item,index) => {//TODO}的模式，比如 demo中forEach的写法

inputFields.forEach(field => {
    field.reset();
});

前端不好的童鞋（包括我）可能也没有细想，毕竟这个是规范，而且文档就这么写的，就正常用了，深入学习一下，这种模式在js中叫做 箭头函数。

我们在程序中经常声明函数表达式，比如以下两种声明函数的方式。

//第一种
let function_expression = function [name]([param1[, param2[, ..., paramN]]]) {
   statements
};
//第二种
function name([param,[, param,[..., param]]]) {
   [statements]
}

这种函数好处是可重用，但是有时候我们需要的只是完成某种特定功能的一个匿名的函数，不需要其他人调用，这时候我们可以考虑箭头函数，他的优点是比函数表达式更简洁，更适用于在那些本来需要匿名运行的地方，比如 对某一数组进行sort，不对所有的数组sort，只是某个数组 特定的sort，我们更方便写法就是使用箭头函数。比如 integerArray这个数组实现了按照数字大小进行排序。简简单单的一行表达式，便可以将这个功能实现。

this.integerArray.sort((a,b) => a - b);

箭头表达式基本概念有了以后，说一下箭头表达式的语法。

1. 全格式写法：全格式写法通常用于参数超过一个，处理逻辑超过1行的情况，我们针对多个参数直接使用逗号分隔，使用（）对他们进行维护到一组，然后 => 以后在花括号{}中进行逻辑语句的书写。

(param1, param2, …, paramN) => { statements } 

比如下面的例子为校验页面中所有的 input是否满足入力条件，不满足的会在通过checkValidity暴露出来。这里的 reduce方法里面需要添加的就是一个函数，我们在这里就使用箭头函数去搞定这个功能，使整体代码看上去更简洁。两个参数使用()来包含，方法体使用大括号{}来包含逻辑。

let allInputList = Array.from(this.template.querySelectorAll('lightning-input'));
const allValid = allInputList.reduce((validSoFar, inputFields) => {
    inputFields.reportValidity();
    return validSoFar && inputFields.checkValidity();
}, true);

2. 当逻辑处理只有一行格式写法：当参数包含一个或者多个，但是逻辑处理只有一行可以考虑以下的写法。

(param1, param2, …, paramN) => expression 这种写法相当于(param1, param2, …, paramN) =>{ return expression; }

下面的例子用于对数字进行升序排序，因为逻辑处理只有一行，所以我们只需要通过表达式方式只有一行即可。

this.integerArray.sort((a,b) => a - b);

3. 有一个参数格式写法：参数区域的括号是可选的，可写可不写，都是正确的方式。如果后面的操作逻辑也只有一行，也可以按照2步骤中不写大括号内容{}

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements } 等价于singleParam => { statements }

下面的例子用于lwc中输入框的内容重置，因为参数区域只有一个参数，所以可以不用使用括号。

const inputFields = this.template.querySelectorAll(
    'lightning-input-field'
);
if (inputFields) {
    inputFields.forEach(field => {
        field.reset();
    });
}

下面是来自官方的demo。

elements.map(function(element) {
  return element.length;
}); // 返回数组：[8, 6, 7, 9]

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

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

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

除了这种方式的箭头函数，箭头函数也可以有一个简写体或者常见的块体。

比如我们常规的函数写法为：

var func = (x, y) => { return x + y; }; //常规编写 明确的返回值

一个参数使用箭头函数可以省略成

var func = x => x * x;   

所以来一个进行练习，下面是使用箭头函数生命的函数，常规函数应该写成什么呢？

let add = x => y => x + y;

答案如下：

const add = function(x) {
    return function(y) {
        return x + y;
    }
}

我们想要调用这个方法只需要 add(x)(y) 即可。

总结：本篇针对js基础薄弱的小伙伴简单地介绍了箭头函数的使用，在我们日常工作中这种写法司空见惯，不过还是要掌握好基础比较好。篇中有错误地方欢迎指出，又不懂欢迎留言。