5.ES6 const命令

------------------------------------const用來聲明常量-------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const命令</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       const Pi=3.1415926535;
       console.log(Pi);              //3.1415926535;
       Pi=3;                      //Pi is read-only---Error
       console.log(Pi);
    </script>

</head>
<body>
    
</body>
</html>


-------------------------------------------------------------------------使用const命令-----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用const命令</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       const Pi=3.1415926535;
       console.log(Pi);  //3.1415926535;
       console.log(5*Pi);  //15.7079632675
    </script>

</head>
<body>
    
</body>
</html>


----------------------------------------------------const塊級作用域----------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const塊級作用域</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       if(true){
           const Pi=3.14159265;
       };
       console.log(Pi);  //Pi is not defined
    </script>

</head>
<body>
    
</body>
</html>


--------------------------------------------------------------------const暫時性死區-------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const暫時性死區</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       if(true){
           console.log(Pi);  //undefined
           const Pi=3.14159265;
       };
       
    </script>

</head>
<body>
    
</body>
</html>

--------------------------------------------------const不可重複聲明----------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const不可重複聲明</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       {
           var a=100;
           const a=200;
           console.log(a);
       }
       
    </script>

</head>
<body>
    
</body>
</html>

------------------------------------------------------const對象----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const對象</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       const person={};
       person.name="lisi";
       person.age=30;
       console.log(person.name); //lisi
       console.log(person.age); //30
       console.log(person); //Object { name: "lisi", age: 30 }
       
    </script>

</head>
<body>
    
</body>
</html>

---------------------------------------------------const對象錯誤方法---------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const對象錯誤方法</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       const person={};
       person.name="lisi";
       person.age=30;
       console.log(person.name); //lisi
       console.log(person.age); //30
       console.log(person); //Object { name: "lisi", age: 30 }
       person={};  //person is read-only  --Error
    </script>

</head>
<body>
    
</body>
</html>


--------------------------------------------const對象------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const數組</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
       const arr=[];
       console.log(arr); //Array [  ]
       console.log(arr.length);//0
       console.log("-----------");
       arr.push("hello world!");
       console.log(arr); //Array [ "hello world!" ]
       console.log(arr.length);//1
       console.log("-----------");
       arr.length=0;
       console.log(arr);//Array [  ]
       console.log(arr.length);//0
       console.log("-----------");

       //錯誤用法
       arr=["hello world"];
    </script>

</head>
<body>
    
</body>
</html>


-------------------------------------------------const對象凍結--------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const對象凍結</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/traceur">
      const person=Object.freeze({});
      person.name="lisi";
      person.age=30;

      console.log(person.name);
      console.log(person.age);
      console.log(person);
    </script>

</head>
<body>
    
</body>
</html>


------------------------------------------徹底凍結對象-------

var constantize=(obj) => {

      Object.freeze(obj);

      Object.keys(obj).forEach( (key,value) =>{

              if( typeof obj[key]==='object'){

                   constantize(obj[key]);

};

});

};



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章