了解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去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 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基础知识介绍
2013/09/17 PHP
php浏览历史记录的方法
2015/03/10 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python常见数据类型转换操作示例
2019/05/08 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
详解python tcp编程
2020/08/24 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
投诉信范文
2015/07/02 职场文书
教师节感想
2015/08/11 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
php字符串倒叙
2021/04/01 PHP
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android