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 09 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Sort()函数的多种用法
Mar 20 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP 微信支付类 demo
2015/11/30 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
Javascript 布尔型分析
2008/12/22 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js获取class的所有元素
2013/03/28 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
简单介绍Python中的JSON模块
2015/04/08 Python
python3序列化与反序列化用法实例
2015/05/26 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python tkinter实现连连看游戏
2020/11/16 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
旅游项目开发策划书
2014/01/18 职场文书
上课迟到检讨书
2014/01/19 职场文书
三年级数学教学反思
2014/01/31 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript