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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
浅析return false的正确使用
2013/11/04 Javascript
js实现分割上传大文件
2016/03/09 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python实现的堆排序算法示例
2018/04/29 Python
python写入文件自动换行问题的方法
2019/07/05 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python运算符+与+=的方法实例
2021/02/18 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
《狼》教学反思
2014/03/02 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014年采购工作总结
2014/11/20 职场文书
闪闪红星观后感
2015/06/08 职场文书
闪闪的红星观后感
2015/06/08 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android