箭头函数和传统函数对比

今日知识点总结：主要说明箭头函数的特点和定义

以及对比传统函数，箭头函数的用法。

ES6允许使用箭头函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

        箭头函数的注意点：

        1 如果形参只有一个，则小括号可以省略。

        2 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果。

        3 箭头函数this 指向声明时所在作用域下this的值。

        4 箭头函数不能作为构造函数实例化。

        5 不能使用arguments变量  

        特性：

        1 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值。

        2 不能作为arguments变量       

function person(name,age){
            //初始化
            //假装在里面定义了一个名为this的空对象
            this.name=name;
            this.age=age;
        }
        // ES5写法（函数表达式）：无参数
        var say=function(){
            console.log("hello");
        }
        say();
        //ES6写法：(函数表达式)无参数.可以省略大括号
        let speak=()=>console.log("hello..");
        speak();

        //ES5一个参数写法：
        var hello = function(name){
            return "hello"+name;
        }
        //console.log(hello("onion"));
        //ES6 箭头函数
        let hi=name=>"hi"+name;
        //console.log(hello("onion"));
        //多个参数ES5
        var sum = function(a,b,c){
            return a+b+c;
        }
        // console.log(sum(1,2,3));
        //ES6
        let he =(a,b,c)=>{return a+b+c}
         // console.log(he(1,2,3));
         //1 箭头函数的this是静态的，初始指向函数声明时所在的作用域下this的值
         const school={
            name :"大哥",
            show:function(){
                console.log(this);
            }
         }
         //school.show()
         //传统函数
         function getName(){
            console.log(this);
            console.log("getName:"+this.name);
         }
         //箭头函数
         getName1=()=>console.log("getName1:"+this);
         //window.name="icon";
         //直接调用
         //getName();
         getName1();
         //结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
         //不能作为实例化对象
         let person =(name,age)=>{
            this.name=name;
            this.age=age;
         }
         let me =new Person("onion",18);
         console.log(me);
         //报错：person is not a constructor

         //不能使用arguments变量
         //let fn=()=>console.log(arguments);
         fn(1,2,3);
         //报错：arguments isnot defined

 <script>
        //ES6 引入rest参数，用于获取函数的参数，用来代替arguments，将接受的参数序列转换为一个数组对象
        //参考文章：https//www.jianshu.com/p/50bcb376a419
        //应用场景：rest参数非常适合不定个数参数函数的场景

        //ES5获取实参的方式
        function data(){
            console.log(arguments);
        }
        data("一","二","三","四");
        //ES6 的rest参数...args，rest，参数必须放在最后面

        function data(...args){
            console.log(args);
        }
        data("大姐","二姐","三姐","四姐")

        //案例一 求不定个数数字的和
        let add=(...args)=>{
            let sum = args.reduce((pre,cur)=>pre+cur,0);
            return sum;
        }
        console.log(add(1,2,3,4,5));//15
        //什么时候使用箭头函数，当需要将一个函数当成参数传入到另外一个函数中时，正常情况下还是使用普通函数
        //普通函数
        setInterval(function(){
            console.log(this);//window
        },1000)
        //箭头函数传参
        setInterval(()=>{
            console.log(this);
        },1000)
        //箭头函数的this引用的最近作用域中的this（向外曾作用域中，一层层查找，直到有this的定义）
    </script>

下面是每日一道面试题：

题目	答案
<image>标签的title和alt的区别	alt 属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符，这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户。title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。