箭头函数是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>
运行结果
