箭头函数的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ad{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="ad"></div>
<!-- <script>
// 要求点击div 2s后变成 粉色
let ad = document.getElementsByClassName('ad')[0];
ad.addEventListener('click',function(){
// 保存this的值
let this1 = this;
// 定时器
setTimeout(function(){
// this代表的是window
console.log(this);
// this1代表的是<div class="ad"></div>
console.log(this1);
this1.style.backgroundColor='pink';
},2000);
})
</script> -->
<script>
// 要求点击div 2s后变成 粉色
let ad = document.getElementsByClassName('ad')[0];
ad.addEventListener('click',function(){
// 定时器
setTimeout(()=>{
this.style.backgroundColor='pink';
},2000);
})
</script>
<!-- 从数组中返回偶数的元素 -->
<!-- 方法一 -->
<!-- <script>
const arr = [1,6,9,10,100,25];
const result = arr.filter(function(item){
if(item%2==0){
return true;
}else{
return false;
}
});
console.log(result);
</script> -->
<!-- 方法二 -->
<!-- <script>
const arr = [1,6,9,10,100,25];
const result = arr.filter(item=>{
if(item%2==0){
return true;
}else{
return false;
}
});
console.log(result);
</script> -->
<!-- 方法三-->
<!-- <script>
const arr = [1,6,9,10,100,25];
const result = arr.filter(item=>item%2===0);
console.log(result);
</script> -->
<!-- 箭头函数适合于this无关的回调 ， 定时器 数组的方法回调 -->
<!-- 箭头函数不适合于this有关的回调 事件回调 对象的方法 -->
</body>
</html>
