【ES6】ES6的重要的13种新特性之let、const、块级作用域

在正式学习ES6之前,我先到知乎上去搜索了一些学习方法。在选择相关书籍的时候,看到有知乎用户对比《深入理解ES6》、阮一峰老师的《ES6标准入门》和小问的《实战ES2015》这三本书,该用户得出的结论是:

1、《深入理解ES6》最大的特点是从浅到深。从为什么引入这个特性开始,一步一步地深入展开讲解。但有时就是由于过分的深入浅出,有头重脚轻的感觉。大篇幅的展开讲引入的原因,到如何使用特性时,反而不是很详细,或者说不是很系统。

总结一下,就是”为什么”的部分讲得深,”是什么”的部分讲得浅

2、《ES6标准入门》这本书继承了阮一峰老师一贯的风格,“猪肚”的部分夯地非常实,把一个特性的各种参数,各种使用场景,各种注意事项都讲得很清楚。比如,该特性有N个属性,M个方法。接下来,就开始系统地讲解这N个属性M个方法,所以,每部分的篇幅都很长

缺点是“为什么”的部分讲的相对少,有的甚至只有一句话。于是,学起来可能就有一种似懂非懂的感觉

3、《实战ES2015》这本书主要讲的是一些重点特性和偏实战的内容。适合全面学完ES6基础知识以后,在实战之前好好阅读。类比于高考的二轮重点复习吧

本人抱着一种强烈的好奇心和求真欲,想以自己的亲身经历来检验这种说法是否靠谱,趁着双十一购入了这三本书籍,决定一边学习一边比对这三本书的优缺点。以下是本人的学习笔记,为了方便比对,注明了每个知识点的来源。

《深入理解ES6》

《ES6标准入门》

《实战ES2015》

一、ECMAScript

1.ECMAScript是什么?和与JavaScript有什么关系?

Web浏览器或JavaScript运行环境只是根据ECMAscript规范实现了一套JavaScript运行引擎,使其成为JavaScript作为脚本语言运行的宿主环境。而ECMAScript是对实现ECMA标准语言描述。所以,实际上ECMAScript与web浏览器并不存在相互依赖的关系。如今,ECMAScript已经超越了web浏览器脚本这一角色,成为了一种真正的通用语言标准。(《实战ES2015》)

ECMAScript是JavaScript的规格,JavaScript是ECMAScript的一种实现,除此以外还有其他实现。(《ES6标准入门》、《实战ES2015》)

2.ES6和ECMAScript2015的关系

ES6是5.1版本以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、ES2017等,而ES2015是正式名称,特指当年发布的正式版本的语言标准。(《ES6标准入门》)

3.ECMAScript的历史更替

《ES6标准入门》、《实战ES2015》

4.在浏览器中使用ES6

由于现有浏览器对ES6语法的支持程度不同,很可能会产生报错,所以在浏览器中使用ES6需要将ES6代码转换成ES5代码 。

主要用babel转码器、引入实时转码文件、在线转换这三种方式。

(《ES6标准入门》)

5.ES2015能为实际开发带来什么?

语法糖

语法糖是指添加某种语法,对语言的功能没有影响,但更方便程序员使用。例如c语言中的a[i]是*(a+i)的语法糖。ES2015中的箭头函数就是使用self、that之类变量(以便在下一层作用域内也能获得当前作用域上下文对象)的语法糖。

模块化

NPM是JavaScript世界中最为流行的JavaScript模块管理平台

ES2015原生的模块化机制中的模块内容选择性引入为JavaScript工程化提供更多的想象空间。

webpack可以利用ES2015中的模块化机制最大程度精简JavaScript应用的体积。

组件化

组件化开发是模块化开发的高级体现

let

组件化开发所重视的是组件之间的非耦合关系和组件的可重用性,而组件之间也可以存在依赖性。同一类内容块可以抽象化为一个组件,并在生产中重复使用

虚拟滚动视图 :在一个长列表视图中,用户的可见范围是有限的,而内容长度却可以无限增长,内容元素过多会导致性能低下问题。虚拟滚动视图通过利用尽可能少的内容组件来展示处在可视范围内的内容元素,并且在用户进行滑动操作时不断计算偏差而重复使用已存在的元素。

Vue.js和React这两款JavaScript框架中模块化和组件化都有很好的体现。

内存安全

const为ECMAScript带来定义常量的能力,可以实现变量名与内存地址的强绑定,让变量不会因为除了定义语句和删除语句外的代码丢失内存地址的绑定。

let为ECMAscript修复了var因为代码习惯不佳而导致的代码作用域混乱等问题,同时实现了块状作用域。

《实战ES2015》

二、let const和块级作用域

《实战ES2015》中先介绍了ES2015之前没有块级作用域,引入了由于没有块级作用域循环绑定事件时出现的问题。然后引入let代替var定义变量,通过对比let和var的不同点引入了重定义检查可被用于块级作用域。随后介绍了const定义常量,通过对比变量和内存的关系深入介绍了const的实现原理,再引入因原理导致对象的值可变,同时讲解如何获得值不可变的对象。再介绍了const也会产生块级作用域。通过回顾ES2015之前的变量生命周期来介绍ES2015已经更正了这种逻辑错误。为了得到更佳体验,总结了使用ES2015时遵从的三条原则;同时由于块级作用域的存在,引入for-of循环,同时介绍了配合ES2015中的解构特性和数组方法entries的使用。

ES2015前只有全局作用于和函数作用域。

循环绑定事件中,使用var定义的计数器i会存在于for循环的上一层作用域中,触发的响应函数中对计数器i的引用获得的值都会是一样的。

let的重定义检查:当一个变量名在同一个作用域内被定义第二次时,便会抛出错误。

let可被用于块级作用域:在循环绑定事件中,循环体的每次执行都会产生一个作用域,让每次循环体的执行都能保存当前计数器的数值和引用。

变量和内存的关系:变量名 通过 内存绑定 绑定内存地址。其中内存绑定可变。

const定义常量的原理:在变量名和内存地址之间建立不可变的绑定。

对象的值可变:对象是由若干内存空间片段组成的值。对象内存地址不变,但是仍可修改对象属性。

值不可变的对象:配合Object.freeze()方法。

const块级作用域:遵循变量在作用域中的生命周期。

变量的生命周期:由作用域和对其的引用决定。

ES2015更正逻辑错误:不允许变量或常量在被定义前被其他语句所读取。

三条原则:1.使用const来定义常量。2.使用let来定义变量。3.不再使用var。

for-of循环:

1

《ES6标准入门》先介绍let的基本用法,指出let更适合在for循环在应用。再由var会发生变量提升指出let不存在变量提升,并且存在暂时性死区不可重复声明。之后由变量提升和for循环i泄露成全局变量指出块级作用域的必要性来介绍ES6的块级作用域,同时指出立即匿名函数不再必要;同时介绍了在块级作用域中的函数声明。因为块级作用域没有返回值引入do表达式。再介绍const的基本用法,介绍了const的本质,介绍了ES6声明变量的6种方法。最后介绍了顶层对象的属性global对象

let不存在变量提升:let所声明的变量一定要在声明后使用。

暂时性死区:如果块级作用域中存在let和const命令,则这个块级作用域对这些命令声明的变量从一开始就形成封闭作用域,只要在声明前使用这些变量就会报错。typeof不再百分之百安全。

在块级作用域中的函数声明:在浏览器的ES6环境下,块级作用域内声明函数的行为类似var声明变量。

do表达式:使得块级作用域可以变为表达式,拥有返回值。

const的基本用法:const一旦声明常量,必须立即初始化。不能留到以后赋值。

ES6声明变量的6种方法:var、function、let、const、import、class。

顶层对象的属性:顶层对象在浏览器环境指的是window对象;在node环境中指的global对象;ES5中顶层对象的属性等价于全局变量;ES6中var和function声明的全局变量依旧是顶层对象的属性;let、const和class声明的全局变量不属于顶层对象的属性。

《深入理解ES6》与《ES6标准入门》内容接近。只是在先后顺序中略有差异。

通过第一章对比本人得出的结论是《ES6标准入门》更加完备和全面,《深入理解ES6》出彩的地方不大,而《实战ES2015》非常简练,把最重要和常见的新特性交代的非常清楚,本人由于时间和精力限制,后面的学习将主要围绕《实战ES2015》展开。

附代码地址:https://github.com/JoseyDon/ES6-demo