详细讲解ES6箭头函数语法（附Demo）

前言

讲述箭头函数之前，先了解传统函数的格式，方便做一个对比

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})
}