详细讲解ES6箭头函数语法(附Demo)

目录

  • 前言
  • 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 关键字和函数名来声明函数
  • 函数表达式:通过 constlet 关键字将函数赋值给一个变量或常量

传统函数语法与箭头函数相比更为冗长,在一些情况下,箭头函数的简洁性和清晰性更受欢迎
但传统函数语法在 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
  })
}

截图如下:

详细讲解ES6箭头函数语法(附Demo)_第1张图片

你可能感兴趣的:(前端,es6,前端,ecmascript)