了解javascript中let和var及const关键字的区别


Posted in Javascript onMay 24, 2019

1.声明后未赋值,表现相同

//一个例子
'use strict';

(function() {
 var varTest;
 let letTest;
 console.log(varTest); //输出undefined
 console.log(letTest); //输出undefined
}());

2.使用未声明的变量,表现不同

//一个例子
(function() {
 console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
 console.log(letTest); //直接报错:ReferenceError: letTest is not defined

 var varTest = 'test var OK.';
 let letTest = 'test let OK.';
}());

3.重复声明同一个变量时,表现不同

//一个例子
'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);
}());

4.变量作用范围,表现不同

//一个例子
'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不是同一个变量
}());

5.const定义的变量不可以修改,而且必须初始化

//一个例子
const b = 2;//正确
// const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出

6.var定义的变量可以修改,如果不初始化会输出undefined,不会报错

var a = 1;
// var a;//不会报错
console.log('函数外var定义a:' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a:' + a);//可以输出a=4
} 
change();
console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4

7.let是块级作用域,函数内部使用let定义后,对函数外部无影响

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

学习到此结束!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 #Javascript
JS实现判断数组是否包含某个元素示例
May 24 #Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 #Javascript
You might like
很让人受教的 提高php代码质量36计
2012/09/05 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
推荐11个实用Python库
2015/01/23 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python实现字典嵌套列表取值
2019/12/16 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
小学生作文评语大全
2014/04/21 职场文书
小学社会实践活动总结
2014/07/03 职场文书
旷课检讨书范文
2014/10/30 职场文书
房产公证书
2015/01/23 职场文书
python爬虫--selenium模块
2021/03/31 Python