前端入门21-JavaScript的ES6新特性

本篇内容全部摘自阮一峰的:ECMAScript 6 入门

阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什么会有这个新特性,这更于理解。

所以,后续不会再写个关于 ES6 系列的文章了,就在这篇里大概的列举一下,大体清楚都有哪些新特性就好了,以后需要用时再去翻一翻阮一峰的书。

正文-ES6新特性

ES6 新标准规范相比于 ES5 旧标准规范中,无非就三个方面的改动:新增、更新、废弃。

由于更新和废弃需要考虑到兼容性问题,所以这两方面的内容应该并不多,那么大部分基本都是新增的特性。对于新增的特性来说,大体上也还可以再分两类:完全新增的特性和基于旧标准扩展的特性。

下面就大概来过一下,ES6 中新增的特性。

Symbol

这是新增的一种原始数据类型,ES5 中原始类型有 5 种,在 ES6 中新引入了一种后,现在就是有 6 种原始数据类型了:Number、String、Boolean、null、undefined、Symbol

这个单词中文直译是:符号、标志等,但好像并没有在书中有这种叫法,书中都是直接使用 Symbol 来描述,可能中文翻译不能够很好的表示出这种原始数据类型的含义吧。

背景

之所以新增了这种原始数据类型,是为了解决:

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

基础用法 var s1 = Symbol('s1'); //参数只是用来描述当前 s1 变量,跟其他 Symbol 数据类型的变量相区分,在调用 toString 或 typeOf 时会输出当前数据类型跟描述信息 //第一种 var o = {}; o[s1] = "dasu"; //第二种 var o = { [s1]: "dasu" }; //第三种 var o = {} Object.defineProperty(o, s1, {value: "dasu"});

给一个对象定义一个属性名用 Symbol 数据类型来表述的方法有上述三种,如果使用 o.s1 = "dasu" 这种方式,是给 o 对象定义了一个属性名为 s1 且数据类型为字符串的属性,字符串就存在相等与否的场景。而使用上述三种方式,是给对象定义了一个属性名为 s1 但数据类型为 Symbol 的属性,如果后期又定义了另一个属性名为 s1 的 Symbol 原始值的属性,并不会覆盖之前定义的属性。

其他内容,包括关于 Symbol 属性的遍历、Symbol 自带的方法、Symbol 应用场景等见:

块作用域 let 和 const 背景

ES5 中变量的作用域只分全局作用域和函数内作用域,且全局变量本质上是全局对象的属性,书中是这么评价的:

顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);其次,程序员很容易不知不觉地就创建了全局变量(比如打字出错);最后,顶层对象的属性是到处可以读写的,这非常不利于模块化编程。另一方面,window对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。

为了解决这些问题,ES6 中新增了块级作用域的变量,通过关键字:let 和 const 声明的变量,作用域是块级作用域,同时,这些变量不属于顶层对象的属性。

const 定义的变量是常量,除此外,这个变量跟用 let 定义的变量没有其他方面的区别了。而通过 let 和 const 定义的变量行为、作用域类似于 Java 语言中定义的变量行为。

换句话说,let 和 const 定义的变量已经不包含 var 定义的变量的各种特性行为了,比如:没有变量的声明提前特性、存在暂时性死区(在定义之前不能使用,只能在定义变量位置之后使用)、不允许重复声明、作用域只有块级作用域等。

更多的参考:

Module 模块机制 背景

ES5 中并没有模块机制,常见的方式是:前端里通过 <script> 加载各种不同的 js 文件代码,在 js 文件代码内部中提供一些全局变量或全局函数供其他 <script> 使用。

说白了,就是不同 js 文件通过全局对象作为通信的桥梁来相互访问。而为了解决不同 js 文件共享全局对象造成的变量冲突问题,通常作为模块的 js 里的代码都会放在一个立即执行的函数内。

而 ES6 中,引入了模块的机制。

基本使用

当在 HTML 文档中,通过指定 <script> 标签的 type 属性为 module 时,如:

<script type="module" src="http://www.likecs.com/foo.js"></script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfxpz.html