了解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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
jquery 的 $("#id").html() 无内容的解决方法
Jun 07 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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文件是否有语法错误的方法
2009/12/23 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python3.4爬虫demo
2019/01/22 Python
Python实战购物车项目的实现参考
2019/02/20 Python
在python里面运用多继承方法详解
2019/07/01 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
文明家庭先进事迹材料
2014/05/14 职场文书
作风建设演讲稿
2014/05/23 职场文书
档案保密承诺书
2014/06/03 职场文书
女儿满月酒致辞
2015/07/29 职场文书
小学教代会开幕词
2016/03/04 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android