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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
vue中锚点的三种方法
Jul 06 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 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实现的简单网络硬盘
2015/07/29 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
php实现简单四则运算器
2020/11/29 PHP
二级域名转向类
2006/11/09 Javascript
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
Vue数字输入框组件的使用方法
2019/10/19 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
高中自我评价范文
2014/01/27 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
保安岗位职责
2014/02/21 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
学术研讨会主持词
2015/07/04 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL