点击查看【music163】
箭头函数是函数表达式的一种更简洁的写法，它由三部分组成(参数)``=>``{函数体}

箭头函数有两点需要注意：

  • 箭头函数不会绑定this、arguments属性
  • 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）

    箭头函数的简写优化

优化一: 如果只有一个参数()可以省略（没有参数括号得保留）

  1. let num = [1, 3, 2];
  2. num.forEach(item => { console.log(item) });

优化二: 如果函数执行体中只有一行代码, 那么可以省略函数体花括号

  • 并且这行代码的返回值会作为整个箭头函数的返回值，换句话说就是自动返回右侧表达式的值 ```javascript // 有多行表达式，就需要显示加上 return 来表示返回 let num = [1, 3, 2]; let newNum = num.filter(item => { return item % 2 == 0 }) console.log(newNum);

// 函数体只有一行不写花括号且会自动返回 let newNum1 = num.filter(item => item % 2 == 0 ) console.log(newNum1);

  1. 利用这个返回值的特点，可以进行链式代码调用
  2. ```javascript
  3. let num = [1, 3, 2];
  4. let result = num.filter(item => item % 2 == 0)
  5.                 .map(item => item * 2);
  6. console.log(result);

注意: 如果函数执行体是一个对象, 那么需要给这个对象加上()，才能正常执行

这是在优化二的基础上，表达式只有一行可以省去花括号的特性，假设这一行就是一个对象。这就造成歧义，对象的花括号和函数体的花括号都是一样的，引擎无法识别了。

  1. // 此括号会被解析成函数体的花括号，导致无法执行
  2. let bar = () => { name: 'zs', age: 18 };
  3. console.log(bar);
  5. // 用括号包裹
  6. let obj = () => ( { name: 'zs', age: 18 } );
  7. console.log(obj); // 正常执行返回整个函数：() => ( { name: 'zs', age: 18 } )