JavaScript中ES6规范中let和const的用法和区别


Posted in Javascript onAugust 06, 2020

ES6—— let 和 const 命令

引言

本文主要讲解ES6中变量的相关操作,变量的命名, 讲解 var、 let 、 const 三者的区别

正文

ES6中的 let 和 const 都是用来声明变量的, 他们与 var 有所区别

let 命令

我们都知道在for循环中,我们命名的变量 i 一般都只是为了在这个循环中使用,才临时命名的, 我们希望循环结束后,这个变量就消失, 但是却相反,用 var 命名的变量,在 for 循环结束后并不会销毁,而会存在于全局中。

for(var i=0; i<5; i++) {
	console.log('循环'+ i)
}
console.log(i)

/* 输出结果  */
循环1
循环2
循环3
循环4
5           // 这里是循环外输出的i

但是如果我们在 for 循环中,用到 let 去命名变量会怎么样呢?

for(let i=0; i<5; i++) {
	console.log('循环'+ i)
}
console.log(i)

/* 输出结果  */
循环1
循环2
循环3
循环4
undefined           // 这里是循环外输出的i,显示未定义

这样的话就解决了因为 var 命名导致的变量泄露的问题了, 其实它的本质就是作用域, let 只作用于他自身所在的代码块内,而 var 是针对全局都有效的。例如这一个简单的例子:

{
	let i = 1
	var n = 2
}
console.log(i)
console.log(n)

/* 输出结果 */
undefined
2

可以看到, let 命名的变量只存在于那个代码块内,到外部就访问不到了,而 var 就是针对全局命名的。

const 命令

const 和 let 类似,也是命名的变量只能在它所在的代码块内能被访问得到,到外部就无法被访问到,但是 const 与 let 的区别就在于, const 命名的变量是一个只读变量,简而言之就是命名了就无法在后面被修改,例如这个例子:

const a = 'apple'
let b = 'orange'

a = 'watermelon'
b = 'banana'

/* 输出结果 */
a = 'watermelon'
  ^

显而易见, 系统会直接报错, 因为 const 命名的变量 a 是无法改变的, 后续无法对其进行赋值。

其实 const 命名变量以后, 也不是说就真的无法改变了, 因为const命名时其实是把箭头指向了内存中的一个对象, 只要不改变这个对象地址, const 命名的变量还是可以变化的,例如:

const list1 = []

list1.push('变化1')

console.log(list1)

// ['变化1']

可以看到 list1.pish(' 变化1 ') 不会改变 变量 list1在内存中的地址。

但是 list1 = [ '变化1' ] 就会改变 list1 在内存中的地址,所以会报错

const list1 = []

list1 = ['变化1']

console.log(list1)

// 报错:list1 = ['变化1']
       ^

结束语

这就是 let 和 const 的简单应用,希望对大家有所帮助, 下一篇ES6(2)将讲解变量的解构赋值

到此这篇关于JavaScript中ES6规范中let和const的用法和区别的文章就介绍到这了,更多相关JavaScript中let和const用法区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
js实现星星海特效的示例
Sep 28 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 #Javascript
Vue Router中应用中间件的方法
Aug 06 #Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 #Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 #Javascript
You might like
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
jquery实现楼层滚动效果
2018/01/01 jQuery
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
深入理解javascript中的this
2021/02/08 Javascript
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python psutil监控进程实例
2019/12/17 Python
Python实现验证码识别
2020/06/15 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
个人求职简历的自我评价
2013/10/19 职场文书
超市店庆活动方案
2014/08/31 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
商家认证委托书格式
2014/10/16 职场文书
节约用电倡议书
2015/04/28 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android