ES6学习-- LET

特点

（1）变量声明不能重复

（2）变量具有块级作用域

（3）变量不存在变量提升，即先使用后声明

（4） 不影响作用链

特点案例：

（1）变量声明不能重复，重复时报错，停止脚本 Uncaught SyntaxError: Identifier 'b' has already been declared

            // 变量声明不能重复
            var a = 0
            var a = 10
            console.log(a)
            // 不加下面的内容时，此处可以输出，添加下面的内容时输出为b has already been declared，连10都不会输出了
            let b = 10;
            let b = 11;
            console.log(b)
//Uncaught SyntaxError: Identifier 'b' has already been declared

（2）块级作用域

			// 块级作用域
            {
                var testBlockVar = '测试块';
                let testBlockLet = '测试块';
            }
			console.log(testBlockVar)
			console.log(testBlockLet)

回显如下，此处前面的是可以执行的，let冲突的时候是都不会执行

 （3）变量提升  --  未声明变量之前直接使用

            console.log(testUpLet)
            console.log(testUpVar)
            var testUpVar = '测试变量提升';
            let testUpLet = '测试变量提升'

注：let可以在声明之前使用，值为undefined，let的会报错，并且在报错的地方直接停止程序

 （4）不影响作用链  --  会向上找let的变量

            {
                let testGlobal = '尚硅谷外';
                let testGlobal1 = '尚硅谷1'

                function f() {
                    let testGlobal = '尚硅谷内';
                    console.log(testGlobal)
                    console.log(testGlobal1)
                }

                f();
            }

会向上寻找变量，如果内部定义一个相同的变量，则使用自己同级的变量

 典型问题

（1）let修改块作用域

	
		
		
		
	
	
		
点击切换颜色
		

		

		

		

		
	

（2）上面案例闭包修改

注：可以看出立即执行函数会形成一个自己的封闭空间，其不会被外部的其他变量影响，其实这个如果再有一个return的话就是一个标准的闭包了。

闭包函数拆解开，类似于下图，可以看出，传参在函数内部有自己的作用域，i已经不在使用for循环的块级域。

（3）如果闭包不传参，使用全局参数var呢

            let items = document.getElementsByClassName('item')
			var i = 0;

            function setOnclick() {
                items[i].onclick = function () {
                    console.log(i)
                    items[i].style.backgroundColor = 'pink';
                }
            }

            for (var i = 0; i < items.length; i++) {
                setOnclick()
            }
            console.log(i)

很明显了，和上面的一样，每次for循环已经把i的值加到了4，后续点击的时候setOnclick没有传参，使用全局参数i = 4

 

类似案例如下：

//情况1
//闭包函数的外部函数没有初值
var i = 0;  //全局变量

function outerFn(){
  function innnerFn(){
       i++;
       console.log(i);
  }
  return innnerFn;
}

var inner1 = outerFn(); //闭包函数的外部函数也没有初值，用的全局变量
var inner2 = outerFn(); 
//两个函数共用同一个全局变量
inner1();   //1
inner2();   //2
inner1();   //3
inner2();   //4

//情况2
//闭包函数的外部函数有初值
function outerFn(){
var i = 0;
  function innnerFn(){
      i++;
      console.log(i);
  }
  return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();   //1
inner2();   //1
inner1();   //2
inner2();   //2

（4）终极问题  -- 计程车问题

暂时没看懂此问题容易出错的在哪，后续补充

            let car = (function () {
                let start = 12
                let total = 0
                return {
                    price(n) {
                        if (n <= 3) {
                            total = start;
                        } else {
                            total = start + (n - 3) * 5
                        }
                        return total
                    },
                    jam(flag) {
                        return flag ? total + 10 : total;
                    }
                }
            })()
            console.log(car.price(3))
            console.log(car.jam(true))
            console.log(car.jam(false))

参考资料：尚硅谷Web前端ES6教程，涵盖ES6-ES11

                    立即执行函数