let(3) in ES6

4. ES6 syntax creates variables (let) with block-level scope, ES5 syntax creates variables (var/function) without block-level scope

[ES5]
window global scope The private scope formed by
function execution
[ES6]
In addition to the two scopes in ES5, ES6 adds a new block-level scope (we can understand the block-level scope as the private scope learned before Scope: there are some mechanisms for private variables and scope chains)ES6中把大部分用大括号抱起来的都称之为块级作用域

let num = 12,
    str = '';
let fn = function (str) {
    str = 'HELLO';
   // console.log(arguments[0]);//'HELLO' 当前JS并没有开启严格模式，所以形参变量和arg存在映射机制（但是我们以后尽量不要这样处理：因为把ES6编译成es5之后，会默认开启严格模式，映射机制会中断，此处的值依然是'xx'，这样会导致ES6与ES5结果不一致）
    //console.log(num);//Uncaught ReferenceError:num is not defined
    let num = 13;
    console.log(num,str);//13 'HELLO'
}

fn('xx');
console.log(num,str);// 12 ''

Most of the curly braces we encounter are block-scoped

//
// if (10>= 10){
//     var total = 100;
// }
// console.log(total);// 100

// if (10>= 10){
//     let total = 100;
// }
// console.log(total);// Uncaught ReferenceError: total is not defined 判断体也是一个块级私有作用域，在这个作用域中声明的变量是私有变量，在块级作用域之外是无法使用的

// for (var i = 0;i <5; i++){
//     console.log(i); // 0 1 2 3 4
// }
// console.log(i);// 5
for (let i = 0;i <5; i++){
    console.log(i); // 0 1 2 3 4
}
console.log(i);// Uncaught ReferenceError: i is not defined 循环体也是一个块级作用域（每一次循环都会形成一个新的块级作用域：当前形成5个块级作用域 每一个块级作用域当中都有一个私有变量i，分别存储了0-4）
{
    let i = 12;
}
console.log(i);//Uncaught ReferenceError: i is not defined 这是ES6中标准的块级作用域

// let a = 10;
// {
//     let a = 20;
//     {
//         {
//             console.log(a);//20
//         }
//     }
// }

// let a = 10;
// {
//     let a = 20;
//     {
//         {
//             console.log(a);//报错  虽然ES6没有变量提升，但是每一次进入当前作用域都会把let定义的变量都会找一遍(不提升但是找了，找到了说明当前作用域中是有这个变量的，提前用都会报错 )
//         }
//         let a = 30;
//     }
// }

try{
    let b = 100;
}catch(e){
    let c = 200;
}
console.log(c); // c is noat defined
console.log(b);// b is not defined
//try catch 中任何一个大括号都是块级作用域

switch (10){
    case 10:
        let d = 20;
        break;
}
console.log(d);// d is not defined

let obj = {name:'xxx'};
for (var key in obj) {

}
console.log(key);// key is not defined

What does the increase in block-level scope do?

let tempList = document.getElementsByName('temp');
// for (var i = 0; i < 5; i++) {
//     tempList[i].onclick = function () {
//         console.log(i);// 5 怎么点击都是5 异步操作以及作用域链的查找，找到全都是全局作用域下的5
//     }
//
// }
//->自定义属性解决 定义一个属性index
// for (var i = 0; i < tempList.length; i++) {
//     tempList[i].index = i ;
//     tempList[i].onclick = function () {
//         console.log(this.index);
//     }
//
// }
//->闭包解决 每一次循环都形成一个私有作用域
// for (var i = 0; i < tempList.length; i++) {
//     ~function (i) {
//         tempList[i].onclick = function () {
//             console.log(i);
//         }
//     }(i);
// }
//=> es6 let 解决
for (let i = 0; i < tempList.length; i++) {
        tempList[i].onclick = function () {
            console.log(i);
        }
}