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 validate 验证注册表单实例演示
Mar 25 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 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
做一个有下拉功能的留言版
2006/10/09 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
门卫班长岗位职责
2013/12/15 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
员工工作自我评价
2014/09/26 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Java 死锁解决方案
2022/05/11 Java/Android