上一节我们主要回顾了在 ES5 中使用构造函数的方式实现类了，并说明了如何实现类的继承。从上一节的讲解中，构造函数去实现类的继承还是有诸多繁琐的地方的，我们需要考虑子类和父类的关系，继承中的细节都需要自己手动处理。本节我们将要学习 ES6 中的类的基本使用和类的继承。在学习本节我们需要明确的是，ES6 中的类是基于现有语法的原型实现的，并没有引入新的面相对象的模型。它的本质还是我们上节提到的构造函数，只是让我们更加方便地使用，是基于原型的继承的语法糖。

很多资料会把 ES6 描述的较难学习，实则还是语言相关的知识，他在之前的基础上，对语法、全局对象、特性等做了扩充。如：变量可以采用 let 关键字声明。

字符串查找一直都是程序中的常用操作，在 ES5 中查找一个字符串是否包含另一个字符串，一般有两种思维。一是使用正则的方式来匹配，二是使用 ES5 的方式，如 indexOf、lastIdexOf、search。使用正则比较简单，但是需要对正则语法有一定的了解。一般使用 indexOf() 来进行字符串的查找 ，它会返回查询后第一次出现的指定值的索引，如果未找到该值，则返回 -1。ES6 新增方法 includes() 方法，来替代 indexOf() 弥补它的不足。而 ES6 提供了新的方法 includes() 可以更好地进行判断，而不需要根据返回的索引进行判断。

Object.entries() 还有一个最重要的功能，就是可以把指定的对象直接转化成 ES6 的 Map 数据结构。ES6 提供了新的 Map 数据结构，它类似于对象，也是键值对的集合，但是 Map 的键可以是任意类型（原始类型和对象类型），并且提供了 set 、 get 方法去设置和获取对象的值。如果想把一个对象转为 Map 结构，可以借助 Object.entries() 来实现。var obj = { name: 'imooc', age: 7 };var map = new Map(Object.entries(obj));console.log(map) // Map(2) {"name" => "imooc", "age" => 7}console.log(map.get(name)) // imooc上面的代码中，很好地把已有的对象，转化为 Map 对象，而且可以使用 Map 的方法获取对象上的数据。

JavaScript 在设计之初主要用来开发 Web 页面的交互、动画和表单验证等单一的功能，而且程序的体积很小，大多数都是独立执行的。随着前端的发展 JavaScript 承接的功能越来越多，Node 的出现让 JavaScript 可以作为一门后端开发语言，程序的复杂度瞬间提升，所以有必要提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node 是 JavaScript 的先行者，它使用了 CommonJS 的规范来实现模块化的。在 ES6 没出来之前有很多模块化的实践，比较有名的有：CommonJS、AMD、CMD，每个规范都有自己独立的思考。随着 ES6 模块的发布，AMD 和 CMD 慢慢地淡出了我们的视野。现在主要常见的场景是 Node 端还采用 CommonJS 规范，这是历史原因。前端使用的是 ES6 module 规范，但是不能直接在前端使用，需要通过打包工具进行编译如：Webpack、Babel、Rollup 等。本文中我们将使用 Webpack 进行模块化编译工具，源代码放在 GitHub 上，仅供参考。

使用扩展运算符（...）可以将 Set 数据结构转化数组形式：var set = new Set([1, 2, 3, 4]);var a = [...set]console.log(a) // [1,2,3,4]还可以是 ES6 中数组提供的 Array.from() 进行转化。var set = new Set([1, 2, 3, 4]);Array.from(set) //输出[1,2,3,4]

本节介绍了 ES6 的对象扩展内容，学习了对象中属性和方法的简写、属性的表达式以及注意的内容。最后学习了函数的 name 属性，可以返回函数名。

本节介绍 ES6 的字符串新增方法 padEnd 和 padStart 一样也是补全字符串的长度的，但是它的补全位置是在原字符串的右侧末尾进行补全的。此方法会返回一个新的字符串，不会对原字符串进行修改。

在定义一个数组时，需要给数组设置默认值进行填充，ES6 提供了 fill 方法，类似 copyWithin 都是替换数组中的值，fill 可以替换一个指定的值，copyWithin 则是复制数组中的值去替换指定位置的值，不能指定值。

本节介绍了判断一个值是数组类型的方法 Array.isArray() 此方法可以很准确地判断数组，学习了在 ES5 中判断数组类型的几个方法的缺陷。在不支持 ES6 的情况下也可以通过 Object.prototype.toString 自定义 Array.isArray() 方法。

本节介绍 ES6 的字符串新增方法 trim()，该方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR 等）。

在 ES6 之前是不能定义常量的，如果想定义常量的话，需要借助 ES5 中的 defineProperty 方法，这里我们写个示例：function setConst(key, value, obj) { Object.defineProperty(window, key, { get: function(){ return value; }, set: function(){ console.error('Uncaught TypeError: Assignment to constant variable'); }, });}setConst('PI', 3.1415);console.log(PI) // 3.1415PI = 3; // Uncaught TypeError: Assignment to constant variable.上面的代码是一个定义常量的函数，使用了 ES5 的 Object.defineProperty 方法，这个方法允许在一个对象上定义一个新的属性，具体使用详情可以参考 ES5 的相关文档说明。这里我们会在 window 对象上添加属性，也可以自己定义一个对象进行添加，可以实现局部作用域的效果。通过向 setConst 方法中传入指定的变量和值来声明一个常量，这样我们就在 ES5 中实现了常量的概念。由此可见，ES6 的 const 带来的好处。

在 ES5 中判断两个值是否相等基本都是使用 == 或 === 来判断，ES6 提供了 Object.is() 方法来判断两个值是否相同，这个方法弥补了使用等号方式判断所存在的问题。

大名鼎鼎的Babel插件，它的功能非常强大，支持ES6、React.js、jsx代码语法高亮。请跟着gif图来安装一下吧。插件安装完成之后，切换一下sublime的页面或者重启sublime即可生效。

在 ES5 中基础数据类型有 5 种：Boolean、Null、Undefined、Number、String，ES6 新增了一个基础数据类型 Symbol 符号、代号的意思，它是独一无二的，也就是说使用它声明的变量是独一无二的。引入这个数据类型有什么作用呢？我们知道在 ES5 中， 对象的属性名都是字符串，容易造成属性名冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突，ES6 引入 Symbol 就可以解决这个问题。不仅如此 Symbol 的使用还有很多，在元编程中也发挥很大的作用。下面我们就来看看 Symbol 的 使用。

在 ES5 中没有对数组内元素的复制和替换，如果要实现数组内的替换需要针对性的操作。而在 ES6 中提供了 copyWithin 方法轻易地实现数组内元素的复制，不会改变原数组的长度。

在 ES5 中比较通用的方法是使用 Object.prototype.toString 去判断一个值的类型，也是各大主流库的标准。在不支持 ES6 语法的环境下可以使用下面的方法给 Array 上添加 isArray 方法if (!Array.isArray){ Array.isArray = function(arg){ return Object.prototype.toString.call(arg) === '[object Array]'; };}

var str1 = '教练';var str2 = '我想';var str3 = '写代码';var str4 = str1.concat(str2, str3);console.log(str4);使用 concat 可以接受任意个字符串作为参数，最后会拼接成一个字符串。ES6提供了模版字符串，在模版字符串中拼接更加灵活。

上一节 我们学习了 Object.keys() 可以获取对象上可枚举属性的 key 作为一个数组，对应的是不是有一个让我们获取对象上所有属性值的方法呢？答案是肯定的，ES6 中提供了 Object.values() 获取可枚举对象上属性的值作为一个数组。

在前端开发中经常会遇到类数组，但是我们不能直接使用数组的方法，需要先把类数组转化为数组。本节介绍 ES6 数组的新增方法 Array.from()，该方法用于将类数组对象（array-like）和可遍历的对象（iterable）转换为真正的数组进行使用。

本节学习了 ES6 中新增的可选链语法，它提供了一种方法来简化被连接对象的值访问，保证访问数据的安全性。它可以用于对象、数组、函数中。这个语法很有用，在项目中使用可以达到事半功倍的效果。

从 2015 年 6 月正式发布的 ES2015（简称 ES6） 语言的标准后，每年 6 月都会对 ECMAScript 进行版本迭代，本系列文章也是对 ES6 及以后更新的内容做系统性的讲解，目前的版本已经到了 ES2019（简称 ES10）。添加语言的新特性，增加类和模块化的语法，其他特性包括迭代器，Python 风格的生成器和生成器表达式，箭头函数，二进制数据，新增内置数据结构（Map），增加了集合概念（Set），异步的解决方案（promise，async/await），使用 reflect 和 proxy 取代 Object 的部分功能更加细化了语言层面的部分。另外，还增加了异步循环，生成器，新的正则表达式特性和 rest/spread 等语法。

前两节我们学习了获取可枚举对象上属性和属性值作为一个数组的方法 Object.keys() 和 Object.values()，但是我们想把键值对同时获取到怎么办呢？这时 ES6 提供了 Object.entries() 方法用于获取可枚举对象上的属性和值的数组。

在早期的 JavaScript 中是没类的概念的，如果想要实现类的功能需要通过构造函数来创建，使用 prototype 来实现类的继承。对于一些高级语言如 C++、Java、python 等，都是有类的概念的，而且在这些语言中类是非常重要的。而 JavaScript 由于历史原因在设计最初就没有想要引入类的概念，随着 JavaScript 越来越多地应用到大型项目中，JavaScript 的短板就显现了。虽然，可以使用原型等方式来解决，但是还是存在各种各样的问题。要学习 ES6 中的 class 首先要了解 ES5 中的构造函数，主要了解在构造函数中是如何实现类和继承的，了解了这些知识带你有助于后面我们更深入的理解 ES6 中的 class。