Es6（2）

1.模板字符串

 <script>
    //模板字符串 `` tab上边的那个键
    //1.声明模板字符串
    let str = `我是一个 字符串哦`
     console.log(str,typeof str)//我是一个 字符串哦 string
    //2.内容可以直接出现换行符
    let str1 =`<ul>
                    <li>tom</li>
                    <li>jom</li>
                    <li>sam</li>
              </ul>`
              console.log(str1)//原样输出字符串
      //3变量拼接
      let pre ="bill"
      let out =`${pre}爱打代码`//${变量名},``为模板字符串
      console.log(out)//bill爱打代码
  </script>

2.对象简化写法

<script>
    //ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
    //这样的书写更简洁
    let name =  'bill'
    let age = '28'
    function fn(){
      console.log("打代码")
    }
    //ES6之前 
     let obj = {
       name: name,
       age :age,
       todo :fn,
      //  方法简化
          anhao (){
            console.log("打代码")
          }
     }
  //      }
        //简化后 
        let  obj1 = {name,age,fn}  
   </script>

3.箭头函数

 <script>
     //ES6允许使用[箭头](=>)定义函数
     //1.声明一个函数
     let fn = function () {
       
     }
     let fun =(a,b)=>{
      return a+b
     }
     //2.调用函数
     let result = fn(1,2)
     console.log(result)//3

     //3.箭头函数与与原始函数的区别
        //a. this是静态的,this始终指向函数声明时所在作用域下的this的值
        function getName() {
          console.log(this.name)
        }
        let getName1=()=>{
          console.log(this.name)
        }
        //设置window对象的name属性
        window.name ='bill';
        const pre ={
          name :'jack'
        }

        //直接 调用
        getName() //bill
        getName1() //bill

        //call方法调用
        getName1.call(pre) //bill
        getName.call(pre) //jack
        //2.箭头函数不能作为构造实例化对象

        //3.箭头函数不能使用arguments
        //4.简写
            //a.省略小括号,当形参有且只有一个时
            let add = n=>{
              return n+n
            }
            console.log(add(9))//18
            //b.省略花括号,当代码体只用一条语句时
            let pow =n=> n*n
            console.log(pow(9))//81
     </script>

4.箭头函数的小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{width: 200px;
      height: 200px;
      background-color: pink;
    }
    
  </style>
</head>
<body>
  <div id="dv"></div>
  <script>
    let dvObj = document.getElementById("dv")
   
    dvObj.addEventListener("click",function(){
      
      setInterval(()=>{
        this.style.backgroundColor='red'
      },2000)
    })

//箭头函数适合与this无关的回调,定时器,数组的方法回调

//箭头函数不适合与this有关的回调,事件回调,对象方法

</script>

</body>
</html>

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

 <script>
    //1.参数默认值
    function add (a,b,c){
      return a+b+c
    }
    console.log(add(1,2))//nan 因为c为undifined,所以是nan
    console.log(add(1,2,3))//6
    function mul (a,b,c=1){
      return a*b*c
    }
    console.log(mul(1,2))//2
    console.log(mul(1,2,2))//4因为给了c默认值了为1

    //2.与结构赋值结合
    function connect({host="127.0.0.1",usename,password,port}){
        console.log(host)
        console.log(usename)
        console.log(password)
        console.log(port)



    }
    connect({
      host:'lochost',
      usename :'root',
      password:'root',
      port :'8808'
    })
  </script>