ES6~ES11新特性：函数

一.箭头函数以及其声明特点

如何声明箭头函数

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

格式：let 函数名 = (形参) =>( ){ }

        let fn2 = (/*形参*/a,b) =>{
            return a+b;
        }
        let result = fn2(1,2);
        console.log(result);

特点

1.this 是静态的

this始终指向函数声明时所在作用域下的this的值

我们这里来用普通函数和箭头函数做一下对比

• 普通函数

		function getName(){
            console.log(this.name);
        }

• 箭头函数

		let getName2 = () => {
            console.log(this.name);
        }

设置windows对象的name属性

window.name = "aaa";

创建一个对象

		const school = {
            name:'bbb'
        }

• 直接调用

        getName();
        getName2();

• 方法调用

        getName.call(school);
        getName2.call(school);

2.不能作为构造函数实例化对象

		let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }

        let me = Person('xxxx',20);
        console.log(me);

这是不可以的

3.不能使用arguments变量

        let fn =()=>{
            console.log(arguments);
        }
        fn(1,2,3);

这是不可以的

4.简写

• 在形参有且只有一个的时候可以省略小括号

		let add = n =>{
            console.log(n + n);
        }
        add(9);

• 当代码体只有一条时可以省略花括号

		let add1 = n => console.log(n + n);
        add1(10);

二.箭头函数的实践以及其应用场景

这里我们先在浏览器页面中创建一个长200宽200任意颜色的的方框

		#ad{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

<div id="ad"></div>

需求1：点击div两秒后颜色变为粉色

获取元素

let ad = document.getElementById('ad');   //获取元素

• 普通方法

 		ad.addEventListener("click", function(){
            let _this = this;
            setTimeout(function(){       //定时器
                _this.style.backgroundColor = "pink";
            },2000)
        },)

• 箭头函数

        ad.addEventListener("click", function(){
            setTimeout(() => {       //定时器
                this.style.backgroundColor = "pink";
            },2000)
        },)

实现方式：
setTimeout是Windows的方法，普通方法中直接调用this是指向windows的，会报错。需要在外层保存一下this的值，而在内层函数中找不到_this的值就会到外层中找，这样才可以成功更换颜色。
而用箭头函数的话它的this是静态的，始终指向函数声明时所在作用域下的this的值，即指向function中this的值，所以可以直接调用this。

需求2：从数组中返回偶数元素

创建数组

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)

• 箭头函数

const result = arr.filter(item => item % 2 == 0);
console.log(result)

结果是一模一样的

结论：
箭头函数适合与this无关的回调，定时器，数组的方法回调，不适合与this有关的回调，事件回调，对象的方法等。

三.函数参数的默认值设置

ES6允许给函数参数设置默认值

1.形参初始值

        function add(a,b,c=10){
            return a+b+c;
        }
        let result = add(1,2);
        console.log(result);

这里我们给c赋了个初始值为10，如果我传递了实参则用我们给的，如果没传则用初始值。

2.与解构赋值结合

        function content({a='6', b, c, d}){
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(d);
        }
            // 调用这个函数，参数是一个对象
        content({
            // 没有传该参数有默认值用默认值，传了就用该值
            // a:'1',
            b:'2',
            c:'3',
            d:'4'
        })

四.rest参数

ES6引入了rest参数，用于获取函数的实参，来代替arguments

1.ES5获取实参方式

        function data(){
            console.log(arguments);
        }
        data('a','b','c');

返回值是一个对象

2.ES6获取实参的方式

        function data1(...args){
            console.log(args);
        }
        data1('a1','b1','c1');

返回值是一个数组，可以用数组的各个方法

注意：如果参数有多个，rest参数必须要放到参数的最后！

选集为9，10，11，12