js中的let和var

在ES6中,应该尽量使用const和let来声明变量,而尽量避免使用var。

var的缺点是它的作用域比较混乱,使用let能够保证清晰的作用域。
下面看一个小例子。

var x = 3;
if(x==3) {
    var x = 7;
}
console.log(x)//输出x=7

let y=4
if(y==4){
    // var y=5//报错:y已经定义过
}
console.log(y)//输出4

给你出道题:编写一个html页面,一打开页面,就alert三次,每次alert的文本显示当前是第几次alert

<html>
<script>
    for (var i = 0; i < 3; i++) {
        setTimeout(function () {
            alert("这是第" + i + "次")
        }, 1000 * i)
    }
</script>
</html>

写完运行,发现每次显示都是第3次。这是因为循环已经运行完了,i=3,然后才开始alert。

那么问题来了,如何把i的状态保存下来?

<html>
<script>
    for (var i = 0; i < 3; i++) {
        setTimeout(function () {
            var j=i//使用var是没有用处的,使用let就对了
            alert("这是第" + j + "次")
        }, 1000 * i)
    }
</script>
</html>

使用var j=i把i的状态保存下来,会发现并无卵用。因为3次循环var j是一个变量,而不是三份!我们想要实现的是保留三份j,这时使用let就可以实现了。

那么问题来了,let是ES6才有的,没有let之前人们是如何操作的呢?

<html>
<script>
    for (var i = 0; i < 3; i++) {
        (function (val) {
            setTimeout(function () {
                alert("这是第" + val + "次")
            }, 1000 * i)
        })(i)
    }
</script>
</html>

由上面的小例子可以看出,let有严格的作用域而var没有。
正是因为let有严格的作用域,所以let会进行许多运行时检查,比如禁止重复定义。

let还有一种作用域的用法。

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  console.log(x+y); // 27
}

console.log(x + y); // 5

参考资料

阮一峰-Javascript 严格模式详解
海洋天堂-js中let和var

原文地址:https://www.cnblogs.com/weiyinfu/p/7636580.html