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的表格操作插件
Apr 22 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 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实现微信退款功能
2018/10/02 PHP
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
jquery图片放大镜效果
2017/06/23 jQuery
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python命令行参数sys.argv使用示例
2014/01/28 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
windows下python安装pip图文教程
2018/05/25 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python学习开发mock接口
2019/04/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
C++是不是类型安全的
2014/02/18 面试题
公司董事长职责
2013/12/12 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
西式婚礼主持词
2014/03/13 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
手术室护士个人总结
2015/02/13 职场文书
java解析XML详解
2021/07/09 Java/Android