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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
在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
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python读取ini配置文件过程示范
2019/12/23 Python
详解django中Template语言
2020/02/22 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
小学教学随笔感言
2014/02/26 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
赡养老人协议书
2014/04/21 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
校长一岗双责责任书
2015/05/09 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书