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全局变量封装模块实现代码
Nov 28 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
js实现简易计算器功能
2019/10/18 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
详解anaconda安装步骤
2020/11/23 Python
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
学校清明节活动总结
2014/07/04 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
邀请函范文
2015/02/02 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers