JavaScript简餐——关于箭头函数

---

前言

写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计（第4版）》一书时出现的各个知识点。虽是对读书的笔记和总结，但是希望它轻量、简洁、犀利，不会引起阅读疲劳，可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理，来达到个人复习总结和分享知识的目的。

---

一、箭头函数

1.箭头函数定义

在ES6中新增了使用箭头（=>）语法定义函数表达式的能力。箭头函数和函数表达式的定义在形式上不同，但在行为上一样。任何可以使用函数表达式的地方都可以使用箭头函数。直接来看一个箭头函数和函数表达式的例子：

const add = (x, y) => {  // 箭头函数
  return x, y;
};

const sub = function (x, y) { // 函数表达式
  return x - y;
};

console.log(add(2, 3)); // 3
console.log(sub(5, 2)); // 3

箭头函数的语法简单，比较适合嵌入函数的场景：

const arr = [1, 2, 3];
const doubledArray = arr.map((item) => {
  return item * 2;
});
console.log(doubledArray); //  [2, 4, 6]

2.区别参数个数的不同写法

如果只有一个参数，就可以不用括号。只有在没有参数，或者多个参数的情况下才需要使用括号：

//以下这两种方式都可以：
const double = (x) => {
  return x * 2;
};
const double = x => {
  return x * 2;
};

//没有参数需要括号：
const sayHello = () => {
  console.log("Hello JavaScript!!!");
};

//多个参数需要括号：
const concatString = (str1, str2) => {
  return str1 + str2;
};

//无效的写法：
const concatString = str1, str2 => {
  return str1 + str2;
};

3.有无花括号的区别

箭头函数中可以不用花括号，但这样会改变函数的行为。使用花括号就说明包含函数体，可以在其中包含多条语句，跟常规的函数一样。如果不使用花括号后面就只能有一行代码，比如一个赋值操作，或者一个表达式。而且，省略花括号会隐式返回后面跟的这行代码的值。就是说不用加return就直接返回了，加return会报错。来看例子：

const add = (x, y) => {
  return x + y;
};

const sub = (x, y) => x - y; // 这儿别加return，加了报错呜呜呜

//不加花括号还可以执行赋值操作
let myName = "";
const setName = (name) => (myName = name);
console.log(setName("Jack")); // Jack

4.箭头函数的限制

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用arguments、super和new.target，也不能用作构造函数，它也没有prototype属性。

---

总结

以上就是今天要讲的内容，今天简单地介绍了一下箭头函数以及它不同写法的区别和箭头函数中的限制。下一篇我们来看具体理解一下函数中的参数。撒花~