在用低代碼開發(fā)軟件的時候，除了我們上兩節(jié)介紹的變量、條件語句外，還有一個重要的概念叫函數(shù)。函數(shù)是執(zhí)行特定功能的代碼片段，比如我們在小程序中，如果點擊提交按鈕，往往希望將數(shù)據(jù)存入數(shù)據(jù)源中，那這個數(shù)據(jù)寫入的過程我們就可以封裝成一個函數(shù)。

我們本篇介紹函數(shù)的語法，示例，結合低代碼中的自定義方法的編寫深入理解函數(shù)的概念。

1 函數(shù)的定義與調(diào)用

語法：

使用function關鍵字進行定義。其基本語法如下：

function functionName(parameters) {// 函數(shù)體return something;
}

• functionName：函數(shù)名。
• parameters：函數(shù)的參數(shù)，可以有多個，用逗號分隔。
• functionBody：函數(shù)體，包含要執(zhí)行的代碼。
• return：返回語句，用于返回函數(shù)的結果。

調(diào)用

定義函數(shù)后，可以通過函數(shù)名加上一對圓括號（可以包含參數(shù)）來調(diào)用它：

functionName(arguments);

在調(diào)用的時候可以傳入?yún)?shù)

2 參數(shù)與返回值

函數(shù)參數(shù)是函數(shù)定義時聲明的變量，用于在函數(shù)體中接收傳遞的數(shù)據(jù)。

function add(a, b) {return a + b;
}

在這個例子中，add函數(shù)接受兩個參數(shù)a和b，并返回它們的和。

函數(shù)可以通過return語句返回一個值。如果函數(shù)沒有return語句，則默認返回undefined。

function greet(name) {return "Hello, " + name;
}

調(diào)用greet(“Alice”)將返回"Hello, Alice"。

3 默認參數(shù)

在ES6中，引入了默認參數(shù)的概念，允許在函數(shù)定義時為參數(shù)指定默認值。

function greet(name = "Guest") {return "Hello, " + name;
}

調(diào)用greet()將返回"Hello, Guest"，而調(diào)用greet(“Alice”)將返回"Hello, Alice"。

4 將功能拆分成小函數(shù)

將一個大的任務拆分成小任務可以提高代碼的可讀性和可維護性。例如，將溫度從攝氏度轉換為華氏度的過程可以拆分成幾個小函數(shù)：

function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}function toFahrenheit(celsius) {return celsius * 9 / 5 + 32;
}function convertTemperature(temp, from, to) {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
}let celsius = 25;
let fahrenheit = convertTemperature(celsius, 'C', 'F');
console.log(fahrenheit); // 輸出：77

5 函數(shù)表達式

函數(shù)表達式允許我們將一個函數(shù)賦值給一個變量，這樣函數(shù)就可以像其他變量一樣被傳遞和使用。

let add = function(a, b) {return a + b;
};console.log(add(3, 4)); // 輸出：7

6 箭頭函數(shù)

ES6引入了箭頭函數(shù)，提供了一種更簡潔的函數(shù)定義方式。箭頭函數(shù)沒有自己的this，繼承外層作用域的this值。

示例：

let add = (a, b) => {return a + b;
};console.log(add(3, 4)); // 輸出：7

如果箭頭函數(shù)的函數(shù)體只有一條語句，可以省略花括號和return關鍵字，這條語句的結果將自動返回。

let square = x => x * x;console.log(square(5)); // 輸出：25

使用箭頭函數(shù)對前面的示例進行重構：

let toCelsius = fahrenheit => (fahrenheit - 32) * 5 / 9;let toFahrenheit = celsius => celsius * 9 / 5 + 32;let convertTemperature = (temp, from, to) => {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
};let celsius = 25;
let fahrenheit = convertTemperature(celsius, 'C', 'F');
console.log(fahrenheit); // 輸出：77

7 低代碼中的函數(shù)

低代碼對函數(shù)進行了可視化的封裝，其實是借助es6的模塊的概念進行了封裝。比如我們在代碼區(qū)可以創(chuàng)建兩類方法，一種是頁面生命周期的方法，一種是全局生命周期的方法。不同的生命周期標識方法的可見范圍不同。我們將演示兩類方法的使用。

先看第一類，頁面生命周期的方法

export default function({event, data}) {// 函數(shù)體
}

這種語法是ES6模塊導出語法的一種應用，它定義了一個默認導出的函數(shù)。這個函數(shù)接受一個對象作為參數(shù)，這個對象包含了event和data兩個屬性。event表示我們的事件對象，data表示在方法調(diào)用的時候傳入的參數(shù)

比如我們在上邊舉了一個溫度轉換的函數(shù)，我們把他放入自定義方法中

function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}function toFahrenheit(celsius) {return celsius * 9 / 5 + 32;
}function convertTemperature(temp, from, to) {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
}
export default function ({ event, data }) {let celsius = 25;let fahrenheit = convertTemperature(celsius, 'C', 'F');console.log(fahrenheit); // 輸出：77
}

創(chuàng)建一個按鈕，調(diào)用我們的自定義方法


export default：這是ES6中用于導出模塊成員的語法。當使用export default時，你可以導出一個函數(shù)、類、對象或任何其他類型的值。微搭這樣寫，通常我們是讓代碼更好管理，一個方法對應組件上的一個事件調(diào)用。

在{}里邊寫你具體的邏輯，如果需要將邏輯再封裝成函數(shù)的，可以把你封裝的function放在export上邊。初學低代碼的遇到這就開始亂寫了，任意拼湊代碼，為啥我看你的教程，我自己一寫就報錯呢？可不報錯，連基礎的語法都沒有遵守。

第二種就是我們的全局方法，全局方法語法如下

export default function sayHi() {console.log('Hi LowCode')
}

全局比頁面的多了一個方法的名字sayHi這個可以自己改，改成自己好認的名字。比如全局定義之后，一個是可以在組件里調(diào)用，還有就是可以在頁面的方法里調(diào)用，調(diào)用的示例：

import sayHi from '../../common/sayHi'
export default function({event, data}) {let userName = '張三'console.log(userName)userName= '李四'console.log(userName)const age = 18console.log(age+1)console.log('您的姓名：'+userName)console.log(`您的姓名:${userName}`)console.log(typeof userName)sayHi(userName)}

模塊被導出之后，可以使用import關鍵字導入，import后邊的名字可以自己命名，在示例的最后一行代碼我們就調(diào)用了導入的方法sayHi

總結

這一篇其實就是低代碼開發(fā)必須需要弄明白的事情，如果不懂函數(shù)是干啥的，后邊你在調(diào)用前后端API的時候往往一頭霧水。前端是啥，后端又是啥，就會有種看代碼一點都看不明白的感覺。