js箭头函数

以你之姓@ 2022-11-01 13:57 218阅读 0赞

# 1、箭头函数 #

ES6 新增了箭头函数。

箭头函数表达式的语法比普通函数表达式更简洁。

实例：

let sum = (a, b) => a + b;
    
    /* 这个箭头函数是下面这个函数的更短的版本：
    
    let sum = function(a, b) {
      return a + b;
    };
    */
    
    alert( sum(1, 2) ); // 3

可以看到 `(a, b) => a + b` 表示一个函数接受两个名为 `a` 和 `b` 的参数。在执行时，它将对表达式 `a + b` 求值，并返回计算结果。

*  如果我们只有一个参数，还可以省略掉参数外的圆括号，使代码更短。
 *  例如：

let double = n => n * 2;
    // 差不多等同于：let double = function(n) { return n * 2 }
    
    alert( double(3) ); // 6

*  如果没有参数，括号将是空的（但括号应该保留）：

let sayHi = () => alert("Hello!");
    
    sayHi()

*  **如果函数部分只是一个语句，则可以省略 return 关键字和大括号 \{\}，这样做是一个比较好的习惯:**
 *  **例如：**
 *      let fun = (a, b) => a + b;
         console.log(fun(10, 20));
        // 普通函数
        let fun=function(a,b){
               return a+b;
                   
         } 
        console.log(fun(10, 20));
 *  **如果函数有多个语句需要用\{\}包括；**
 *  **例如：**

let fu = (a, b) => {
                    let sum = a + b;
                    return sum;
                }
                console.log(fu(3, 4));

## [箭头函数没有 “this”][_this] ##

箭头函数都没有自己的 **this**。 不适合定义一个 **对象的方法**。

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

例如：

let group = {
      title: "Our Group",
      students: ["John", "Pete", "Alice"],
    
      showList() {
        this.students.forEach(
          student => alert(this.title + ': ' + student)
        );
      }
    };
    
    group.showList()

这里 `forEach` 中使用了箭头函数，所以其中的 `this.title` 其实和外部方法 `showList` 的完全一样。那就是：`group.title`。

## [箭头函数没有 “arguments”][_arguments] ##

箭头函数也没有 `arguments` 变量。

[_this]: https://zh.javascript.info/arrow-functions#jian-tou-han-shu-mei-you-this
[_arguments]: https://zh.javascript.info/arrow-functions#jian-tou-han-shu-mei-you-arguments