为什么要使用箭头函数

Published:

语法

要使用箭头函数，如字面上的意思就是使用像箭头的符号来定义函数。以下是一些箭头函数的例子：

// 一般函數
function functionName(parameter) {
  // ...
}

// 无参数
const functionName = _ => {
  // ...
};

// 一个参数
const functionOne = parameter => {
  // ...
};

// 有多个参数
const functionTwo = (parameter, parameterTwo) => {
  // ...
};

// 解构参数
const functionTwo = ({ parameter }) => {
  // ...
};

// 有默认参数
const functionTwo = (parameter = {}) => {
  // ...
};

functionName​ 是函数的名字，parameter​ 是函数的参数，可以有多个参数。如果没有参数，就使用空括号 ()​ 代替。

特性

隐式返回 (Implicit Return)

一般函数通常需要返回值，使用 return​ 关键字。如果没有返回值，将返回 undefined​。箭头函数有一个特性，就是可以使用隐晦的方式来返回值，顾名思义，就是不需要使用 return​ 关键字来返回值，可参考以下示例：

// 单行
const implicit = value => value;

// 多行(使用小括弧框起来)
const implicit = value => value;

// 错误写法(对象必须用小括号包起来，避免被误解为函数的开头)
const implicit = () => {
  value: "Hello";
};
implicit(); // undefined

// 返回对象正确写法
const implicit = () => ({ value: "Hello" });
implicit(); // { value: "Hello" }

不存在 arguments​

箭头函数沒有 arguments 是因其继承了其父作用域的 arguments 。这意味着在当前箭头函数中引用 arguments 时，实际上是引用父作用域中的 arguments。我们可以使用以下的方式來获得所有传入匿名函数的参数。

const myFunction = (...args) => {
  console.log(args);
};

myFunction(1, 2, 3); // 输出 [1, 2, 3]

不存在自身的 this​

箭头函数并没有 this​ ，因此如果访问 this​，则会从外层作用域中继承 this​。

window.bar = "window 苹果";
const bar = "全局苹果";
const foo = {
  bar: "局部橙子",
  normalFunction: function () {
    // 传统函数，在这里创建一个作用域
    console.log("1", this.bar); // 1 局部橙子
    setTimeout(() => {
      console.log("2", this.bar); // 2 局部橙子
      console.log("3", this); // 3 foo
    }, 1000);
  },
  arrowFunction: () => {
    // 如果使用箭头函数，this 指向外层的作用域
    console.log("4", this.bar); // 4 window 苹果
    setTimeout(() => {
      console.log("5", this.bar); // 5 window 苹果
      console.log("6", this); // 6 window
    }, 1000);
  },
};

foo.normalFunction();
foo.arrowFunction();

实际应用

场景一：简化代码

最常见的使用箭头函数的方式是使代码更为简洁，但需要注意简洁的代码并不总是代表更好的可读性。在适当的情况下，使用箭头函数来简化代码是可行的，并没有一个硬性的规则，取决于个人偏好和习惯。

// 一般函数的例子：
function add(a, b) {
  return a + b;
}

// 使用箭头函数来简化代码：
const add = (a, b) => a + b;

// 一般函数的例子：
document.getElementById("increment").addEventListener("click", function () {
  count++;
});

// 使用箭头函数来简化代码：
document.getElementById("increment").addEventListener("click", () => {
  count++;
});

// 将一个数组中的每个元素转换成 li 标签
// 结果：[ "<li>John</li>", "<li>Mary</li>", "<li>Peter</li>" ]
const persons = ["John", "Mary", "Peter"];
persons.map(person => `<li>${person}</li>`);

场景二：让 this 指向外层作用域

就像前面全局苹果和局部橙子的例子一样，适当地使用箭头函数可以让 this 指向外层作用域，达成特定的目的。

结语

灵活运用箭头函数不仅可以使代码更加简洁，本身还具有一些独特的属性值得探索！

‍