1 箭头函数的声明

ES6允许使用箭头=>定义函数

	<script>
		// 声明一个函数
        // 原先
        let fn = function(a,b){
            return a + b;
        }
        // 现在
        let fn1 = (a,b) => {
            return a + b;
        }
        // 调用函数
        let result = fn1(1, 2);
        console.log(result);
	</script>

在这里插入图片描述

2 箭头函数的特性

1>this是静态的,this始终指向函数声明时所在作用域下的this的值

	<script>
		function getName(){
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        // 设置window对象的name属性
        window.name = '北大';
        const SCHOOL = {
            name: 'ATBeiDa'
        }

        // 直接调用
        getName();
        getName2();
        // call方法调用
        getName.call(SCHOOL); // 普通函数this指向调用者
        getName2.call(SCHOOL); // 箭头函数this是指高父级
	</script>

在这里插入图片描述

2>不能作为构造实例化对象

	<script>
		let Person = (name,age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('xiao',30);
        console.log(me); // 会报错
	</script>

在这里插入图片描述

3>不能使用arguments(作用：保存实参)变量

	<script>
		let fn = () => {
            console.log(arguments);
        }
        fn(1,2,3); // 会报错
	</script>

在这里插入图片描述

4>箭头函数的简写，分两种情况

	<script>
		// 1> 省略小括号，当形参有且只有一个的时候
        /* let add = (n) => {
            return n + n;
        }
        console.log(add(9)); */
        let add = n => {
            return n + n;
        }
        console.log(add(9));
        // 2> 省略花括号，当代码体只有一条语句的时候,此时return必须省略，而且语句的执行结果就是函数的返回值
        /* let pow = (n) => {
            return n * n;
        }
        console.log(pow(9)); */
        /* let pow = (n) => n * n;
        console.log(pow(9)); */
        let pow = n => n * n;
        console.log(pow(9));
	</script>

在这里插入图片描述

3 箭头函数实践

案例一：

<!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>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        // 需求一：点击div,2s后颜色变为粉色
        // 1.获取元素
        let ad = document.getElementById('ad');
        // 2.绑定事件
        ad.addEventListener('click',function(){
            // 保存this的值
            // let that = this; // 方法一
            // let _this = this; // 方法二
            // let self = this; // 方法三
            // 因为两秒后，所以需要加一个定时器
            /* setTimeout(function(){
                // 修改背景颜色 this
                // this.style.background = 'pink'; // 此时this指向有问题，2秒后不变色 解决方法一：保存this的值(如上) 解决方法二：使用箭头函数(如下)
                // that.style.background = 'pink';
                // _this.style.background = 'pink';
                // self.style.background = 'pink';
            },2000); */
            setTimeout(() => {
                this.style.background = 'pink';
            },2000);
        })
    </script>
</body>
</html>

案例二：

<!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>箭头函数实践</title>
</head>
<body>
    <script>
        // 需求二：从数组中返回偶数的元素
        const arr = [1,6,9,10,100,25];
        // filter()函数用于过滤序列，过滤掉不符合条件的元素，接收两个参数，一个为函数，第二个为序列，每个元素作为参数传递给函数进行判断然后返回true或false，最后将返回true的元素放到新列表中
        // 方法一
        /* const result = arr.filter(function(item) {
            if(item % 2 === 0) {
                return true;
            }else {
                return false;
            }
        }); */
        // 方法二
        /* const result = arr.filter(item => {
            if(item % 2 === 0) {
                return true;
            }else {
                return false;
            }
        }); */
        // 方法三
        const result = arr.filter(item => item % 2 === 0);
        console.log(result);
    </script>
</body>
</html>