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 相关文章推荐
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 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
动易数据转成dedecms的php程序
2007/04/07 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python轮询机制控制led实例
2020/05/03 Python
keras topN显示,自编写代码案例
2020/07/03 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
绩效专员岗位职责
2013/12/02 职场文书
《胡杨》教学反思
2014/02/16 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏