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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
详解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&&mysql)四
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
修改file按钮的默认样式实现代码
2013/04/23 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python端口扫描系统实现方法
2014/11/19 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
视光学专业自荐信
2014/06/24 职场文书
慰问信格式
2015/02/14 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
小学音乐课教学反思
2016/02/18 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
flex弹性布局详解
2022/03/20 HTML / CSS
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js