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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
详解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 explode函数实例代码
2012/02/27 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python 图像增强算法实现详解
2021/01/24 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
运动会领导邀请函
2014/01/10 职场文书
大学生演讲稿范文
2014/01/11 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
python manim实现排序算法动画示例
2022/08/14 Python