平凡前端之路_14.ES与ES6

系列文章

平凡前端之路_01.HTML与 HTML5
平凡前端之路_05.CSS与CSS3
平凡前端之路_14.ES与ES6
平凡前端之路_15.let 和 const声明
平凡前端之路_16.变量的解构赋值
平凡前端之路_17.展开操作符(Spread)/剩余参数(Rest)
平凡前端之路_18.字符串的扩展

什么是JavaScript

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。

---

• 动态：

  在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。

• 弱类：

  计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。

• 原型：

  新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。

JavaScript由三部分组成

---

• ECMAScript（核心）

  规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象。

• DOM（文档对象模型）

  整个页面映射为一个多层节点结果，可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。

• BOM（浏览器对象模型）

  支持可以访问和操作浏览器窗口的浏览器对象模型，可以控制浏览器显示的页面以外的部分。

什么是ES？

ES 全称ECMAScript，以JavaScript为基础制定的一种脚本语言标准规范。

---

ES已经超越浏览器脚本这一角色，成为了一种真正的通用语言标准。

ECMAScript的发展速度在不断加快，影响范围越来越大，除了前端开发以外，借助着Node.js的力量在服务器、桌面端甚至硬件设备等领域中也发光发热。

ES的发展

• ECMAScript 1.0是1997年发布
• ECMAScript 2.0是1998年6月发布
• ECMAScript 3.0是1999年12月发布，在业界得到广泛支持，成为通行标准，普遍的学习JavaScript，其实就是在学3.0版的语法。
• ECMAScript 4.x因为过于复杂废弃了。
• ECMAscript 5.1是2011年6月发布，并且成为通行国际标准。
• ECMAScript 6是2015年6月发布，即ES2015，成为国际标准。
• ECMAScript 7是2016年6月发布，即ES2016。
• ECMAScript 8是2017年6月发布，即ES2017。
• ECMAScript 9是2018年6月发布，即ES2018。
• ECMAScript 10是2019年6月发布，即ES2019。
• ECMAScript 11是2020年6月发布，即ES2020。

---

什么是ES6?

ECMAScript第六个版本，在保证向下兼容的前提下，在ES5之后的下一代标准，泛指ES5.1版后的下一代标准，涵盖了ES2015、ES2016、ES2017等。

---

随着时间的推移，支持度已经越来越高了，所有的现代浏览器都完整的支持ES5，ES6的大部分特性以及ES6+部分都得到了支持，旨在使es能编写复杂大型应用程序，成为企业级开发语言。

通过使用Babel、Traceur等转码器能将ES6代码转为ES5代码，让浏览器支持部分ES6及ES6+特性。

ES6特性

1. let和const声明

   ES6 新增了两种声明变量的方式（let 和 const）

   let和const声明的变量只在其所在代码块内有效，实现了“块级作用域”的效果；

   const声明一个只读的常量，一旦声明就不能改变值（因此一旦声明必须立即初始化）。

2. 变量的解构赋值

   ES6 新增了解构赋值，解构赋值是对赋值运算符的扩展。

   是一种以数组或对象模式进行匹配，从数组和对象成员中提取数据，然后赋值给变量的特殊语法，这是将一个数据结构快速方便分解为更小的部分的过程。

3. 展开操作符(Spread)/剩余参数(Rest)

   ES6 新增扩展运算符（Spread Operator）和剩余参数（Rest Parameter）。

   主要作用是方便处理函数参数和数据结构。虽然它们在语法上有些相似，都是在变量或字面量之前加三个点（…），但它们的功能却有着一些不同之处。

   展开操作符(Spread)则可以将可迭代对象（如数组、Set、Map 等）中的所有元素“展开”成多个独立的值。这些值可以用于创建新的数组、Set、Map 等数据结构，也可以作为函数参数传递给其他函数。

   剩余参数(Rest)，可以在用于函数定义中，可以在函数参数中捕获所有多余的参数收集到一个新的数组中，并且可以像普通数组一样使用数组语法进行处理。或者用于模型解构中，可以将没有对应模式变量的实参/索引项收集到一个数组/对象中。

4. .字符串的扩展

   ES6版本引入了许多新的字符串相关功能:

   • 模板字面量:使用反单引号(`)来创建带有变量占位符的字符串，可以更方便地进行字符串拼接。

   • 多行字符串:允许在代码中使用多行字符串而不需要使用转义字符或字符串连接符。

   • 字符串插值:在模板字面量中使用（${}）语法将变量的值嵌入到字符串中。

   • 字符串拓展方法:字符串添加了许多新的方法，例如startsWith、endsWith、includes等，使得字符串操作更加方便和易读。

   • Unicode支持:允许在字符串中使用Unicode字符，包括表情符号和其他特殊字符。

5. 数组的扩展

   ES6新增扩展运算符（…）

   ES6新增多个数组方法：转化数组（Array.of、Array.from）；查找数组成员（find、findIndex、includes）；遍历数组成员（entries、keys、values）

6. 函数的扩展

   ES6新增箭头函数，允许使用=>定义函数。

   箭头函数快速地创建匿名函数，可以用来以更精简地语法创建较小地回调函数。

   箭头函数没有自己的this，内部的this就是外层代码块的this，因此其指向会固定化，就是定义时所在对象，而不是使用时所在的对象。

   ES6允许为函数参数设置默认值。

   ES6引入剩余参数（…）用于获取函数的剩余参数并放入一个数组中；

   ES6函数的name属性返回函数的函数名；

7. 对象的扩展

   ES6允许在对象中直接写变量和函数，这时属性/方法名为变量/函数名，属性值为变量/函数的值；

   ES6允许用字面量定义对象时，把表达式放在方括号内，作为对象属性名。

   ES6新增多个对象方法：遍历对象成员（values、entries）；对象合并（assign）

8. Promise的扩展

   Promise 是对一次异步调用的引用，将可能在某处解决（resolve）或者失败（ reject ）。

   Promise是一个容器，通常保存着一个异步操作的结果。

   Promise 支持链式调用，允许你通过一组函数传递数据。

   Promise是异步编程的一种解决方案，有了它就可以避免层层嵌套的回调函数。

   多个 Promise 能够更好地被组合在一起执行。

   promise 有三种状态：进行中（pending）、解决（resolve） 或者 失败（ reject ）。在 promise 没有返回 resolved 或者 rejected 时是 pending 状态。

   ES6新增多个Promise方法：Promise.all、Promise.race、Promise.any

9. 类的扩展

   ES6引入了Class类的概念，使用Class关键字可定义类。

   实质上是 使用自定义原型创建对象的语法糖（对语言的功能并没有影响，但是更方便程序员使用），有着比之前的构造函数更好的语法，让程序更加简洁，有更高的可读性。类的所有方法都是定义在类的prototype属性上面。

   类在语法上更加贴合面向对象的写法，定义类的方法时，前面不需要加function，方法之间也不需要逗号。

   类可以继承自其他类，实现继承更加易读、易理解，对初学者更加友好。

10. 模块的扩展

    ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案

    每一个模块都有自己单独的作用域，模块之间的相互调用是由导出命令（export）用于规定模块的对外接口，导入命令（import）用于输入其他模块提供的功能，同时还提供默认导出命令（export default）为模块指定默认输出对外接口。

11. Symbol

    ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，用来定义独一无二的对象属性名，是es语言的第七种数据类型。

    Symbol通过Symbol函数生成，可接受一个字符串作为参数，该字符串只是作为对当前Symbol值的描述，因此相同参数的Symbol函数的返回值并不相等。

    Symbol主要作为对象属性名，以保证不会出现同名的属性，定义时需要放在方括号之中。

    Symbol作为属性名，不会出现在for…in循环中，也不会被keys、getOwnpropertyNames()等方法返回。通过Object.getOwnPropertySymbols()可获取对象的所有Symbol值。

12. Set和Map数据结构

    ES6中新增Set与Map数据结构。

    ES6 中数据结构 Set，类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。

    Map提供了“值—值”的对应，是一种更完善的Hash结构实现。

    ES6 提供了多个Set实例方法：成员操作（add、delete、clear）；成员遍历（ keys、values、entries、forEach）；查找成员（has）

JS 知识题

问题	答案
几种遍历方式比较	for of 循环不仅支持数组、大多数伪数组对象，也支持字符串遍历，此外还支持 Map 和 Set 对象遍历。for in循环可以遍历字符串、对象、数组，不能遍历Set/Map。forEach 循环不能遍历字符串、对象,可以遍历Set/Map
Map实例对象的成员数	size
const，定义一个Object对象，不能再对Object对象属性进行修改	const变量指向的内存地址保存的只是一个指向实际数据的指针，const只能保证这个指针固定，对象或数组属性是可变的。 可以修改Object对象属性
类的继承使用的关键字是extend	不是，继承的关键字是extends
如果类的constructor构造方法有多个，后者会覆盖前者	同一个类的constructor构造方法只能有一个，否则程序会报错。
Map结构的键名可以是数组、Symbol、null、undefined	正确，undefined也可以做为Map结构的键名。
数组的find 方法可以用与数组的遍历	find方法用于找出数组中符合条件的第一个元素，并不是用于遍历数组。
严格模式(use strict)是在ES6中新增的	use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
这样可以新建一个 Symbol ：let s = new Symbol(‘s’)	错误，Symbol不能使用new定义
ES6一共有6中声明变量的方法	var, function, let, const, import, class
解构赋值可以解构原型链上的成员	例如：字符串/数组的长度，函数方法的名字等