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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JS实现复制功能
Mar 01 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php中return的用法实例分析
2015/02/28 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
原生js实现表格翻页和跳转
2020/09/29 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python检测服务器是否正常
2014/02/16 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python初步实现word2vec操作
2020/06/09 Python
python中wheel的用法整理
2020/06/15 Python
网络宣传方案
2014/03/15 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
法人授权委托书范本
2014/04/04 职场文书
十周年庆典策划方案
2014/06/03 职场文书
文明社区申报材料
2014/08/21 职场文书
单位租房协议书范本
2014/12/04 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
网络研修心得体会
2016/01/08 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server