微搭低代码入门03函数

目录

• [1 函数的定义与调用](#1 函数的定义与调用)
• [2 参数与返回值](#2 参数与返回值)
• [3 默认参数](#3 默认参数)
• [4 将功能拆分成小函数](#4 将功能拆分成小函数)
• [5 函数表达式](#5 函数表达式)
• [6 箭头函数](#6 箭头函数)
• [7 低代码中的函数](#7 低代码中的函数)
• 总结

在用低代码开发软件的时候，除了我们上两节介绍的变量、条件语句外，还有一个重要的概念叫函数。函数是执行特定功能的代码片段，比如我们在小程序中，如果点击提交按钮，往往希望将数据存入数据源中，那这个数据写入的过程我们就可以封装成一个函数。

我们本篇介绍函数的语法，示例，结合低代码中的自定义方法的编写深入理解函数的概念。

1 函数的定义与调用

语法：

使用function关键字进行定义。其基本语法如下：

function functionName(parameters) {
    // 函数体
    return something;
}

• functionName：函数名。
• parameters：函数的参数，可以有多个，用逗号分隔。
• functionBody：函数体，包含要执行的代码。
• return：返回语句，用于返回函数的结果。

调用

定义函数后，可以通过函数名加上一对圆括号（可以包含参数）来调用它：

functionName(arguments);

在调用的时候可以传入参数

2 参数与返回值

函数参数是函数定义时声明的变量，用于在函数体中接收传递的数据。

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

在这个例子中，add函数接受两个参数a和b，并返回它们的和。

函数可以通过return语句返回一个值。如果函数没有return语句，则默认返回undefined。

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

调用greet("Alice")将返回"Hello, Alice"。

3 默认参数

在ES6中，引入了默认参数的概念，允许在函数定义时为参数指定默认值。

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

调用greet()将返回"Hello, Guest"，而调用greet("Alice")将返回"Hello, Alice"。

4 将功能拆分成小函数

将一个大的任务拆分成小任务可以提高代码的可读性和可维护性。例如，将温度从摄氏度转换为华氏度的过程可以拆分成几个小函数：

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 函数表达式

函数表达式允许我们将一个函数赋值给一个变量，这样函数就可以像其他变量一样被传递和使用。

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

console.log(add(3, 4)); // 输出：7

6 箭头函数

ES6引入了箭头函数，提供了一种更简洁的函数定义方式。箭头函数没有自己的this，继承外层作用域的this值。

示例：

let add = (a, b) => {
    return a + b;
};

console.log(add(3, 4)); // 输出：7

如果箭头函数的函数体只有一条语句，可以省略花括号和return关键字，这条语句的结果将自动返回。

let square = x => x * x;

console.log(square(5)); // 输出：25

使用箭头函数对前面的示例进行重构：

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 低代码中的函数

低代码对函数进行了可视化的封装，其实是借助es6的模块的概念进行了封装。比如我们在代码区可以创建两类方法，一种是页面生命周期的方法，一种是全局生命周期的方法。不同的生命周期标识方法的可见范围不同。我们将演示两类方法的使用。

先看第一类，页面生命周期的方法

export default function({event, data}) {
    // 函数体
}

这种语法是ES6模块导出语法的一种应用，它定义了一个默认导出的函数。这个函数接受一个对象作为参数，这个对象包含了event和data两个属性。event表示我们的事件对象，data表示在方法调用的时候传入的参数

比如我们在上边举了一个温度转换的函数，我们把他放入自定义方法中

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
}

创建一个按钮，调用我们的自定义方法

export default：这是ES6中用于导出模块成员的语法。当使用export default时，你可以导出一个函数、类、对象或任何其他类型的值。微搭这样写，通常我们是让代码更好管理，一个方法对应组件上的一个事件调用。

在{}里边写你具体的逻辑，如果需要将逻辑再封装成函数的，可以把你封装的function放在export上边。初学低代码的遇到这就开始乱写了，任意拼凑代码，为啥我看你的教程，我自己一写就报错呢？可不报错，连基础的语法都没有遵守。

第二种就是我们的全局方法，全局方法语法如下

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

全局比页面的多了一个方法的名字sayHi这个可以自己改，改成自己好认的名字。比如全局定义之后，一个是可以在组件里调用，还有就是可以在页面的方法里调用，调用的示例：

import sayHi from '../../common/sayHi'
export default function({event, data}) {

  let userName = '张三'
  console.log(userName)
  userName= '李四'
  console.log(userName)
  const age = 18
  
  console.log(age+1)

  console.log('您的姓名：'+userName)
  console.log(`您的姓名:${userName}`)
  console.log(typeof userName)
  sayHi(userName)

}

模块被导出之后，可以使用import关键字导入，import后边的名字可以自己命名，在示例的最后一行代码我们就调用了导入的方法sayHi

总结

这一篇其实就是低代码开发必须需要弄明白的事情，如果不懂函数是干啥的，后边你在调用前后端API的时候往往一头雾水。前端是啥，后端又是啥，就会有种看代码一点都看不明白的感觉。