婚纱网站设计首页,建设小程序怎么挂失,济宁人才网招聘信息网,手机版在线公章制作生成目录 1 函数的定义与调用2 参数与返回值3 默认参数4 将功能拆分成小函数5 函数表达式6 箭头函数7 低代码中的函数总结 在用低代码开发软件的时候#xff0c;除了我们上两节介绍的变量、条件语句外#xff0c;还有一个重要的概念叫函数。函数是执行特定功能的代码片段#xf… 目录 1 函数的定义与调用2 参数与返回值3 默认参数4 将功能拆分成小函数5 函数表达式6 箭头函数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); // 输出775 函数表达式
函数表达式允许我们将一个函数赋值给一个变量这样函数就可以像其他变量一样被传递和使用。
let add function(a, b) {return a b;
};console.log(add(3, 4)); // 输出76 箭头函数
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); // 输出777 低代码中的函数
低代码对函数进行了可视化的封装其实是借助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 18console.log(age1)console.log(您的姓名userName)console.log(您的姓名:${userName})console.log(typeof userName)sayHi(userName)}模块被导出之后可以使用import关键字导入import后边的名字可以自己命名在示例的最后一行代码我们就调用了导入的方法sayHi
总结
这一篇其实就是低代码开发必须需要弄明白的事情如果不懂函数是干啥的后边你在调用前后端API的时候往往一头雾水。前端是啥后端又是啥就会有种看代码一点都看不明白的感觉。
