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 按键事件(兼容各浏览器)
Dec 20 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 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
用php来检测proxy
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Django实现跨域的2种方法
2019/07/31 Python
Python如何生成xml文件
2020/06/04 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
元旦晚会策划方案
2014/02/18 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
公司授权委托书样本
2014/09/15 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
自考生自我评价
2019/06/21 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏