详细讲解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)); // 25

console.log(addTraditional(3, 4)); // 7
console.log(addArrow(3, 4)); // 7

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

截图如下：