es6-let 和 const

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

代码1：

window.onload=function(){
        {
            var a = 1;//a的作用域则是onload函数内
            let b = 10;//b的作用域仅限于代码块内
        }
        console.log(a);//1
        console.log(b);//报错，未定义变量b
}

代码2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var let</title>
    <style type="text/css">
        html,body{margin: 0; padding: 0;font-size: 16px;}
        a,span,b{display: block;height: 50px; padding: 5px 10px;text-align: center; background: #f00d66;float: left; margin-left: 20px;}
    </style>
</head>
<body>
<div name="aa" style="padding: 20px 0; height: 90px;">
    <a>A1</a>
    <a>A2</a>
    <a>A3</a>
    <a>A4</a>
    <a>A5</a>
</div>
<div name="aa" style="padding: 20px 0; height: 90px;">
    <span>Span1</span>
    <span>Span2</span>
    <span>Span3</span>
    <span>Span4</span>
    <span>Span5</span>
</div>
<div name="aa" style="padding: 20px 0; height: 90px;">
    <b>b1</b>
    <b>b2</b>
    <b>b3</b>
    <b>b4</b>
    <b>b5</b>
</div>
<script type="text/javascript">
function aa_var(){
    var a=document.getElementsByTagName("a");
    var len= a.length;
    for(var i=0;i<len;i++){
        a[i].onclick=function(){
            console.log(i);//结果都是5
        }
    }
    console.log(i);
}
function aa_let(){
    var span=document.getElementsByTagName("span");
    var len= span.length;
    let i=0;//这个let i和var i效果是一样的，作用域都是函数aa_let内
    for(let i=0;i<len;i++){
        //这个let i作用域是for循环语句块内
        span[i].onclick=function(){
            console.log(i);//按顺序点击，结果：0、1、2、3、4
        }
    }
    console.log(i);//如果不在for外面定义let i=0;会报错error；结果：0
}
function aa_let2(){
    var b=document.getElementsByTagName("b");
    var len= b.length;
    let i=0;//这个let i和var i效果是一样的，作用域都是函数aa_let2内
    for(i=0;i<len;i++){
        b[i].onclick=function(){
            console.log(i);//结果都是5
        }
    }
    console.log(i);//结果：5
}
    window.onload=function(){
        aa_var();
        aa_let();
        aa_let2();
    }
</script>
</body>
</html>

const

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

const i=3;
i=0;//报语法错误,常量不能修改

 

posted @ 2017-04-27 13:50  甘小春  Views(194)  Comments(0)    收藏  举报