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 相关文章推荐
jquery操作对象数组元素方法详解
Nov 26 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
女娲补天教学反思
2014/02/05 职场文书
教师四风问题整改措施
2014/09/25 职场文书
走群众路线剖析材料
2014/10/09 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
奖学金感谢信
2015/01/21 职场文书
党员个人总结范文
2015/02/14 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python