Es6箭头函数
箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。
下文就是我对于箭头(=>)函数的定义与实用说明。
用法一（无参数）
定义语法
var a = 10;var f = () => a;// 等价于var f = function(){return a;}
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>var a = 10;f = ()=> a;console.log(f());</script><body></body></html>
运行结果：
用法二（含有参数）
定义语法
var add = (a, b) => a + b;// 等价于var add = function(a, b){return a + b;}console.log(add(1, 1))
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>var add = (a, b) => a + b;// 等价于var add = function(a, b){return a + b;}console.log(add(1, 1))</script><body></body></html>
运行结果
用法三（箭头函数的代码块大于一行）
定义语法
var add = (a, b) => {a = a + 1; return a + b;}// 等价于var add = function(a, b){a = a + 1;return a + b;}
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>var add = (a, b) => {a = a + 1; return a + b;}// 等价于var add = function(a, b){a = a + 1;return a + b;}console.log(add(1,2));</script><body></body></html>
运行结果
用法四（返回的是对象）
定义语法
let temp = stu => ({id:1,name:"lihua"});// 等价于temp = {id:1,name:"lihua"}
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>let temp = stu => ({id:1,name:"lihua"});// 等价于temp = {id:1,name:"lihua"}console.log(temp);</script><body></body></html>
运行结果
用法五（与map结合）
定于语法
// 这个正常写法需要写到上面 不然语法报错[1,2,3].map(function (x) {return x + x;});// =>函数写法y = [1,2,3].map(x => x + x)
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>// 这个正常写法需要写到上面 不然语法报错[1,2,3].map(function (x) {return x + x;});// =>函数写法y = [1,2,3].map(x => x + x)console.log(y)</script><body></body></html>
运行结果
用法六（与setTimeout结合）
定义语法
function foo(){setTimeout(() => {console.log('id:', this.id);},10000) // 这里设置10s之后出现结果}var id = 21;foo.call({id:42});
测试代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><script>function foo(){setTimeout(() => {console.log('id:', this.id);},10000) // 这里设置10s之后出现结果}var id = 21;foo.call({id:42});</script><body></body></html>
运行结果
本是古典 何须时尚
不念不忘少年蓝@
红太狼
Bertha 。
港控/mmm°
￡神魔★判官ぃ
还没有评论，来说两句吧...