目录引言一、函数的定义方式函数声明最基础推荐优先用函数表达式匿名函数赋值给变量箭头函数ES6 简化写法立即执行函数二、函数的核心特性参数规则return关键字函数的作用箭头函数 vs 普通函数三、使用建议引言函数是 JavaScript 的核心之一本质是封装可重复执行的代码块能接收输入参数、执行逻辑、返回输出结果。它让代码更模块化、易复用也是实现复杂逻辑的基础。一、函数的定义方式函数的定义方式一般分为四种分别为函数声明、函数表达式、箭头函数、立即执行函数函数声明最基础推荐优先用语法function 函数名(参数1, 参数2) { 代码逻辑; return 返回值; }特点存在函数提升可先调用后声明可读性强。代码演示// 定义函数计算两数之和 function add(a, b) { // a、b 是「形参」形式上的参数定义时占位 const result a b; return result; // return 规定返回值没有则默认返回 undefined } // 调用函数传入「实参」实际的参数值 const sum add(3, 5); console.log(sum); // 输出 8 // 函数提升先调用后声明也能执行 const result subtract(10, 4); function subtract(x, y) { return x - y; } console.log(result); // 输出 6函数表达式匿名函数赋值给变量语法const 函数名 function(参数) { 代码逻辑; }特点无函数提升必须先定义后调用适合作为参数传递比如回调函数代码演示// 定义匿名函数表达式 const multiply function(x, y) { return x * y; }; // 调用 const product multiply(2, 6); console.log(product); // 输出 12 // 错误示例无函数提升先调用会报错 // const result divide(8, 2); // 报错divide is not defined const divide function(a, b) { return a / b; };箭头函数ES6 简化写法语法const 函数名 (参数) { 代码逻辑; }特点语法极简、无自己的this核心区别、无arguments对象适合写短逻辑。代码演示// 基础写法多参数 多行逻辑 const calculate (a, b) { const sum a b; const diff a - b; return { sum, diff }; // 返回对象 }; console.log(calculate(5, 3)); // 输出 { sum: 8, diff: 2 } // 简化1单参数可省略括号 const double num num * 2; console.log(double(4)); // 输出 8 // 简化2单行逻辑可省略大括号和 return const square num num * num; console.log(square(6)); // 输出 36立即执行函数语法(function(参数) { 代码逻辑; })(实参);特点定义后立即执行创建独立作用域避免污染全局变量ES6 前常用现在可被let/const块级作用域替代。代码演示// 立即执行函数定义完马上执行 (function(name) { console.log(你好${name}); })(张三); // 输出你好张三二、函数的核心特性参数规则1. 形参 ≠ 实参数量JS 不强制参数数量匹配缺省参数默认undefined多余参数可通过arguments普通函数/...restES6获取。代码演示// 形参2个实参1个 → 第二个参数为 undefined function test(a, b) { console.log(a, b); // 输出 10 undefined } test(10); // 剩余参数...rest接收多余实参为数组 function sum(...nums) { return nums.reduce((total, num) total num, 0); } console.log(sum(1, 2, 3)); // 输出 62. 默认参数ES6给形参设置默认值实参缺少时使用function greet(name 游客) { console.log(欢迎 ${name}); } greet(); // 输出欢迎 游客 greet(李四); // 输出欢迎 李四return关键字函数内执行到return会立即终止后面的代码不再执行无return或return后无值函数默认返回undefined代码演示function test() { return 10; console.log(这行代码不会执行); } console.log(test()); // 输出 10 function empty() { // 无 return } console.log(empty()); // 输出 undefined函数的作用在JS中函数是不可或缺的它可以赋值给变量、作为参数传递给另一个函数回调函数、作为函数的返回值等等。代码演示// 1. 作为参数回调函数 function doSomething(callback) { const data 处理后的数据; callback(data); // 执行传入的函数 } // 传入箭头函数作为回调 doSomething((res) { console.log(res); // 输出处理后的数据 }); // 2. 作为返回值 function add(num) { // 返回一个新函数 return (x) x num; } const add5 add(5); console.log(add5(3)); // 输出 8箭头函数 vs 普通函数特性普通函数箭头函数this指向动态调用时定静态定义时继承外层arguments有参数伪数组无构造函数可作为构造函数不能new 会报错prototype有原型对象无三、使用建议普通业务逻辑优先用「函数声明」可读性高短逻辑 / 回调函数用「箭头函数」简洁需要独立作用域ES6 前用立即执行函数现在用let/const块级作用域替代避免陷阱箭头函数不要用于对象方法、构造函数this指向问题