67-箭头函数，new.target，模版字符串

1.箭头函数

ES6新增语法，用来简化函数的书写()=>{}

    <script>
      //箭头函数的基本使用
      let a = (a,b)=>{
        return a+b;
      }
      let c = a(1,2);
      console.log(c);//输出3
    </script>

2.简写形式：

2.1参数：只有一个参数时可以省略小括号a=>{}；

    <script>
      let fn2 = a=>{
        return a+1;
      }
      let d = fn2(4);
      console.log(d);//输出5
    </script>

2.2代码块：只有一行代码时，可以省略大括号(a,b)=>a+b相当于(a,b)=>{return a+b}；

    <script>
      let fn3 = (a,b)=>a+b;
      let e = fn3(5,6);
      console.log(e);//输出11
    </script>

2.3即省略()又省略{}：箭头函数的返回值就是这一行代码的执行结果a=>a+1

    <script>
      let fn4 = a =>a+1;
      let f = fn4(3);
      console.log(f);//输出4
    </script>

3.箭头函数的特征

3.1不可以作为构造函数使用

    <script>
      //箭头函数
      let fn2 = ()=>{}
      let f21 = new fn2();//报错fn2 is not a constructor,fn2不是一个构造函数
    </script>

3.2没有自己的this关键字(代码块内部的this是所在作用域的this)

    <script>
      //函数声明
      function fn1(){
        console.log(this);//输出对象{name: '张三', age: 18}
      }
      //箭头函数
      let fn2 = ()=>{
        //console.log(arguments);//报错，箭头函数arguments不存在
        console.log(this);//输出对象window
      }
      fn1.call({name:"张三",age:18});
      fn2.call({name:"李四",age:20});//箭头函数没有自己的this，输出的是自己所在全局作用域window的this
    </script>

3.3没有new.target属性

4.new.target在函数内部，用来区分函数的调用方式；

4.1直接调用，new.target值为undefind

    <script>
      function fn(){
        console.log(new.target);
      }
      //直接调用
      fn();//输出undefind
    </script>

4.2通过new关键字调用，new.target值为函数本身

    <script>
      function fn1(){
        console.log(new.target);
      }
      //实例化调用
      new fn1();//输出结果如下图
    </script>

5.模版字符串``(反引号,数字1左边的键)

可以嵌套变量，可以换行，用${变量名}嵌套变量，

    <script>
      let title = '标题';
      let str = '<ul><li>'+title+'</li></ul>';
      //模版字符串``
      let str1 = `<ul>
        <li>${title}</li>
        </ul>`;
      console.log(str);
      console.log(str1);
    </script>

输出结果如下