浅谈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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
js运动应用实例解析
Dec 28 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
如何用JavaScipt测网速
May 09 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php学习笔记之面向对象
2014/11/08 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
浅谈PHP进程管理
2019/03/08 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
小学德育工作经验交流材料
2014/05/22 职场文书
三严三实对照检查材料
2014/09/22 职场文书
python获取对象信息的实例详解
2021/07/07 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
MySQL实现配置主从复制项目实践
2022/03/31 MySQL