了解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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何用原生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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年调度员工作总结
2015/04/30 职场文书
关于军训的感想
2015/08/07 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers