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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Vue入门之animate过渡动画效果
Apr 08 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
js模拟类继承小例子
2010/07/17 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python探索之创建二叉树
2017/10/25 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python Pexpect模块的使用
2020/12/25 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
项目经理的岗位职责
2013/11/23 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
行政上诉状范文
2015/05/23 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
Golang日志包的使用
2022/04/20 Golang