js中let和var定义变量的区别


Posted in Javascript onFebruary 08, 2018

javascript 严格模式

第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错:

let hello = 'hello world.';
console.log(hello);

错误信息如下:

let hello = 'hello world.';
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
 ...

解决方法就是,在文件头添加”javascript 严格模式”声明:

'use strict';
let hello = 'hello world.';
console.log(hello);

let和var关键字的异同

声明后未赋值,表现相同

'use strict';
(function() {
 var varTest;
 let letTest;
 console.log(varTest); //输出undefined
 console.log(letTest); //输出undefined
}());

使用未声明的变量,表现不同:

(function() {
 console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
 console.log(letTest); //直接报错:ReferenceError: letTest is not defined
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
}());

重复声明同一个变量时,表现不同:

'use strict';
(function() {
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
 var varTest = 'varTest changed.';
 let letTest = 'letTest changed.'; //直接报错:SyntaxError: Identifier 'letTest' has already been declared
 console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
 console.log(letTest);
}());

变量作用范围,表现不同

'use strict';
(function() {
 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
 {
 var varTest = 'varTest changed.';
 let letTest = 'letTest changed.';
 }
 console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
 console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

总结

以上所述是小编给大家介绍的js中let和var定义变量的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
You might like
PHP 开发工具
2006/12/06 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Python读大数据txt
2016/03/28 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
django缓存配置的几种方法详解
2018/07/16 Python
基于Python的PIL库学习详解
2019/05/10 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python之Class&Object用法详解
2019/12/25 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
预备党员转正思想汇报
2014/01/12 职场文书
大学生自我鉴定书
2014/03/24 职场文书
水电维修专业推荐信
2014/09/06 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
消防安全培训工作总结
2015/10/23 职场文书
python tkinter实现定时关机
2021/04/21 Python
JavaScript实现简单图片切换
2021/04/29 Javascript