arrow function
简介
JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:
// Arrow function:
[5, 8, 9].map(item => item + 1); // -> [6, 9, 10]
// Classic function equivalent:
[5, 8, 9].map(function(item) {
return item + 1;
}); // -> [6, 9, 10]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
当箭头函数有一个参数时,参数两边的括号是可有可无的,但是还是有括号看起来看清楚。
const foo = bar => bar + 1;
const bar = (baz) => baz + 1;
- 1
- 2
箭头函数不带参数时,必须要用括号,比如:
const foo = () => "foo";
- 1
如果函数体不是只一行,应该用花括号,并显式地返回(如果需要返回值)。
const foo = bar => {
const baz = 5;
return bar + baz;
};
foo(1); // -> 6
- 1
- 2
- 3
- 4
- 5
arguments object
箭头函数不会暴露 argument 对象,所以,argument 将简单地指向当前scope内的一个变量。
arguments object 是所有函数中的一个本地变量。你可以通过 arguments 对象引用函数的入参。这个对象包含传给这个函数的每个入参的入口,索引从0开始,例如:
arguments[0]
arguments[1]
arguments[2]
const arguments = [true];
const foo = x => console.log(arguments[0]);
foo(false); // -> true
- 1
- 2
- 3
- 4
基于此,箭头函数也不知道它的调用者。
当缺少arguments object时,可能会有所限制(极少数情况),其余的参数一般可以做为替代。
const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);
foo(false); // -> false
- 1
- 2
- 3
- 4
绑定this的值
箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。
看下面的例子, Cow 类有一个方法在1秒后输出sound。
class Cow {
constructor() {
this.sound = "moo";
}
makeSoundLater() {
setTimeout(() => {
console.log(this.sound);
}, 1000);
}
}
var myCow = new Cow();
var yourCow = new Cow();
yourCow.sound = "moooooo";
myCow.makeSoundLater();
yourCow.makeSoundLater();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
在 makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater(), this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound 了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。
隐式返回值
箭头函数可以通过省略掉小括号做到隐式返回值。
const foo = x => x + 1;
foo(1); // -> 2
- 1
- 2
当使用隐式返回时,Object Literal 必须用花括号括起来。
Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。
const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
- 1
- 2
显示返回值
const foo = x => {
return x + 1;
}
foo(1); // -> 2
- 1
- 2
- 3
- 4
- 5
语法
x => y // Implicit return
x => { return y } // Explicit return
(x, y, z) => { ... } // Multiple arguments
(() => { ... })() // Immediately-invoked function expression
arrow function的更多相关文章
- 廖雪峰js教程笔记5 Arrow Function(箭头函数)
为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...
- JavaScript学习笔记(十二)——箭头函数(Arrow Function)
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- ES6 new syntax of Arrow Function
Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...
- arrow function and bind
Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...
- JS面试Q&A(续2): Rest parameter,Arrow function 等
rest parameter 和 Destructuring assignment. function fun1(...theArgs) { console.log(theArgs.length);} ...
- arrow function、function.apply
An arrow function expression has a shorter syntax than a function expression and does not have its o ...
- Arrow function restore
Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...
- [ES6] 06. Arrow Function =>
ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...
- 10th week task -3 Arrow function restore
Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...
随机推荐
- C++中的纯虚方法
在学习数据结构中优先级队列时遇到纯虚方法的定义,一时没想起来,便查了一下. 1.纯虚方法解决什么样的问题,为什么要设计出纯虚方法? 考虑下面的需求,基类声明了一个方法,这个方法只针对具体的子类才有意义 ...
- 无序hashset与hashmap让其有序
今天迭代hashmap时,hashmap并不能按照put的顺序,迭代输出值.用下述方法可以: HashMap<String,String> hashmap = new LinkedHash ...
- Bigger-Mai 养成计划,Python基础巩固二
模块初识1.标准库2.第三方库import sys sys.path #自己的本文件名不可为sys.py#输出模块存储的环境变量sys.argv #打印脚本的相对路径sys.argv[2] #取第二个 ...
- BZOJ 3473 字符串
思路 广义SAM的题目,先全部插入,然后每个字符串在SAM上匹配,如果发现当前sz小于k(就是前缀不满足条件),就跳fail(找前缀的后缀,就是找子串)到满足条件为止,然后一个满足条件的节点,它的所有 ...
- 加sogou 和wps
刚装完系统,装常用工具: sogoupinyin / wps linux ==========sogoupinyin=========================1.sogou linux 下载d ...
- vue+vuex 回退定位到初始位置
先放出两张图(没错,你还在9012,做为一名资深设计师我唯一的技能点就是留白),简单说明下问题未做回退定位(从落地页回退,每次都回到A位置)想死啊有木有,每次都需要手动重新定位来选择,你大哥看到你做个 ...
- 用《捕鱼达人》去理解C#中的多线程
线程是进程中某个单一顺序的控制流,是程序运行中的调度单位,是程序执行流的最小单位,一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成. 线程自己不拥有系统资源,只拥有一点儿在运行中必 ...
- Java核心知识盘点(三)- 框架篇-Spring
Spring的两大核心特性:IOC.AOP IOC:控制反转.依赖注入,它并不是一种技术实现,而是一种思想.把一些相互依赖对象的创建.协调工作交给Spring容器来管理,每个对象只需要关注其自身的业务 ...
- zookeeper调试命令
转载自 https://www.cnblogs.com/andy6/p/7674028.html 一.zkServer.sh 1.查看 zkServer.sh 帮助信息[root@bigdata05 ...
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...