本篇参考: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);
箭头表达式基本概念有了以后,说一下箭头表达式的语法。
(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);
(param1, param2, …, paramN) => expression 这种写法相当于(param1, param2, …, paramN) =>{ return expression; }
下面的例子用于对数字进行升序排序,因为逻辑处理只有一行,所以我们只需要通过表达式方式只有一行即可。
this.integerArray.sort((a,b) => a - b);
// 当只有一个参数时,圆括号是可选的:
(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基础薄弱的小伙伴简单地介绍了箭头函数的使用,在我们日常工作中这种写法司空见惯,不过还是要掌握好基础比较好。篇中有错误地方欢迎指出,有不懂欢迎留言。