js 箭头函数简单入门

箭头函数

---

箭头函数是ES6（ECMAScript 2015）引入的新特性，它提供了一种更简洁的函数表达式写法。箭头函数不仅在语法上更加精炼，而且在词法作用域的 this 行为上也有所不同。下面是一些关于箭头函数的基本用法和特点：

1.简洁的语法

箭头函数的语法比传统函数表达式更简洁。例如，一个简单的函数可以这样写：

const add = (x, y) => x + y;

​ 如果函数体只有一条语句并且是返回语句，你可以省略花括号 {} 和 return 关键字：

const square = x => x * x;

​ 如果箭头函数只有一个参数，括号 () 也可以省略：

const double = x => x * 2;

2.this 的词法绑定

在传统函数表达式中，this 的值是在运行时确定的，取决于函数的调用上下文。但在箭头函数中，this 的值是在定义时就绑定了，它继承自外围作用域的 this 值。这对于事件处理器、回调函数等非常有用，因为你不需要使用 .bind(this) 或者其他方法来确保正确的 this 上下文。

let obj = {
  value: 10,
  logValue: function() {
    setTimeout(() => console.log(this.value), 1000);
  }
};

obj.logValue(); // 输出 10

3.参数列表

箭头函数可以接受零个或多个参数。如果参数多于一个，需要用圆括号包围：

const sum = (a, b) => a + b;

4.函数体

箭头函数的函数体可以是单条语句或包含多条语句的代码块。如果是代码块，你需要使用花括号 {} 包围，并且显式使用 return 关键字：

const greet = name => {
  let greeting = 'Hello, ';
  return greeting + name;
};

5.缩写形式

当函数体是一个表达式时，可以省略 return 和 {}：

const multiply = (x, y) => x * y;

6.与 arguments 关键字

箭头函数中的 arguments 关键字仍然可用，但它只是一个普通的数组，不像在传统函数中那样是一个类数组对象：

const logArgs = (...args) => console.log(args);
logArgs(1, 2, 3); // 输出 [1, 2, 3]

7.使用 rest 参数

箭头函数可以使用 … 语法来收集多余参数：

const sumAll = (...numbers) => numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sumAll(1, 2, 3, 4)); // 输出 10