- 浏览: 1110889 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
一、简介
箭头函数(Arrow Function)是 ES6 (ECMAScript2015)中的新语法特性。
它是函数表达式的一种简写形式,非常适合面向过程(相对于面向对象而言)的函数式编程。
但是它也有诸多限制和“缺点”,比如:没有自己的 this 对象,没有 arguments 参数,没有 prototype 属性,不能当作构建函数使用(无法用new关键字)等等。
下面将逐一介绍。
二、语法
1、常规写法
2、参数的简写
如果只有一个参数,则可以省略小括号。
如果没有参数,则不能省略。
3、函数体的简写
如果只有一个 statements 表达式,则可以省略后面的 花括号。
此时等价于把 表达式 返回。
但是,如果表达式为一个 JSON 对象,则需要用小括号扩起来。
本小节综合例子:
即:函数体上加花括号{},就要写 return 语句,不然什么也不返回。
4、支持多参 和 给参数设置默认值
5、支持列表结构参数解析
同样,如果参数为一个 JSON 对象,则需要用小括号扩起来。
6、书写格式:不要换行
不要将参数和箭头写在二行中,它们需要写在同一行中。
下面展示一个综合示例:
三、箭头函数没有自己的 this 对象
在箭头函数出现之前,new 出来的函数对象,都有一个 this 属性,指向该对象本身。
然而在箭头函数中,没有 this 对象。因此不存在外层this被重写或本身this被覆盖的问题。
1、不存在 外层 this 被重写问题
【错误】常规的写法:外层 this 被 window 取代
【正确】常规写法:借用一个 that。
【正确】箭头函数:外层的 this 被成功传递
2、不存在 本身this被覆盖问题
调用 call 或 apply 函数时,无法给定一个 this 对象给 箭头函数。
四、箭头函数没有 arguments 对象
箭头函数没有隐式的 arguments 数组对象。
五、箭头函数没有 prototype 属性
六、箭头函数不能使用 new 关键字
七、箭头函数不能单独使用 yield 关键字
不能直接在 箭头函数 中 使用 yield 关键字(除非它被嵌套在其它函数中)。
所以 箭头函数 不能直接作为 Generator 使用。
八、在逻辑运算中,需要用小括号把 箭头函数 括起来
引用:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2409009
=
箭头函数(Arrow Function)是 ES6 (ECMAScript2015)中的新语法特性。
它是函数表达式的一种简写形式,非常适合面向过程(相对于面向对象而言)的函数式编程。
但是它也有诸多限制和“缺点”,比如:没有自己的 this 对象,没有 arguments 参数,没有 prototype 属性,不能当作构建函数使用(无法用new关键字)等等。
下面将逐一介绍。
二、语法
1、常规写法
(param1, param2, …, paramN) => { statements }
2、参数的简写
如果只有一个参数,则可以省略小括号。
如果没有参数,则不能省略。
//只有一个参数 singleParam => { statements } //没有参数 () => { statements }
3、函数体的简写
如果只有一个 statements 表达式,则可以省略后面的 花括号。
此时等价于把 表达式 返回。
// 函数体只有一个表达式,省略后面的花括号 { } (param1, param2, …, paramN) => expression // 等价于: (param1, param2, …, paramN) => { return expression; } // 注意:不等价于: (param1, param2, …, paramN) => { expression } // 此表达式表示,什么也没有返回!!! //
但是,如果表达式为一个 JSON 对象,则需要用小括号扩起来。
(param1, param2, …, paramN) => ({name:"John", age:18})
本小节综合例子:
var arr = [1, 4, 9, 16]; // var mapedArr1 = arr.map( x => x*2 ); var mapedArr2 = arr.map( x => { x*2 } ); var mapedArr3 = arr.map( x => { return x*2 } ); console.log(mapedArr1); //> Array [2, 8, 18, 32] console.log(mapedArr2); //> Array [undefined, undefined, undefined, undefined] console.log(mapedArr3); //> Array [2, 8, 18, 32]
即:函数体上加花括号{},就要写 return 语句,不然什么也不返回。
4、支持多参 和 给参数设置默认值
// 多参数 ...rest (param1, param2, ...rest) => { statements } // 参数默认值 (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
5、支持列表结构参数解析
var arr = [1, 2]; var f = ([a, b] = arr, {x: c} = {x: a + b}) => a + b + c; f(); // 6
同样,如果参数为一个 JSON 对象,则需要用小括号扩起来。
// 参数结构化解析 var f = ({length}) => length; // 参数结构体:{length} 等价于 {length: ""}
6、书写格式:不要换行
不要将参数和箭头写在二行中,它们需要写在同一行中。
// 错误 var func = () => 1; // SyntaxError: expected expression, got '=>'
下面展示一个综合示例:
// // 下面的写法,都会将 materials 转换为 [8, 6, 7, 9] 并输出。 var materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium']; // 1. 常规 console.log( materials.map(function(material) { return material.length; }) ); // 2. 箭头函数 console.log( materials.map((material) => { return material.length; }) ); // 3. 简写的箭头函数 console.log( materials.map(material => material.length) ); // 4. 简写 + 参数结构解析 的 箭头函数 console.log( //表示传递进的参数的结构是这样的:{ length: '' } materials.map(({length}) => length) ); //
三、箭头函数没有自己的 this 对象
在箭头函数出现之前,new 出来的函数对象,都有一个 this 属性,指向该对象本身。
然而在箭头函数中,没有 this 对象。因此不存在外层this被重写或本身this被覆盖的问题。
1、不存在 外层 this 被重写问题
【错误】常规的写法:外层 this 被 window 取代
function Person() { this.age = 0; setInterval(function growUp() { if(this.age) this.age++; console.log(this === window); // true console.log(this.age === undefined); // true }, 1000); } var p = new Person(); // 因为是调用 window 对象的 setInterval 方法, // 所以 this 指向 window /* 多说一句,window 的 setInterval 方法内部实现可能是这样的: window.setInterval = function(func, time){ this.invoke = func; //... } 参数中传递的function参数被设定成为了 window 对象的一个属性。 所以调用时,参数中的 this 指向的是 window 对象。 */
【正确】常规写法:借用一个 that。
function Person() { var that = this; that.age = 0; setInterval(function growUp() { that.age++; console.log(that.age); }, 1000); } var p = new Person();
【正确】箭头函数:外层的 this 被成功传递
function Person(){ this.age = 0; setInterval(() => { this.age++; console.log(this.age); }, 1000); } var p = new Person();
2、不存在 本身this被覆盖问题
调用 call 或 apply 函数时,无法给定一个 this 对象给 箭头函数。
var adder = { base: 1, add: function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base: 2 }; // 把 b 作为 this 对象传入,结果不起作用。 return f.call(b, a); } }; console.log(adder.add(1)); // 结果:2 console.log(adder.addThruCall(1)); // 结果:仍然是 2
四、箭头函数没有 arguments 对象
箭头函数没有隐式的 arguments 数组对象。
// 例子一: var arguments = [3, 2, 1]; var arr = () => arguments[0]; arr(); // 3 // 例子二: function foo(n) { // 此处的 arguments 对象是 foo 函数的, // 不是 f 箭头函数的。因为它没有。 var f = () => arguments[0] + n; return f(); } foo(2); // 4
五、箭头函数没有 prototype 属性
var Foo = () => {}; console.log(Foo.prototype); // undefined
六、箭头函数不能使用 new 关键字
var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor
七、箭头函数不能单独使用 yield 关键字
不能直接在 箭头函数 中 使用 yield 关键字(除非它被嵌套在其它函数中)。
所以 箭头函数 不能直接作为 Generator 使用。
八、在逻辑运算中,需要用小括号把 箭头函数 括起来
let callback; callback = callback || function() {}; // ok callback = callback || (() => {}); // ok callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments
引用:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2409009
=
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2578为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2320刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 600点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1610jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1681HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3967浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 94925 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 662效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 718jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 656attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2191JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1116前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 842详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 925通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4292概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10491. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 883函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 703一、用法 undefined 关键字有两种用法: 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 651一、Comparison Overview 1. Speed ...
相关推荐
箭头函数是ES6中最具代表性的新特性之一,它提供了一种更加简洁、易读的函数定义方式。 箭头函数的主要特点包括: 1. **this的绑定**:在传统JavaScript函数中,`this`的值取决于函数的调用方式。然而,在箭头函数...
总的来说,《ECMAScript 6 入门》这本书详细讲解了这些新特性,不仅适合初学者入门,也对有一定经验的开发者深入理解ES6有极大的帮助。阅读这本书,将使你能够更好地利用ES6的特性编写高效、易于维护的JavaScript...
ES6(ECMAScript 2015)标准中引入了一种新的函数表达式——箭头函数(Arrow Function)。箭头函数提供了一种更简洁的函数写法,它主要有以下几个特点: 1. **简洁语法**:箭头函数允许省略`function`关键字,直接...
其次,箭头函数(Arrow Function)改变了函数的定义方式,其语法更为紧凑,且箭头函数内部的`this`指向更为清晰,解决了回调函数中`this`指向不一致的难题。 在变量声明方面,ES6 引入了let和const关键字。let允许...
JavaScript ES6函数式编程入门经典是一本针对JavaScript开发者,尤其是初学者的教程,旨在帮助他们掌握ES6(ECMAScript 2015)的新特性,并深入理解函数式编程的概念和实践。函数式编程是一种编程范式,它强调将计算...
2. **箭头函数** (`Arrow functions`):ES6引入的新语法,简化了函数定义,如`() => this.setState({pressed: true})}>`,箭头函数内部的`this`指向定义时所在的作用域,而不是调用时的作用域,这解决了回调函数中`...
随着ECMAScript 6(简称ES6)的发布,JavaScript获得了许多新的语法特性,极大地提升了开发效率和代码可读性。本教程将全面深入地探讨这些特性,并结合数据结构、算法、系统以及网络知识,为开发者提供一个全面的...
ECMAScript 6(简称ES6)是JavaScript语言的第六版,于2015年正式发布,引入了大量新特性,极大增强了JavaScript的编程能力。ES6 Succinctly是一本专注于ES6特性的教程书籍,旨在帮助开发者快速理解和掌握ES6的新...
### ECMAScript 6 (ES6) 技术扫盲 #### 1. let、const 和 block 作用域 在 ES6 中引入了 `let` 和 `const` 关键字来替代原有的 `var` 来声明变量。这些新关键字不仅提供了更好的作用域控制,而且也避免了一些与 `...
ES6(ECMAScript 2015)为JavaScript语言引入了箭头函数(Arrow Functions)这一新的函数类型,旨在简化函数定义并解决传统函数中this绑定问题。本文将详细探讨ES6中箭头函数的注意细节。 首先,箭头函数的定义使用...
胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上...
ECMAScript 6,简称ES6,是JavaScript语言的一个重要版本,它在2015年正式发布,引入了大量的新特性和语法改进,为前端开发带来了显著的提升。ES6的发布标志着JavaScript语言向更现代化、更强大和更规范的方向发展。...
9. ES6新特性:随着ECMAScript 6(ES6)的发布,JavaScript引入了许多新特性,如类(class)、模块(module)、箭头函数(arrow function)等,这些都丰富了面向对象编程的能力。 通过以上内容,我们可以了解到...
自ECMAScript 6(简称ES6)发布以来,JavaScript引入了许多新特性,如类(class)、模块(module)、箭头函数(arrow function)、模板字符串(template literals)等,大大提高了代码的可读性和可维护性。...
2015年,随着ECMAScript 6(ES6)的发布,JavaScript迎来了重大更新,引入了诸多新特性,如类(Class)、模块(Module)、箭头函数(Arrow Function)、解构赋值(Destructuring Assignment)等。这些新特性极大地...
ES6(ECMAScript 2015)引入了许多新特性,如类(class)、箭头函数(arrow function)、模板字符串(template literals)和解构赋值(destructuring assignment),这些都极大地提升了JavaScript的可读性和开发效率...