<!DOCTYPE html>
<html>
<head>
<title>8种箭头函数语法</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script type="text/javascript">
//1.具有一个参数并直接返回的函数
var f1 = a => a;//函数名为f1，形参为a，返回a
console.log(typeof f1);
console.log( f1(200) );
//2.没有参数的需要用在箭头前加上小括号
var f2 = () => '这是返回值';// 等同于function f2(){return '这是返回值';}
console.log( f2() );
//3.多个参数需要用到小括号，参数间逗号间隔
var f3 = (a, b) => a+b;//返回形参a+形参b的结果
console.log(f3(3,4));//7
//4.函数体多条语句需要用到大括号
var f4 = (a, b) => {
return a+b;
}
console.log(f4(5,6));//11
//5.返回对象时需要用小括号包起来，因为大括号被占用解释为代码块
var f5 = () => {
return ({"name":"老弟", "age":40});
}
console.log(f5());
// 6.使用箭头函数作为事件处理函数
// ES5的事件处理函数
// document.getElementById('btn').onclick = function(evt){
// console.log(evt);//evt 事件对象
// }
//ES6的事件处理函数
document.getElementById('btn').onclick = evt=>{
console.log(evt);//evt 事件对象
}
//7.为对象赋值的方法
var obj = {};
obj.say = () => "这是obj的say方法";// 相当于obj.say = () => {return "这是obj的say方法";}
console.log(obj.say());
//8.回调函数
// ES5的回调函数
function f9(){
console.log(200);
}
function f10(f){
//f 其实就是f1
f();
}
f10(f9);
// //f1就是被当做回调函数*/
// //先定义f6函数，函数内部 调用f
var f12 = (f)=>{
console.log( f(100) );
};
//定义回调函数f11
//
var f11 = a=>a;
//调用f6 将f7作为参数
f12(f11);
</script>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-29 17:56:08
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-23 08:14:35
