1.生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

1) * 的位置没有限制
2) 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值
3) yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码
4) next 方法可以传递实参，作为 yield 语句的返回值

2.Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法

Promise原生请求：
// 请求地址：https://api.apiopen.top/getJoke
// 原生请求
// 1、创建对象
    const xhr = new XMLHttpRequest();
    xhr.open("GET","https://api.apiopen.top/getJoke");
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        if(xhr.status>=200 && xhr.status<=299){
            console.log(xhr.response);
        }else{
            console.error(xhr.status);
        }
    }

Promise封装Ajax请求：
const p = new Promise(function(resolve,reason){
    const xhr = new XMLHttpRequest();
    xhr.open("GET","https://api.apiopen.top/getJoke");
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        if(xhr.status>=200 && xhr.status<=299){
            resolve(xhr.response);
        }else{
            reason(xhr.status);
        }
    }
    }
});
p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.log(reason);

3.Set集合

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

size 返回集合的元素个数；
add 增加一个新元素，返回当前集合；
delete 删除元素，返回 boolean 值；
has 检测集合中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

4.Map集合

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可使用『扩展运算符』和『for…of…』进行遍历；

Map 的属性和方法：

size 返回 Map 的元素个数；
set 增加一个新元素，返回当前 Map；
get 返回键名对象的键值；
has 检测 Map 中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

5.class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

class 声明类；
constructor 定义构造函数初始化；
extends 继承父类；
super 调用父级构造方法；
static 定义静态方法和属性；
父类方法可以重写；

6.模块化

概述：模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；

模块化的优势有以下几点：

防止命名冲突；
代码复用；
高维护性；

模块化规范产品： ES6 之前的模块化规范有：

CommonJS => NodeJS、Browserify；
AMD => requireJS；
CMD => seaJS；

ES6 模块化语法：模块功能主要由两个命令构成：export 和 import；

export 命令用于规定模块的对外接口（导出模块）；
import 命令用于输入其他模块提供的功能（导入模块）；

7.Babel对ES6模块化代码转换

Babel 是一个 JavaScript 编译器； Babel 能够将新的ES规范语法转换成ES5的语法；因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；

步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可

安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；
初始化项目npm init -y
安装 npm i babel-cli babel-preset-env browserify
使用babel转换npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env
打包npx browserify dist/js/app.js -o dist/bundle.js
在使用时引入bundle.js<script src="./js/bundle.js" type="module"></script>

8.ES6模块化引入NPM包

安装jquery：npm i jquery
第二步：在app.js使用jqueryimport $ from 'jquery';// 相当于const $ = require("jquery");

下一章将记录一下所学的ES789...等其他新特性！！！

更多精彩内容敬请关注

不愿迟到早退的叻叻白

ES6集合，模块化....入门级不会，还怎么学前端?