了解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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
javascript常见操作汇总
Sep 03 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
Phpbean路由转发的php代码
2008/01/10 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php四种定界符详解
2017/02/16 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
美术教学感言
2014/02/22 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
爱的承诺书
2015/01/20 职场文书
管理人员岗位职责
2015/02/14 职场文书
热爱劳动主题班会
2015/08/14 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
实现GO语言对数组切片去重
2022/04/20 Golang