📜 JS 基础函数🔢 高阶函数💚 Vue 3 函数📊 总结对比
📜
函数的三种写法
函数声明 · 函数表达式 · 箭头函数
| 写法 | 语法 | 核心特点 |
|---|---|---|
| 函数声明 | function fn() {} | 有提升，可在声明前调用 |
| 函数表达式 | const fn = function() {} | 无提升，必须先声明再使用 |
| 箭头函数 | const fn = () => {} | 更简洁，无自己的 this（最常用） |
JavaScript
复制
// ① 函数声明（有变量提升） function greet(name) { return "你好，" + name } greet("前端") // → "你好，前端" // ② 函数表达式 const greet = function(name) { return `你好，${name}` } // ③ 箭头函数（Vue 3 最常用） const greet = (name) => `你好，${name}` // 只有一个参数时，括号可省略 const double = n => n * 2💡
Vue 3 开发建议在<script setup>中推荐全部使用箭头函数，代码更简洁，也不会有 this 指向问题。
🎯
函数参数特性
默认参数 · 剩余参数 · 解构参数
JavaScript
复制
// ① 默认参数：调用时未传则使用默认值 const add = (a, b = 0) => a + b add(5) // → 5（b 默认为 0） add(5, 3) // → 8 // ② 剩余参数：收集多余参数到数组 const sum = (...nums) => nums.reduce((a, b) => a + b, 0) sum(1, 2, 3, 4) // → 10 // ③ 解构参数：直接取对象中的字段 const show = ({ name, age }) => `${name} 今年 ${age} 岁` show({ name: "博客", age: 20, grade: "大二" }) // → "博客 今年 20 岁"⚠️
注意剩余参数...nums必须放在参数列表的最后一位，否则会报错。