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,超强推荐expand.js
Dec 23 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
layui文件上传实现代码
May 20 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 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
239军机修复记
2021/03/02 无线电
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP调用其他文件中的类
2018/04/02 PHP
VBScript版代码高亮
2006/06/26 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
vue的mixins属性详解
2018/03/14 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python实现简单图片物体标注工具
2019/03/18 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
探矿工程师自荐信
2014/01/24 职场文书
临床护士自荐信
2014/01/31 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
尼克胡哲观后感
2015/06/08 职场文书
叶问观后感
2015/06/15 职场文书