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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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 正则 过滤html 的超链接
2009/06/02 PHP
php动态绑定变量的用法
2015/06/16 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Vue实现省市区三级联动
2020/12/27 Vue.js
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
英国女士家居服网站:hush
2017/08/09 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
《生命的药方》教学反思
2014/04/08 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL