JS箭头函数用处/示例

更新日期: 2019-07-21阅读: 2.2k标签: 函数

在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:

  • 更简短的函数;
  • 更直观的作用域和this的绑定(不绑定this)

因为这些优点,箭头函数比起其他形式的函数声明更受欢迎。比如,受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。
然而,箭头函数有优点,也有一些“缺点”。这就需要在使用的时候做一些权衡。下面就从为何用、怎么用、何时用,这个三部分做一些总结。


为何用?

引入箭头函数有两个方面的作用:更简短的函数并且不绑定this

更简短的函数

var elements = ['h1', 'div', 'span', 'section'];

elements.map(function(el) {
  return el.length; // 返回数组: [2, 3, 4, 7]
});

// 从上面的普通函数可以改写为如下的箭头函数
elements.map((el) => {
  return el.length; // [2, 3, 4, 7]
});

// 当箭头函数只有一个参数时,可以省略参数的圆括号
elements.map(el => {
  return el.length; // [2, 3, 4, 7]
});

// 当箭头函数体只有一个`return`语句时,可以省略`return`关键字和方法体的花括号
elements.map(el => el.length); // [2, 3, 4, 7]

// 在这个例子中,因为我们只需要`length`属性,所以可以使用参数结构
// 需要注意的是字符串`"length"`是我们想要获得的属性名称,而`elLength`则只是个变量名,可以替换成任意合法的变量名
elements.map(({ "length": elLength }) => elLength); // [2, 3, 4, 7]

不绑定this

在箭头函数出现之前,每个新定义的函数都有它自己的this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中则为undefined,如果该函数被作为"对象方法"调用则为基础对象等)。
而箭头函数并没有它自己的执行上下,实际上,这就意味着代码中的this和arguments都是继承它的父函数

const obj = {
  name: 'test object',
  createAnonFunction: function() {
    return function() { 
      console.log(this.name);
      return this;
    }
  },
  createArrowFunction: function() {
    return () => {
      console.log(this.name);
      return this;
    }
  }
}

const anon = obj.createAnonFunction();
anon(); // undefined
anon() === window // true
  
const arrow = obj.createArrowFunction();
arrow(); // 'test object'
arrow() === obj // true

第一个匿名参数有自己的上下文(指向的并非obj对象),当被赋值给anon变量且调用时,this发生了改变,指向了window。另一个,箭头函数与创建它的函数有相同的上下文,故指向obj对象。

通过call或者apply调用

由于箭头函数没有自己的this指针,通过call()或者apply()方法调用一个函数时,只能传递参数(不能绑定this),它们的第一个参数会被忽略。

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addByCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };
    return f.call(b, a)
  }
}

adder.add(1); // 2
adder.addByCall(1); // 2

不绑定arguments

箭头函数不绑定Arguments对象。因此,在本示例中,arguments只是引用了封闭作用域内的arguments:

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的arguments对象,arguments[0]是 n
  return f(); 
}

foo(1); // 2

在大多数情况下,使用剩余参数是相对使用arguments对象的更好选择。

function foo(arg) {
  var f = (...agrs) => args[0];
  return f(arg);
}
foo(1); // 1

function foo(arg1, arg2) {
  var f = (...args) => args[1];
  return f(arg1, arg2);
}
foo(1, 2); // 2


怎么用?

优化代码

比如你有一个有值的数组,你想去map遍历每一项,这时箭头函数就非常推荐:

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());

一个及其常见的例子就是返回一个对象的某个值:

const names = objects.map(object => object.name);

类似的,当用forEach来替换传统for循环的时候,实际上箭头函数会直观的保持this来自于父一级:

this.examples.forEach(example => {
  this.runExample(example);
});

Promise和Promise链

当在编写异步编程时,箭头函数也会让代码更加直观和简洁。
这是箭头函数的理想位置,特别是如果您生成的函数是有状态的,同时想引用对象中的某些内容。

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});

对象转换

箭头函数的另一个常见而且十分有用的地方就是用于封装的对象转换。
例如在vue.js中,有一种通用模式,就是使用mapState将Vuex存储的各个部分,直接包含到Vue组件中。
这涉及到定义一套mappers,用于从原对象到完整的转换输出,这在组件问题中实十分有必要的。这一系列简单的转换,使用箭头函数是最合适不过的。比如:

export default {
  computed: {
    ...mapState([
      'results',
      'users'
    ])
  }
}


何时用?(不推荐使用场景)

使用new操作符

箭头函数不能用作构造器,和new一起使用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

使用prototype属性

箭头函数没有prototype属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

使用yield关键字

yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作生成器。

深层调用

如果你将函数定义为箭头函数,并且在他们之间来回调用,当你调试bug的时候你将被代码困惑,甚至得到如下的错误信息:

{anonymous}(){anonymous}(){anonymous}(){anonymous}(){anonymous}() //anonymous


常见错误

返回对象字面量

记住用params => { object: literal }这种简单的语法返回对象字面量是行不通的。

var func = () => { foo: 1 };
func(); // undefined

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

这是因为花括号{}里面的代码被解析为一系列语句(即 foo 被认为是一个标签,而非对象字面量的组成部分)。
所以,记得用圆括号把对象字面量包起来:

var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

解析顺序

虽然箭头函数中的箭头不是运算符,但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

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

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

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


更多示例

使用三元运算符

var foo = a => a > 15 ? 15 : a;

foo(10); // 10
foo(16); // 15

闭包

// 标准的闭包函数
function Add() {
  var i = 0;
  return function() {
    return (++i);
  }
}

var add = Add();
add(); // 1
add(); // 2

// 箭头函数体的闭包(i = 0是默认参数)
var Add = (i = 0) => { return (() => (++i)) };
var add = Add();
add(); // 1
add(); // 2

// 因为仅有一个返回,return及括号也可以省略
var Add = (i = 0) => () => (++i);

箭头函数递归

var fact = (x) => ( x == 0 ?  1 : x*fact(x-1) );
fact(5);       // 120


总结

箭头函数是JS语言中十分特别的属性,并且使很多情形中代码更加的变化莫测。尽管如此,就像其他的语言特性,他们有各自的优缺点。因此我们使用它应该仅仅是作为一种工具,而不是无脑的简单的全部替换为箭头函数。


链接: https://www.fly63.com/article/detial/4829

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!