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 win 7透明弹出层效果的简单代码
Aug 06 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue视频播放暂停代码
Nov 08 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP调用其他文件中的类
2018/04/02 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
js调用设备摄像头的方法
2018/07/19 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
Python 基础之字符串string详解及实例
2017/04/01 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python Django的web开发实例(入门)
2019/07/31 Python
详解Python文件修改的两种方式
2019/08/22 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
django model通过字典更新数据实例
2020/04/01 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
身边的榜样活动方案
2014/08/20 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
基石观后感
2015/06/12 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Java实现给Word文件添加文字水印
2022/02/15 Java/Android