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 相关文章推荐
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
Paypal支付不完全指北
Jun 04 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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
解密效果
2006/06/23 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
在Mac上删除自己安装的Python方法
2018/10/29 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
实现Python与STM32通信方式
2019/12/18 Python
python对文件的操作方法汇总
2020/02/28 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
详解pandas映射与数据转换
2021/01/22 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
物理系毕业生自荐书范文
2014/02/22 职场文书
安全生产实施方案
2014/02/23 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
开业庆典主持词
2014/03/21 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
禁止酒驾标语
2014/06/25 职场文书
自我检讨书怎么写
2015/05/07 职场文书
班主任工作总结范文
2015/08/13 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Nginx利用Logrotate实现日志分割
2022/05/20 Servers