美文网首页让前端飞程序员我爱编程
【ES6】箭头函数用法与深入理解

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

作者: 虹猫1992 | 来源:发表于2018-12-06 23:05 被阅读26次

语法

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

参考文章

相关文章

  • ES5和ES6中的this问题及注意事项(附带少许作用域链查找知

    本文参考以下文章: 1、深入理解ES6箭头函数的this以及各类this面试题总结 2、深入理解ES6箭头函数中的...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

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

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

  • 深入理解ES6中的箭头函数

    JavaScript深入理解ES6中的箭头函数 箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,a...

  • 箭头函数与普通函数的区别

    箭头函数与普通函数的区别,实质是我们是否理解了箭头函数,在我刚开始接触ES6时,印象中的箭头函数与普通函数的区别就...

  • 吃透ES6----简洁优雅的箭头函数

    基本用法 箭头函数可能是ES6最有特点的新特性了,它不仅可以让代码变得优美,而且更直观利于理解。 如果箭头函数不需...

  • 阮一峰ES6学习(二):箭头函数

    基本用法 ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数...

  • ES6箭头函数

    基本用法ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数,...

  • 箭头函数

    基本用法ES6 允许使用“箭头”(=>)定义函数。 上面的箭头函数等同于: 如果箭头函数不需要参数或需要多个参数,...

  • ES6 函数的扩展2---箭头函数

    基本用法 ES6允许使用‘箭头’(=>)定义函数`。 等同于 在箭头函数不需要或者需要多个参数 如果箭头函数的代码...

网友评论

    本文标题:【ES6】箭头函数用法与深入理解

    本文链接:https://www.haomeiwen.com/subject/lwwacqtx.html