ES6 箭头函数(Arrow Functions)
ES6 箭头函数(Arrow Functions)
ES6 可以使用 “箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。
一、语法
具有一个参数的简单函数
var single = a => a
single('hello, world') // 'hello, world'
多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加
var add = (a, b) => a + b
add(3, 8) // 11
函数体多条语句需要用到大括号
var add = (a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了
var getHash = arr => {
// ...
return ({
name: 'Jack',
age: 33
})
}
直接作为事件 handler
document.addEventListener('click', ev => {
console.log(ev)
})
作为数组排序回调
var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
if (a - b > 0 ) {
return 1
} else {
return -1
}
})
arr // [1, 2, 3, 4, 8, 9]
二、注意点
typeof 运算符和普通的 function 一样
var func = a => a
console.log(typeof func); // "function"
instanceof 也返回 true,表明也是 Function 的实例
console.log(func instanceof Function);
this 固定,不再善变
obj = {
data: ['John Backus', 'John Hopcroft'],
init: function() {
document.onclick = ev => {
alert(this.data) // ['John Backus', 'John Hopcroft']
}
// 非箭头函数
// document.onclick = function(ev) {
// alert(this.data) // undefined
// }
}
}
obj.init()
这个很有用,再不用写 me,self,_this 了,或者 bind。
箭头函数不能用 new.
var Person = (name, age) => {
this.name = name
this.age = age
}
var p = new Func('John', 33) // error
不能使用 argument
var func = () => {
console.log(arguments)
}
func(55)
ES6 箭头函数(Arrow Functions)的更多相关文章
- 深入浅出ES6(七):箭头函数 Arrow Functions
作者 Jason Orendorff github主页 https://github.com/jorendorff 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教 ...
- 箭头函数 Arrow Functions/////////////////////zzz
箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...
- es6 箭头函数(arrow function) 学习笔记
箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...
- ES6箭头函数Arrow Function
果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...
- es6箭头函数讲解
es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...
- es6箭头函数 this 指向问题
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...
- ES6 In Depth: Arrow functions
Arrows <script language="javascript"> <!-- document.bgColor = "brown"; ...
- ES6 — 箭头函数
一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
随机推荐
- 判断Mouse事件源类型
//鼠标事件源类型 public enum MouseEventSource { Mouse, Pen, Touch } /// <summary> /// MainWindow.xaml ...
- 如何开发一个产品级的Node.js 应用
介绍 Node.js是一个开源的javascript运行时环境.非常简单可以快速开发一个网络应用.这个平台运行在Linux.OSX和Windows,而且运行在这个平台上的应用都是用javascript ...
- MapGIS Mobile开发
1. 先将Android开发环境配置好(包括Java + Eclipse + Android SDK) 2. 加载API类库(运行MapGIS 10 AndroidSDK.exe可以加载Mobile框 ...
- (小数化分数)小数化分数2 -- HDU --1717
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1717 举例: 0.24333333…………=(243-24)/900=73/3000.9545454…… ...
- new Date()之参数传递
JavaScript下,new Date([params]),参数传递有以下五种方式: 1.new Date("month dd,yyyy hh:mm:ss"); 2.new Da ...
- Java中的时间日期处理
程序就是输入——>处理——>输出.对数据的处理是程序员需要着重注意的地方,快速.高效的对数据进行处理时我们的追求.其中,时间日期的处理又尤为重要和平凡,此次,我将把Java中的时间日期处理 ...
- Python学习-40.Python中的迭代
在上一篇中,我们使用了生成器来创建了一个可遍历的对象.在其中,我们使用了yield关键字. Python我也正在学习中,因此对yield的本质我并不熟悉,但是,在C#中,yield关键字则是语法糖,其 ...
- Python学习-36.Python中的字典解释
具体同列表解释,也是使用if来进行过滤 例子,生成一个新的字典,并且是原来字典的键值交换. mydict={'Tom':18,'Mary':20} print({value:key for key,v ...
- LinkedBlockingQueue源码解析(1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2 ...
- C博客作业03—函数
1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1 学习体会 知道了程序的模块化设计可使程序结构清晰,简化复杂问题,解决代码重复问题 学会使用自定义函数简化主函数,使代码 ...