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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
javascript实现遮罩层动态效果实例
May 14 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php根据生日计算年龄的方法
2015/07/13 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
vue filters的使用详解
2018/06/11 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
详解Python中的四种队列
2018/05/21 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
丧事主持词大全
2014/04/02 职场文书
户外活动总结范文
2014/04/30 职场文书
企业环保标语
2014/06/10 职场文书
财务部会计岗位职责
2015/02/03 职场文书
护士岗位竞聘书
2015/09/15 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
python中的sys模块和os模块
2022/03/20 Python