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 maxlength使用说明
Sep 09 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
jqueryUI tab标签页代码分享
2017/10/09 jQuery
JavaScript实现图片放大镜效果
2019/06/27 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python 字典与字符串的互转实例
2017/01/13 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Python requests模块session代码实例
2020/04/14 Python
python IDLE添加行号显示教程
2020/04/25 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
教师节商场活动方案
2014/02/13 职场文书
文案策划求职信
2014/04/14 职场文书
公司活动总结怎么写
2014/06/25 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
python中print格式化输出的问题
2021/04/16 Python
Python实现byte转integer
2021/06/03 Python