建议使用 let 和 const 定义变量
一、普通函数
1.1 定义
function 方法名称 (形参1,形参2,形参3...){
封装代码;
封装代码;
封装代码;...
}
function 方法名称 (形参1,形参2,形参3...){
封装代码;
封装代码;
封装代码;...
return value;
}
1.2调用
方法名称 (形参1,形参2,形参3...)；
1.3示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>function</title>
</head>
<body>
<script>
//无参数
function speak() {
console.log("你好，张三");
}
speak();
//无返回值
function hello(name) {
console.log("你好，" + name);
}
hello("ZhangSan");
//有返回值
function getAge(age) {
return age;
}
console.log("你好，我的年龄是：" + getAge(20));
</script>
</body>
</html>
二、函数表达式
2.1 定义
const 变量名称 = function (形参1,形参2,形参3...){
封装代码;
封装代码;
封装代码;...
}
const 变量名称 = function 方法名称 (形参1,形参2,形参3...){
封装代码;
封装代码;
封装代码;...
}
2.2调用
变量名称 (形参1,形参2,形参3...)；
2.3示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>function</title>
</head>
<body>
<script>
//无参数
const speak = function () {
console.log("你好，张三");
};
speak();
//无返回值
const name = function hello(name) {
console.log("你好，" + name);
};
name("ZhangSan");
//有返回值
const age = function (age) {
return age;
};
console.log("你好，我的年龄是：" + age(20));
</script>
</body>
</html>
三、匿名函数
3.1 定义
匿名函数是一个没有函数名的函数。
3.2 注意事项
- 不能只定义不调用
function (name){
console.log("你好，" + name);
}
<!--运行结果-->
Uncaught SyntaxError: Function statements require a function name
3.3 用途
3.3.1 作为其他函数参数
<!-- 作为其他函数的参数 -->
function execute(fun) {
fun();
}
execute(function () {
console.log("我的名字");
});
3.3.2 作为其他函数返回值
<!-- 作为其他函数的返回值 -->
function getName(name) {
const pre = "我的名字是:";
return function () {
console.log(pre + name);
};
}
const name = getName("zhangshan");
name();
3.3.3 作为立即执行函数
<!-- 作为立即执行函数 -->
(function () {
console.log("作为立即执行函数");
})();
(function (name) {
console.log("作为立即执行函数" + name);
})("zhangsan");
四、箭头函数
4.1 定义
const 变量名称 = (形参1,形参2,形参3...)=>{
封装代码;
封装代码;
封装代码;...
}
4.2调用
变量名称 (形参1,形参2,形参3...)；
4.3示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Arrow Func</title>
</head>
<body>
<script></script>
</body>
</html>
<script>
//无返回值
const name = () => {
console.log("我的名字");
};
name();
//有返回值
const age = () => {
return 20;
};
console.log("我的年龄是", age());
</script>
参考链接