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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js实现select下拉框选择
Jan 11 Javascript
JavaScript内置对象之Array的使用小结
May 12 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
我的论坛源代码(一)
2006/10/09 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python中pip更新和三方插件安装说明
2018/07/08 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
家庭教育先进个人事迹材料
2014/01/24 职场文书
面试必备的求职信
2014/05/25 职场文书
推广活动策划方案
2014/08/23 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
python中opencv实现图片文本倾斜校正
2021/06/11 Python
利用Python实现模拟登录知乎
2022/05/25 Python