ES6新特性——let

1.声明变量

let a;
let a, b, c, d;
let a = 100;
let a = 'qwer',
    b = 123,
    c = [];

2.特性

　　1）变量不能重复声明。

<script>
    let star = 123;
    let star = 234;
    let star = 123; //执行页面会报错
</script>

　　2）块儿级作用域   （全局，函数，eval）

<script>
    {
　　　　　let a = 123;
    } 

    console.log(a);  // 结果显示为空
</script>

　　3）不存在变量提升

<script>
    let a = 123;
    console.log(a);
    let a = 123;　　//浏览器会报错
    var a = 123;　　//浏览器会返回 undefined
</script>

　　4）不影响作用域链

<script>
    {
        let school = '123';
        function fn(){
            console.log(school);
        }
        fn();                    // 输出 123
    }
</script>

3.实践案例

<div class="container">
    <h2 class="page-header">点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<script>
    //获取div元素对象
    let items = document.getElementsByClassName('item');
    //遍历并绑定事件
    for (var i = 0; i < items.length; i++) {
        items[i].onclick = function() {
            //修改当前元素的背景颜色
            // this.style.background = 'pink'; 可以实现
            items[i].style.background = 'pink';
        }
    }
</script>