了解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实现的listview效果
Apr 28 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
JavaScript中数组去重的5种方法
Jul 04 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学习之PHP运算符
2006/10/09 PHP
浅析php工厂模式
2014/11/25 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
对python中Librosa的mfcc步骤详解
2019/01/09 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
国际会议邀请函范文
2014/01/16 职场文书
新学期家长寄语
2014/01/19 职场文书
教师读书活动总结
2014/05/07 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2015党建工作简报
2015/07/21 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫