Salesforce Javascript(二) 箭頭函數

本篇參考：//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基礎薄弱的小夥伴簡單地介紹了箭頭函數的使用，在我們日常工作中這種寫法司空見慣，不過還是要掌握好基礎比較好。篇中有錯誤地方歡迎指出，有不懂歡迎留言。

Tags:

VirMach 便宜 VPS

QNews

QNews