您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

ES6_let const关键字

发布时间：2019-10-06 12:16:58编辑：雪饮阅读（）

let关键字声明的变量不允许重复

之前var可以重复声明相同的变量,后者会覆盖前者,如:

         var username='gjp';

         var username='dmj';

         console.log(username);

而用let声明变量不允许重复,如下面这种就会报错:

         let username='gjp';

         let username='dmj';

         console.log(username);

let关键字不会预解析

之前var声明变量前若打印变量则会输出undefined,如:

         console.log(username);

         var username='gjp';

而如果用let声明则在控制台中会直接抛出异常信息

         console.log(username);

         let username='gjp';

let关键字有自己的块级作用域

有个示例如:

         <button>1</button>

         <button>2</button>

         <button>3</button>

         <script type="text/javascript">

         let btns=document.getElementsByTagName('button');

         for(var i=0;i<3;i++){

                   var btn=btns[i];

                   btn.onclick=function(){

                            alert(i);

                   }

         }

         </script>

这个示例目的是为了让第一个btn被点击的时候弹窗0,第二个btn被点击的时候弹窗1,依次类推,可是最后的结果则是都弹窗3,这是因为每个btn被绑定click方法,但其方法中的i变量还是从for处的i变量来的,而click方法也不是即时触发,而等其触发时i变量早因为循环结束而变成了3,那么对于该问题的解决,在以前我们可以采用自我执行函数,自我执行函数形成一个闭包作用域,如:

         <button>1</button>

         <button>2</button>

         <button>3</button>

         <script type="text/javascript">

         let btns=document.getElementsByTagName('button');

         for(var i=0;i<3;i++){

                   var btn=btns[i];

                  (function(i){

                            btn.onclick=function(){

                            alert(i);

                            }

                   })(i)

                  

         }

         </script>

那么在es6环境下,有了更优雅的解决办法,只需要将变量i用let声明,let声明可以对于块级语句拥有作用域

         <button>1</button>

         <button>2</button>

         <button>3</button>

         <script type="text/javascript">

         let btns=document.getElementsByTagName('button');

         for(let i=0;i<3;i++){

                   var btn=btns[i];

                   btn.onclick=function(){

                            alert(i);

                            }

                  

         }

         </script>

const

es6支持const常量，如：

         const key='dmj love gjp';

         key='gjp love dmj';

         console.log(key);

这里用const声明了key，但是又尝试给key重新赋值，这就会在控制台中抛出异常