目录
- 前言
- 1. 传统函数
- 2. 箭头函数
- 3. 差异比较
- 彩蛋
前言
讲述箭头函数之前，先了解传统函数的格式，方便做一个对比
1. 传统函数
- 函数声明：
function greet() {console.log("Hello!");
}
greet();
- 函数表达式：
const square = function(x) {return x * x;
};
console.log(square(5));
- 匿名函数作为回调：
const numbers = [1, 2, 3];
numbers.forEach(function(number) {console.log(number);
});
- 使用 function 关键字声明的命名函数：
function add(a, b) {return a + b;
}
console.log(add(3, 4));
使用了传统的 function 关键字来声明函数
函数声明和函数表达式都是 JavaScript 中定义函数的常见方式
- 函数声明：通过
function关键字和函数名来声明函数 - 函数表达式：通过
const或let关键字将函数赋值给一个变量或常量
传统函数语法与箭头函数相比更为冗长，在一些情况下，箭头函数的简洁性和清晰性更受欢迎
但传统函数语法在 ES6 之前一直是 JavaScript 中定义函数的主要方式
2. 箭头函数
ES6 引入了箭头函数语法，提供了一种更简洁的方式来定义函数
箭头函数通常用于匿名函数和回调函数中，可以更清晰地表达函数的意图，并且具有词法作用域绑定的特性
- 无参数剪头参数：
const func1 = () => {// 函数体
};
- 单个参数箭头函数：
const func2 = (param) => {// 函数体
};
- 多个参数箭头函数：
const func3 = (param1, param2) => {// 函数体
};
- 简写形式（当函数体只有一条语句时，可以省略大括号和return关键字）：
const func4 = (param) => param * 2;
下面是整体的示例：
// 无参数箭头函数
const greet = () => {console.log("Hello!");
};
greet();// 单个参数箭头函数
const square = (x) => {return x * x;
};
console.log(square(5));// 多个参数箭头函数
const add = (a, b) => {return a + b;
};
console.log(add(3, 4));// 简写形式
const double = (num) => num * 2;
console.log(double(10));
展示了箭头函数的不同用法，包括无参数函数、单个参数函数、多个参数函数以及简写形式
箭头函数通常在需要简洁清晰地定义函数时非常有用
3. 差异比较
单个输出的看，可能感悟不是很深，如果两者放在一起，还是可以看到明显的差异：
// 传统函数示例
function greetTraditional() {return "Hello!";
}// 箭头函数示例
const greetArrow = () => {return "Hello!";
}// 传统函数表达式示例
const squareTraditional = function(x) {return x * x;
};// 箭头函数表达式示例
const squareArrow = (x) => {return x * x;
};// 匿名函数作为回调 - 传统函数
const numbers = [1, 2, 3];
numbers.forEach(function(number) {console.log(number);
});// 匿名函数作为回调 - 箭头函数
numbers.forEach((number) => {console.log(number);
});// 使用 function 关键字声明的命名函数
function addTraditional(a, b) {return a + b;
}// 使用箭头函数声明的命名函数
const addArrow = (a, b) => {return a + b;
};// 简写形式示例
const doubleTraditional = function(num) {return num * 2;
};const doubleArrow = (num) => num * 2;// 输出结果
console.log(greetTraditional()); // Hello!
console.log(greetArrow()); // Hello!console.log(squareTraditional(5)); // 25
console.log(squareArrow(5)); // 25console.log(addTraditional(3, 4)); // 7
console.log(addArrow(3, 4)); // 7console.log(doubleTraditional(10)); // 20
console.log(doubleArrow(10)); // 20
彩蛋
对于实战中应用的场景还是很多的
类似后端方法的传参：
import request from '@/router/axios';export const getList = (current, size, params) => {return request({url: '/api/manong/region/list',method: 'get',params: {...params,current,size,}})
}export const getLazyTree = (parentCode, params) => {return request({url: '/api/manong/region/lazy-tree',method: 'get',params: {...params,parentCode}})
}export const remove = (id) => {return request({url: '/api/manong/region/remove',method: 'post',params: {id,}})
}export const submit = (row) => {return request({url: '/api/manong/region/submit',method: 'post',data: row})
}
截图如下：
