js中的let和var

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

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

var x = 3;
if(x==3) {var x = 7;
}
console.log(x)//输出x=7let 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

js中的let和var相关推荐

JS中的let和var的区别
ES6 新增了let命令,用来声明局部变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 在ES6之前,我们都是用var来声明变量,而且JS只有函 ...
js中定义变量加var和不加var的区别
这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清楚,又问我是不是可以不加var定义变量... 正好昨天做项目的时候想到这个问题,觉得这种细节上的问题才是拉开差距的 ...
js中定义变量之②var let const的区别
var 上一篇文章有讲过,是js定义变量的关键词. 但是在es6中,新添加了两个关键词,用于变量声明的关键词:let 和const 接下来就说一下var let 和const的区别: 首先说var 用 ...
js中不容小觑的var声明
在学习vue相关课程中,有一次跟着老师敲代码,写出了如下代码: var Child = {template:`<div @click='handleClick'><slot>& ...
关于JS中的 NEW 和VAR
很多人都觉得在javascript声明一个变量,加var和不加var没有什么区别,实际上是一个错误的观点,如果在函数外面,也就是说在window区域加不加var确实是一样,因为都会是全局变量的效果,而 ...
Node.js中文件上传与multer模块的应用
必要:首先multer模块应用前提是在HTML的form表单中标签内设置属性enctype="multipart/form-data"是必须的,这样才可以上传文件,方式为post ...
JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
php中正则表达式用法,php与js中的正则表达式用法
1. php中的正则: if(preg_match('/^[^x00-xff]+$/', $_POST['password']) || !preg_match('/^\w+$/', $_POST['p ...
js中一些常用的基本函数
如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象 ...

js中的let和var

参考资料

js中的let和var相关推荐

最新文章

热门文章