理解前端函数

📜 JS 基础函数🔢 高阶函数💚 Vue 3 函数📊 总结对比

📜

函数的三种写法

函数声明 · 函数表达式 · 箭头函数

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必须放在参数列表的最后一位，否则会报错。