ES6学习------箭头函数
2017-12-21 00:00
519 查看
摘要: 上坡的时候真的挺难的,但是只要坚持不懈,就一定可以登上山顶,眺望远方,看到以前很多时候不敢想的风光。
资料源:http://es6.ruanyifeng.com/#docs/function
有一位大牛告诉我,有些学的知识需要记笔记,比如概念性的"怎么处理跨域问题"等;而有些学习就不需要,需要你去写代码,反复地去写,但是一定要看官方文档,因为你自己写的不一定对,尤其是刚开始学习的时候;昨天看ES6的文档,看到函数的部分,感觉又烦躁又长的,瞬间不想学了,今天改变了学习方法,感觉真的轻松了不少,继续加油吧,谢谢我亲爱的大牛卢老师https://my.oschina.net/lpe234
资料源:http://es6.ruanyifeng.com/#docs/function
有一位大牛告诉我,有些学的知识需要记笔记,比如概念性的"怎么处理跨域问题"等;而有些学习就不需要,需要你去写代码,反复地去写,但是一定要看官方文档,因为你自己写的不一定对,尤其是刚开始学习的时候;昨天看ES6的文档,看到函数的部分,感觉又烦躁又长的,瞬间不想学了,今天改变了学习方法,感觉真的轻松了不少,继续加油吧,谢谢我亲爱的大牛卢老师https://my.oschina.net/lpe234
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--加载Traceur的库文件--> <script type="text/javascript" src="../js/traceur.js"></script> <!--将库文件用于浏览器--> <script type="text/javascript" src="../js/browerSystem.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <!--type="module":Traceur 编译器识别 ES6 代码的标志, 编译器会自动将所有type=module的代码编译为 ES5,然后再交给浏览器执行--> <script type="module"> // 1.最基础用法 var f = function (v) { return v; }; console.log(f(1)) var f = v => v; // 第一个v是参数,第二个v是return的东西 console.log(f(2)) // 2.如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分 var f = function(){ return 5; } console.log(f()) var f = () => 10; console.log(f()) var sum = function (num1, num2) { return num1 + num2; } console.log(sum(1, 2)) var sum = (num1, num2) => num1 + num2; console.log(sum(2, 3)) // 3.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。 var sum = (num1, num2) => {return num1 + num2;} console.log(sum(10, 3)) // 4.由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。 let getTempItem = id => ({id: id, name: 'Temp'}); console.log(getTempItem(1)) // 5.如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。 let fn = () => void doesNotReturn(); // doesNotReturn就是es5中{}里面的东西,不用return返回的 console.log(fn()) // 6.箭头函数可以与变量解构结合使用。 function full(person) { return person.first + ' ' + person.last; } console.log(full({first: 1, last: 2})); //这个报错,需要看一下变量结构 const full = ({ first, last }) = first + '' + last; console.log(full({1, 2})) // 7.箭头函数使得表达更加简洁 function isEven(n) { return n % 2 == 0; } console.log(isEven(10)); const isEven = n => n%2 == 0; console.log(isEven(11)) const square = n => n * n; console.log(square(2)) function square(n) { return n * n; } console.log(square(2)) // 8.箭头函数的一个用处是简化回调函数。 let arr = [1, 2, 3]; let val = arr.map(function (x) { return x * x; }); console.log(val) console.log(arr.map(x => x * x)); var values = [2, 7, 3]; var result = values.sort(function (a, b) { return a - b; // 递增排列 }) console.log(result) var result = values.sort((a, b) => b - a); // 递减排列 console.log(result) // 要学习一下rest参数 // 9.使用注意点 // (1).函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象 // (2).不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误 // (3).不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 // (4).不可以使用yield命令,因此箭头函数不能用作 Generator 函数 // 10.this指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42 function foo() { setTimeout(() => { console.log('id:' + this.id); }, 100); } var id = 21; foo.call({id: 42}); // 11.箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域 // 打印信息和文档例子打印信息不一致 function Timer() { this.s1 = 0; this.s2 = 0; setTimeout(() => this.s1++, 1000); // this绑定定义时所在的作用域(即Timer函数) setTimeout(function () { this.s2++; // this指向运行时所在的作用域(即全局对象) }, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100); setTimeout(() => console.log('s2: ', timer.s2), 3100); // 12.箭头函数可以让this指向固定化,这种特性很有利于封装回调函数 // 实际原因是箭头函数根本没有自己的this, // 导致内部的this就是外层代码块的this。 // 正是因为它没有this,所以也就不能用作构造函数。 var handler = { id: '123456', init: function () { // 箭头函数里面的this,总是指向handler对象 document.addEventListener('click', event => this.doSomething(event.type), false); }, doSomething: function (type) { console.log('Handing' + type + 'for' + this.id); } }; console.log(handler) function foo() { setTimeout(() => { console.log(this) console.log('id:', this.id); }, 100); } foo.call({id: 1}); function foo() { console.log(this) var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100) } foo.call({id: 2}) // 13.有几个this // 所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } var f = foo.call({id: 10}); //console.log(f); var t1 = f.call({id: 20})()(); // console.log(t1); var t2 = f().call({id: 30})(); //console.log(t2); var t3 = f()().call({id: 4}); console.log(t3) // 14.除了this, arguments、super、new.target三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量 function foo() { // 箭头函数内部的变量arguments,其实是函数foo的arguments变量 setTimeout(() => { console.log('args:', arguments); }, 1000) } foo(1, 4, 6, 8) // 15.由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向 // 箭头函数没有自己的this,所以bind方法无效,内部的this指向外部的this。 (function () { return [ (() => this.x).bind({x : 'inner'})() ]; }).call({x: 'outer'}) // 16.嵌套的箭头函数 function insert(value) { return {into: function (array) { return {after: function (afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }}; }}; } console.log( insert(2).into([1, 3]).after(1)) let insert = (value) => ({into: (array) => ({after: (afterValue) => { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }})}); console.log(insert(2).into([1, 3]).after(1)); // 17.一个部署管道机制(pipeline)的例子,即前一个函数的输出是后一个函数的输入 const plus1 = a => a +1; const mult2 = a => a *2; console.log(mult2(plus1(5))) </script> </head> <body> </body> </html>
相关文章推荐
- ECMAScript 6 学习系列课程 (ES6 箭头函数的使用)
- es6中箭头函数学习的一个记录
- ECMAScript 学习笔记(2)--ES6新增let、箭头函数理解
- es6中箭头函数学习的一个记录
- ES6学习——箭头函数
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6 学习笔记(一)箭头函数
- es6学习第1天,箭头函数 块级作用域
- es6中箭头函数学习的一个记录
- ES6学习总结之函数变化(函数默认参数,扩展运算符,箭头函数)
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- ES6学习记录之class, extends, super和箭头函数与this
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录