理解前端函数

belong_my_offer2026-06-15 10:20

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