网站
引入
函数用来把一段代码封装起来，需要的时候再调用。
如果一段逻辑会重复使用，就适合写成函数，这样代码更清楚，也更方便维护。
正文
定义
定义
函数是可以重复执行的一段代码，可以接收参数，也可以返回结果。
简单理解：函数就是给一段代码起名字，后面通过这个名字来执行它。
语法
最常见的函数声明写法：
function 函数名(参数) {
// 要执行的代码
return 返回值;
}例如：
function sayHello() {
console.log("你好");
}
sayHello();function 表示声明函数，sayHello 是函数名，sayHello() 表示调用函数。
函数声明
函数声明是最基础、最常见的写法。
function add() {
console.log(1 + 2);
}
add();函数声明之后，不会自动执行，需要手动调用。
函数调用
调用函数时，要写函数名和小括号 ()。
function showMessage() {
console.log("学习 JS 函数");
}
showMessage();如果只写函数名，不写 ()，函数不会执行。
showMessage;这只是拿到函数本身，不是执行函数。
参数
参数是调用函数时传进去的数据。
function sayHello(name) {
console.log("你好，" + name);
}
sayHello("Tom");
sayHello("Jerry");name 是参数，"Tom" 和 "Jerry" 是调用函数时传入的数据。
参数可以让函数更灵活，同一个函数可以处理不同的数据。
多个参数
函数可以有多个参数，参数之间用逗号 , 分隔。
function add(a, b) {
console.log(a + b);
}
add(1, 2);
add(10, 20);调用时传入的数据会按照顺序对应参数。
返回值
return 用来把函数执行后的结果交回去。
function add(a, b) {
return a + b;
}
let result = add(1, 2);
console.log(result);这里 add(1, 2) 的结果是 3，然后保存到 result 里。
如果函数没有写 return，默认返回 undefined。
function sayHello() {
console.log("你好");
}
let result = sayHello();
console.log(result);sayHello() 里没有 return，所以 result 是 undefined。
return 的作用
return 有两个常见作用：
- 把结果返回给函数外部
- 结束函数执行
function checkAge(age) {
if (age < 18) {
return "未成年";
}
return "成年人";
}
console.log(checkAge(16));
console.log(checkAge(20));函数执行到 return 后，后面的代码就不会继续执行。
函数表达式
函数也可以保存到变量里。
const sayHello = function () {
console.log("你好");
};
sayHello();这种写法叫函数表达式。
注意：函数表达式要先创建，再调用。
配合事件使用
函数经常和事件一起使用，用来处理用户操作。
<button id="btn">点击</button>const btn = document.querySelector("#btn");
function handleClick() {
console.log("按钮被点击了");
}
btn.addEventListener("click", handleClick);这里 handleClick 是一个函数，点击按钮时浏览器会调用它。
常见写法
| 写法 | 作用 |
|---|---|
function fn() {} | 声明一个函数 |
fn() | 调用函数 |
function fn(name) {} | 声明带参数的函数 |
return value; | 返回函数执行结果 |
const fn = function () {}; | 函数表达式 |
特点
- 函数用于封装一段可以重复执行的代码
- 函数声明后不会自动执行，需要调用
- 调用函数要写小括号
() - 参数是传入函数的数据
return用来返回结果，也会结束函数执行- 没有
return的函数默认返回undefined - 函数可以作为事件处理函数使用
理解
函数可以理解为一个工具。
把常用操作做成工具，以后需要时直接调用，不用每次都重新写一遍。
参数就是使用工具时传进去的材料，return 就是工具处理完之后给出的结果。
我理解函数的重点是：先封装一段逻辑，再在需要的时候调用它。
引出
理解了函数之后，可以继续学习 JS 自定义函数，进一步练习自己封装功能。
后续还可以学习 JS 函数调用方式、JS apply 和 call、JS 箭头函数 和 JS 闭包，理解函数在不同场景中的用法。