了解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中链式调用之研习
Apr 07 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
JS typeof fn === 'function' && fn()详解
2020/08/22 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python开发之函数定义实例分析
2015/11/12 Python
django中静态文件配置static的方法
2018/05/20 Python
Python运行DLL文件的方法
2020/01/17 Python
python如何将图片转换素描画
2020/09/08 Python
博士生入学考试推荐信
2013/11/17 职场文书
业务主管岗位职责
2013/11/20 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
学生实习介绍信
2014/01/15 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
违纪检讨书范文
2015/01/27 职场文书
公司借条范本
2015/05/25 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers