ES6语法（二）完

ES6语法（一）

生成器

生成器函数是ES6提供的一种异步编程解决方案

类似于一个特殊的函数

异步编程的纯回调函数：node fs ajax mongodb

function * gen(){
			console.log('hello world')
		}
		let iterator = gen();
		console.log(iterator.next())

返回结果：

hello world
{value: undefined, done: true}

function * gen(){
			yield '懒洋洋';
			yield '喜洋洋';
			yield '灰太狼';
			yield '小灰灰';
		}
		let iterator = gen();
		console.log(iterator.next())
		console.log(iterator.next())
		console.log(iterator.next())
		console.log(iterator.next())

返回结果：

{value: “懒洋洋”, done: false}
{value: “喜洋洋”, done: false}
{value: “灰太狼”, done: false}
{value: “小灰灰”, done: false}

其中一个 iterator.next() 对应一个 yield 模块

实例

function getUsers() {
			setTimeout(()=>{
				let data = '用户数据';
				//调用next方法，并将数据传入
				iterator.next(data);
			},1000);
		}
		function getOrders() {
			setTimeout(()=>{
				let data = '订单数据';
				//调用next方法，并将数据传入
				iterator.next(data);
			},1000);
		}
		function getGoods() {
			setTimeout(()=>{
				let data = '商品数据';
				//调用next方法，并将数据传入
				iterator.next(data);
			},1000);
		}
		function * gen(){
			let  users= yield getUsers();
			console.log("users:"+users)
			let  orders= yield getOrders();
			console.log("orders:"+orders)
			let  goods= yield getGoods();
			console.log("goods:"+goods)
		}
		//调用生成器函数
		let iterator = gen();
		iterator.next()

返回结果：（因为设置的定时器，所以每秒输出一条）

users:用户数据
orders:订单数据
goods:商品数据

Promise

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

1、Promise构造函数：Promise（excutor）{}

2、Promise.prototype.then方法

3、Promise.prototype.catch方法

.then方法

调用then方法，then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定

如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功的值

Set

1、自动去重

2、类似于数组，但成员的值是唯一的，集合实现了iterator接口，所以可以使用【扩展运算符】和【for…of…】进行遍历

3、集合的属性和方法：

1）size：返回集合的元素个数

2）add：增加一个新元素，返回当前集合

3）delete：删除元素，返回boolean值

4）has：检测集合中是否包含某个元素，返回boolean值

let s1 = new Set();
		let s2 = new Set(['重庆','江苏','上海','浙江','北京','湖南']);
		for (let i of s2) {
			console.log(i)
		}
		console.log(s2.size);
		s2.add('甘肃');
		console.log(s2);
		s2.delete('湖南')
		console.log(s2);
		console.log(s2.has('天津'));
		s2.clear()
		console.log(s2);

Map

1、类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都是可以当做键。

2、Map也实现了iterator接口，所以可以使用【扩展运算符】和【for…of…】进行遍历。

3、Map的属性和方法：

1）size：返回Map的元素个数

2）set：增加一个新元素，返回当前Map

3）get：返回键名对象的键值

4）has：检测Map中是否包含某个元素，返回boolean值

5）clear：清空集合，返回undefined

let m = new Map();

Class

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

1、class声明类

2、constructor定义构造函数初始化

3、extends继承父类

4、super调用父级构造方法

5、static定义静态方法和属性

6、父类方法可以重写

数值扩展

1. Number.EPSILON：表示最小精度
2. Number.isFinite：检测一个数值是否为有限数
3. Number.isNaN：检测一个数值是否为NaN
4. Number.parseInt Number.parseFloat
5. Number.isInteger：判断一个数是否为整数
6. Math.trunc：将数字的小数部分抹掉
7. Math.sign：判断一个数到底为正数、负数还是零

对象方法扩展

1、Obeject.is判断两个值是否完全相等

2、Obeject.assign对象的合并

3、Obeject.setPrototypeOf Obeject.getPrototypeOf

模块化

将大的程序文件，拆分成许多小的文件（模块），然后将小文件组合起来

优势：

1、防止命名冲突

2、代码复用

3、高维护性

模块化规范产品

ES6之前的模块化规范有：

1）CommonJS => NodeJS、Browserify

2）AMD => requireJS

3）CMD => seaJS

ES6模块化语法

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

export：用于规定模块的对外接口

import：用于输入其他模块提供的功能

babel对ES6模块化代码转换

1、安装工具babel-cli babel-preset-env browserify（webpack）

2、npx babel src/js -d dist/js

3、打包npx browserify dist/js/app.js -o dist/bundle.js

ES6模块化引入NPM包

npm i jquery

import $ from ‘jquery’;