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