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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
详解uniapp的全局变量实现方式
Jan 11 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python进程间通信用法实例
2015/06/04 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python学习之os模块及用法
2020/06/03 Python
python中怎么表示空值
2020/06/19 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
物理教师自荐信范文
2013/12/28 职场文书
《自选商场》教学反思
2014/02/14 职场文书
酒店员工培训方案
2014/06/02 职场文书
房产分割协议书范文
2014/11/21 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang