ES6学习-- LET

特点

（1）变量声明不能重复

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

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

（4） 不影响作用链

特点案例：

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

            // 变量声明不能重复var a = 0var a = 10console.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 = 12let total = 0return {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

                    立即执行函数

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！