javascript_1">箭头函数(javascript)

箭头函数

引子:

<input type="text" id="txt1" ><input type="button" id="btn"  value="测试">

javascript">function test(val){console.log(val);        }
//如何调用呢?
btn.onclick = test(txt1.value)
这是错误的 , 因为函数调用和事件处理机制发生了冲突
你的预期是点击时调用函数 , 实际上test(txt1.value) 在代码赋值时已经被调用了，并返回其执行结果。
正确的做法:
把函数引用赋值给 btn.onclick，而不是调用函数的返回值。
如果需要传递参数，则应通过 匿名函数 或 箭头函数 包装

使用匿名函数如下:

javascript">btn.onclick=function ()
{test(txt1.value);
}

下面开始介绍箭头函数写法:

javascript">btn.onclick =()=>test(txt1.value);
省略了function 直接用箭头映射

省略小括号

javascript">   var test = function (a){console.log(111,a);       }用箭头函数写法:var test=(a)=>{console.log(111,a)}当只有一个参数的时候可以省略小括号var test= a =>{console.log(111,a)}两个参数以及以上必须有小括号var test =(a,b)=>{console.log(111,a,b);}大括号也能省略只有在只有一个返回值, 也就是说只有一句代码的时候可以省略var text =a => 100*a;相当于:var text=(a)=>{return 100*a;}console.log(test(10));

引子:
把aaa bbb ccc创建成li并插入到页面的ul里面

javascript">// 写一个数组var list =["aaa","bbb","ccc"]// 用document.createElement可以// 还有个简单的方法 可以转换数组中的元素var newList = list.map(function(item){// 参数是一个函数 这个函数返回值是什么 就映射成什么return "星之卡比"}
)
console.log(newList);

那如何把aaa bbb ccc创建成li并插入到页面的ul里面

javascript"> var newList = list.map(function(item){return `<li>${item}</li>`//模版字符串}

省略大括号

用箭头函数改造一下
上面说了只有一个形参的时候可以省略大括号

javascript">var newList = list.map(item =>  `<li>${item}</li>` )
//给map送进去一个箭头函数 送进去item 吐出来是<li>${item}</li>
//再用一个join 就可以往页面里面插入了 
console.log(newList.join(""));

上面将的是数组 , 如果是返回值是一个对象还能这样写吗

javascript">// 如果返回值是一个对象 
var test =() =>{return {name:"卡比"}
}
console.log(test());

满足了 return只有一句话的标准 试着改写

javascript">var test =() => {name:"卡比"
}
console.log(test());
//结果是undefined
// 浏览器不知道{}里是对象 他以为他括号是函数 
var test =() =>( {name:"卡比"
})
console.log(test());
// 所以在大括号外面加上小括号 避免乱套 

箭头函数与没有arguments

javascript"> var test =function(){console.log(arguments);//没有map方法 arguments是伪数组console.log(Array.from(arguments));}test(1,2,3)// 1,2 ,3// 箭头函数没法拿到argumentsvar test = () =>{console.log(arguments);}test(1,2,3,4)//arguments is not defined

this的指向问题

javascript"><script>const obj1 = {name: 'Alice',arrowFunc: () => {console.log(this.name);}
};
obj1.arrowFunc(); // undefined, 因为箭头函数中的 this 绑定的是全局对象
// 而普通函数会绑定到调用它的对象：const obj2 = {name: 'Alice',normalFunc: function() {console.log(this.name);}
};
obj2.normalFunc(); // 输出 'Alice'
</script>