1995年,Netscape更名为诞生javascript,成为英特网的必备组件,1997年,ECMA组织规定了浏览器脚本语言的标准,并将javascript称之为ECMAScript,并发布第一个版本,因此可以把ECMAScript是JavaScript的规格,JavaScript是ECMAScript的一种实现,日常用语中,两者可以等同。在经过了20年测沉淀与发展,2015年6月 ECMAScript6 正式发布,下面我们来看看他带来的一些新特性。
1、const、let关键字
const:申明变量必须赋值初始化,无法从新赋值(通常用于自身不变更类型数据申明)
let: 申明变量可以从新赋值(通常用于变量类型数据声明)
为了规避var关键字变量提升带来的问题,let,const 关键字由此而生,let、const同一作用域只能声明一次,存在变量提升,不做初始化操作,存在暂时性死区。
2、字符串扩展:
2.1、方便字符串拼接,如 :`模板字面量测试${name}`,
2.2、加强Unicode的支持, "u{41}u{42}u{43}" ==="ABC"
3、解构赋值:结构解体,重新构建,是赋值运算符的扩展,可分有结构目标(左边)解构源(右边)两部分,解构赋值模型包括:可忽略、剩余解构、不完全解构等模型,具体可参考es6解构赋值相关文档,这里不做详细介绍。
4、展开运算符("..."):字面量对象展开为多个元素
作用:结合数组、获取剩余参数(rest)、获取函数可变参数、对象解构赋值,对象的扩展
注意:当展开运算符在对象扩展的解构赋值使用时,必须为最后一个参数,而且不能赋值继承至原型对象的属性,在扩展中有有取值函数get,会被立即执行如下图:
5、箭头函数
ES6中,箭头函数与java的lambda表达式类似,跟前端开发者带来了极其舒适的开发体验,但是也有以下开发者需要注意的地方:
5.1、声明方式:普通函数能使用函数声明或则函数表达式声明,箭头函数只能为表达式声明的匿名函数。
5.2、this指向:普通函数中,this指向调用它的对象,或者指向构造函数创建的对象实例。在箭头函数中,箭头函数本身不创建this,他通过捕获执行上下文中的this为自己所用。this指向问题,参考下篇。
5.3、其他:箭头函数不具有函数生成器(Generator)、不具有原型对象、不具有arguments、不具有super等,因此,箭头函数不能作为构造函数使用。
5.4、箭头函数兼容(babel)及实现:可理解为箭头函数向下兼容,与普通函数的相互转换。后文AST篇具体介绍。
6、新增数据结构: 在ES6中新增Set、WeakSet、Map、WeakMap数据结构,方便开发者使用。
6.1、Set:一种集合的数据结构,类似于数组。Set中所有的成员无序唯一。在Set中加入的成员不会发生类型转换 ,对于成员中存在对象,只针对对象键去重,并取后一个定义值。
6.2、WeakSet:类似Set数据结构,但WeakSet的成员只能是具有 Iterable (具有迭代行为的对象)接口的对象,而且每个成员都是弱引用,所以垃圾回收阶段忽略WeakSet对该对象的应用,从而垃圾能得到及时清理,从而避免内存泄露等问题,因此WeakSet不能被遍历,也不具有keys()、values()、entries()、foreach()等方法。
6.3、Map: 类似于对象,是一个键值对的集合,解决了传统对象只能以字符串为键值的问题。更完善的实现了hash结构。Map成员为任何具有 遍历器(Iterator:为不同的数据结构提供统一的访问机制)接口、且每个成员都是一个双元素的数组的数据结构
6.4、WeakMap: 类似于Map结构,但是WeakMap的必须为一个对象(除null),键名所指向的对象不标记垃圾回收机制,同WeakSet,但是weakMap弱应用的只是键名,键值不为弱应用,标记垃圾回收机制。
6.5、Map与Set应用: 由上述结构可以看出,Map 结构API更加简洁,在ES6中Array在进行查改删的操作时需要遍历,Set数据结构在进行删改操作时也需要遍历,因此从性能上看优先使用Map数据结构。
在开发中合理利用数据结构,能提升开发效率,增加项目的可维护性,如果有兴趣的同学可以尝试自己实现以上4种数据结构,增加对数据结构的认识和理解。
7、class关键字
在ES6中用class关键字创建类,类只是一个语法糖,原型继承在底层封装起来,ES6 中的类可简单理解为function,class不具有变量提升、类不能重复定义、类没有私有属性和私有方法。类的静态方法(static),只能通过类名调用,可与实例的方法重名,this指向类,可继承等特点。具体实现可参考后文类与function。
8、Promise: Promise 篇详细介绍
9、模块化(Module):模块化篇详细介绍
10、Proxy与Reflect: Proxy、Reflect、defineProperty篇详细介绍
11、其他:es6除了上述新增特性外,还新增了以下许多特性
正则扩展:matchAll、后行断言(先行断言a只出现在b之前如:/a(?=b)/, ES2018后支持后行断言,与先行断言相反 如:/(?<=b)a、y修饰符等
数值(Number)扩展:isFinite、isNaN、parseInt(移植到Number)、parseFloat(移植到Number)、isInteger、EPSILON(极小常量)、isSafeInteger(验证整数范围-2^53-2^53)、Math扩展、BigInt等
数组(Array)扩展:find、findIndex、keys、values、entries、fill、flat、flatMap、includes、from、of等
对象(Object)扩展及新增方法:属性名表达式、链判断运算符(es2020)、is、assign(对象合并,浅拷贝)、getOwnPropertyDescriptor等
ArrayBuffer: 操作二进制数据的一个接口,node篇做介绍。
总结:ES6发布使得javascript语法更加丰满,日常使用中也更加灵活。希望大家跟上发展的脚步,积极提升自身开发能力,别路过浩如烟海的知识,最终却都形同陌路。
下一篇:js灵魂整理(五):this 指向问题