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 浏览器检测代码精简版
Mar 04 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
Python中标准模块importlib详解
2017/04/16 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python 反向输出字符串的方法
2018/07/16 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
文艺节目主持词
2015/07/06 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
浅谈Java父子类加载顺序
2021/08/04 Java/Android