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 函数使用说明
Apr 07 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vuex入门最详细整理
Mar 04 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
react 项目中引入图片的几种方式
Jun 02 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
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python打开使用的方法
2019/09/30 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python开发入门——set的使用
2020/09/03 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
2014年国庆标语
2014/06/30 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js