浅谈ECMAScript6新特性之let、const


Posted in Javascript onAugust 02, 2017

第一次写博客有点紧张,如果说的不对的地方,欢迎大家留言指正。咱们先来说说“ECMAScript”这到底是啥玩意儿?它和javascript的关系又是如何的?首先,在1996年11月的时候,javascript的创造者(网景公司Netscape)和sun公司联合ECMA(欧洲计算机制造商协会)对javascript进行标准化,次年,ECMA发布262号标准文件文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准(在这里提个问题:为什么要标准化?),并将这种语言称为ECMAScript,这个版本就是1.0版的。这个标准一开始就是针对与javascript来制定的,但是没有称之为“javascript”,这其中有两个原因,一是:商标;二是:想体现这门语言的规格制定者是ECMA,这样有利于保证开发性和中立性。所以,ECMAScript和javascript之间的关系就是,前者来制定规格,后者来实现(另外的ECMAScript的实现还有JScript和ActionScript)。一般的情况下,这两个词是可以互换的。

接下来来介绍一下es6中的新特性之“let”。首先,这个玩意儿其实和var这个命令类似,都是用于声明变量的,但是所声明的变量只在let命令所在的代码块内有效(这里涉及到块级作用域的概念,然而这个概念也是es6中提出来的。在后面我再来讲。PS:在其他编程语言中,早就有块级了)

浅谈ECMAScript6新特性之let、const浅谈ECMAScript6新特性之let、const

上面的两张图就反映出了let所声明的变量只在let命令所在的代码块内有效。下面来举个例子:

浅谈ECMAScript6新特性之let、const浅谈ECMAScript6新特性之let、const浅谈ECMAScript6新特性之let、const

发现区别了吗?var声明的变量它是全局范围内都有效的,每一次的循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i值(当然,也可以利用闭包来解决这个问题【第三张图】)。如果使用的是let,声明的变量仅在块级作用域内有效,当前的i只在本轮循环有效,所以每一次循环i其实都是一个新的变量。在期间我发现了一个更神奇的东西,请看下面一张图:

浅谈ECMAScript6新特性之let、const

注意①、let不像var一样会发生“变量提升”的现象,所以,使用之前,必须先声明,不然就会报错。

②、暂时性死区(temporal dead zone,简称TDZ),只要块级作用域内有let命令,它所声明的变量就会绑定这个区域,不收外部的的影响。简单的来说,在代码块中,使用let命令声明变量之前,变量都是不能用的。例子:

浅谈ECMAScript6新特性之let、const

③、let不允许在同一个作用域内重复声明同一个变量。

好了,现在再来讲一讲上文提及到的一个东东:“块级作用域”。在es5中只有“全局作用域”和“函数作用域”。这使得我在刚开始学的时候一脸蒙蔽,其他语言都有块级作用域(比如C语言),但js就没有。幸好在es6中加入了“块级作用域”的概念,let实际上为javascript新增了块级作用域,有了块级作用域,就可以避免变量泄露成全局变量,代码快之间不会受到影响。另外,es6里还规定了:函数本身的作用域在其块级作用域内。注意!注意!注意!重要的事说三遍:(如果是在严格模式下,函数只能在顶级作用域和函数内部声明,其他情况下【比如:if语句、循环语句下】就会报错) :

浅谈ECMAScript6新特性之let、const

最后再来说说es6中的新特性之“const”,好吧,其他编程语言里早就有了,但是javascript在es6之前还是没有~~。这个是用来声明常量的,其表现为不可修改的,还有就是声明的同时必须进行赋值,否则就会报错。

注意:①、在作用域方面,它其实和let作用域相同:只在声明所在的块级作用域内有效;

 ②、const命令声明的常量同样不存在“变量提升”,同样存在“暂时性死区”,必须在声明后才能使用。

 ③、const也不能重复声明常量。

综合例子:

浅谈ECMAScript6新特性之let、const

 ④、对于复合类型的变量,常量名不指向数据,而是指向的是数据的指针地址,const命令只是保证了地址没有变,但并不保证数据的不变,所以在使用const命令声明常量为对象时要小心!!其实我们可以对其对象进行“冻结”,使用Object.freeze()即可实现。

浅谈ECMAScript6新特性之let、const

浅谈ECMAScript6新特性之let、const

浅谈ECMAScript6新特性之let、const

以上这篇浅谈ECMAScript6新特性之let、const就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JavaScript 学习技巧
Feb 17 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
js实现前端图片上传即时预览功能
Aug 02 #Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 #Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 #Javascript
原生js获取left值和top值的三种方法
Aug 02 #Javascript
认识less和webstrom的less配置方法
Aug 02 #Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解基于node的前端项目编译时内存溢出问题
Aug 01 #Javascript
You might like
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
js常用代码段整理
2011/11/30 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
Linux机考试题
2015/07/17 面试题
卖房授权委托书样本
2014/10/05 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
电气工程师岗位职责
2015/02/12 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js