【ES6】箭头函数用法与深入理解

综合编程 2018-12-07 阅读原文

语法

ES6 允许使用“箭头”( =
>)定义函数,可以简单的认为箭头的左边是函数的参数,箭头的右边是函数的声明(函数体)。

  1. 具有一个参数的简单函数
// 当只有一个参数时,圆括号是可选的:
// (单一参数) => {函数声明}
// 单一参数 => {函数声明}

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
  1. 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号 ()
    代表参数部分,多个参数之间用逗号间隔。
// 没有参数的函数应该写成一对圆括号。
// () => {函数声明}

var f = () => 5;
// 等同于
var f = function () { return 5 };

// (参数1, 参数2, …, 参数N) => { 函数声明 }
// (参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
  1. 箭头函数的代码块部分多于一条语句,就要使用大括号 {}
    将它们括起来,并且使用 return
    语句返回。
var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
        return a + b
    } else {
        return 0
    }
}
  1. 如果箭头函数 直接返回一个对象
    ,必须在对象外面加上括号 ()
    ,否则会报错。
// 返回对象字面表达式时需给函数体加括号(),否则会报错
// 参数=> ({foo: bar})

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
  1. 箭头函数支持参数列表解构。
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6
  1. 支持 rest
    参数和默认参数。
// (参数1, 参数2, ...rest) => {函数声明}
// (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

let f = (x, y = 1) => x+y;
f(1); // 2

关于 rest
参数和默认参数,可参考《 【ES6】函数默认参数与rest参数

注意点

  1. typeof
    运算符和普通的 function
    一样。
var f = a => a;
console.log(typeof f); // "function"
  1. Function
    的实例, instanceof
    也返回 true
var f = a => a;
console.log(f instanceof Function); // true
  1. 箭头函数不会创建自己的 this
    ,它只会从自己的作用域链的上一层继承 this
    ,而且在箭头函数中, this
    的指向是固定的,不能改变。
// 在箭头函数中,`this`属于词法作用域,直接由上下文确定。
//ES5普通函数
function Man(){
  this.age=22;
  return function(){
    this.age+1;
  }
}
var cala=new Man();
console.log(cala())//undefined

//ES6箭头函数
function Man(){
  this.age=22;
  return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23
  1. 不存在 arguments
    对象。如果要用,可以用 rest
    参数代替。
//没有arguments
var foo = (a,b) => {return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
  1. 不可以当作构造函数,也就是说,不可以使用 new
    命令,否则会抛出一个错误。
//不能使用new 关键字
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor
  1. 箭头函数没有原型。
//没有原型
var Obj = () => {};
console.log(Obj.prototype); 
// undefined
  1. 不可以使用 yield
    命令,因此箭头函数不能用作 Generator
    函数。
  2. 箭头函数在参数和箭头之间 不能换行
var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'
  1. 箭头函数具有与常规函数不同的特殊运算符优先级解析规则。
let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

参考文章

简书

责编内容by:简书阅读原文】。感谢您的支持!

您可能感兴趣的

深入理解ES6之——JS类的相关知识 基本的类声明 类声明以class关键字开始,其后是类的名称;剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号。 class Person { //等价于prototype的构造器 const...
让你的代码更简短,更整洁,更易读的ES6小技巧... 让你的代码更简短,更整洁,更易读的ES6小技巧 写在文章前面 这篇文章翻译自 ES6 tips and tricks to make your code cleaner, shorter, and easier to rea...
exploring-es2016-and-es2017(中文版)—介绍... 关于本书 这本书是关于ECMAScript 2016和ECMAScript 2017这两个Javascript的新版本的。 书中只包含了这两个标准中的新特性。关于此前的版本的信息,请参考我的另两本书(均可免费在线阅读): ...
JS装饰器 参考文章:JS装饰器 详细参考: ES6-decorator(装饰器) 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为。目前,有一个 提案 将这项功能,引入了 ECMAScrip...
ES6的generator函数 generator是什么? generator是ES6提供的一种异步编程解决方案,在语法上,可以把它理解为一个状态机,内部封装了多种状态。执行generator,会生成返回一个遍历器对象。返回的遍历器对象,可以依次遍历generator...