Es6（2）

阿新 • • 發佈：2020-07-27

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>