let和const

let的新特性

let的用法跟es5中的var类似，是用来声明变量的，但是用let声明的变量只在let命令所在的块级区域中有效

不存在变量提升

用var声明的变量是存在变量提升的，但是用let声明的变量是不存在变量提升的，如下实例：

            function show(flag){
                console.log(a);  //因为存在变量提升，所以在这里会打印出undefined
                if(flag){
                    var  a="123";
                    return a;
                }else{
                    return null;
                }
            }
            
            show(false);

            function show(flag){
                console.log(a);   //因为let声明的变量不存在变量提升，而变量必须先声明再使用，所以这里会报a is not defined错误
                if(flag){
                    let a="123";
                    return a;
                }else{
                    return null;
                }
            }
            
            show(false);

暂时性死区

只要在块级作用域内存在let命令，那么他所声明的变量就绑定在这个区域，不受外部的影响。如下实例：

            var tmp=123;
            if(true){
                tmp='abc';  //在{}这个代码块内用let声明了tmp这个变量，所以tmp是不受外部影响的，不能在声明变量之前使用变量，所以在这里会报tmp is not defined错误
                let tmp;
            }

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。所以以下两种情况都会报错

            function func1(){
                let a=10;
                var a=1;
            }
            
            func1();
            
            function func2(){
                let a=10;
                let a=1;
            }
            
            func2();

关于const

const命令用于声明一个只读的常量，const声明的常量跟let声明的变量有一些相同的特性

const声明的常量只在const命令所在的代码块内有效
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
const声明的常量也不能重复声明

const还有一些自己的特性，

常量一旦声明，是不能改变的。如下实例：

            const PI=3.14;
            console.log(PI);
            PI=3.14159;  //这里会报错，因为const声明了之后，常量的值是不能改变的

const一旦声明，就必须要赋值，否则就会报错

const PI;//这样会报错，声明了就必须要赋值

let经典实例-选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>let版选项卡</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 14px;
                -webkit-user-select: none;
            }
    
            ul, li {
                list-style: none;
            }
            
            .box {
                width: 500px;
                margin: 10px auto;
            }
            
            .box ul{
                overflow: hidden;
            }
            
            .box ul li{
                float: left;
                margin-right: 15px;
                width: 100px;
                height: 30px;
                border: 1px solid #337ab7;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
            }
            
            .box ul li.on{
                background:#5bc0de ;
            }
            
            .box div {
                display: none;
                height: 150px;
                text-align: center;
                line-height: 150px;
                background: #5bc0de;
                border: 1px solid #9783b9;
            }
            
            .box .show{
                display: block;
                background: #5bc0de;
                border-bottom-color: #5bc0de;                
            }
            
                            
        </style>
    </head>
    <body>
        <div id="box" class="box">
            <ul>
                <li class="on">选项卡1</li>
                <li>选项卡2</li>
                <li>选项卡3</li>
            </ul>
            <div class="show">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
        <script type="text/javascript">
            var oBox=document.getElementById('box');
            var oLi=document.getElementsByTagName('li');
            var aDiv=oBox.getElementsByTagName('div');
            for (let i = 0; i <oLi.length; i++) {  //let存在块级作用域，所以这里的i只在当前循环内有效
                oLi[i].onclick=function(){
                    for (var i = 0; i < oLi.length; i++) {
                        oLi[i].className='';
                        aDiv[i].style.display='none';
                    }
        　　　　　　oLi[i].className='on';
        　　　　　　aDiv[i].style.display='block';                    
                    
                }
            }
        </script>        
    </body>
</html>

posted on 2018-08-29 18:15 小之阅读(215) 评论(0) 收藏举报