ECMAScript6入门教程（二）

ECMAScript入门教程（一）

2.11 生成器

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

        function * gen(){yield '一只没有耳朵';yield '一只没有尾部';yield '真奇怪';}
let iterator = gen();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());
//遍历for(let v of gen()){console.log(v);}

代码说明：

1) * 的位置没有限制

2) 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值

3) yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码

4) next 方法可以传递实参，作为 yield 语句的返回值

        function * gen(arg){console.log(arg);let one = yield 111;console.log("one:"+one);let two = yield 222;console.log("two:"+two);let three = yield 333;console.log("three:"+three);}
//执行获取迭代器对象let iterator = gen('AAA');console.log(iterator.next());//next方法可以传入实参console.log(iterator.next('BBB'));console.log(iterator.next('CCC'));console.log(iterator.next('DDD'));

打印如下：

案例：1s 后控制台输出 111， 2s后输出 222 ，3s后输出 333

        function one(){setTimeout(()=>{console.log(111);iterator.next();},1000)}
function two(){setTimeout(()=>{console.log(222);iterator.next();},2000)}
function three(){setTimeout(()=>{console.log(333);iterator.next();},3000)}
function * gen(){yield one();yield two();yield three();}
//调用生成器函数let iterator = gen();iterator.next();

2.12 Promise

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

1) Promise 构造函数: Promise (excutor) {}

2) Promise.prototype.then 方法

3) Promise.prototype.catch 方法

        //实例化 Promise 对象const p = new Promise(function(resolve, reject){setTimeout(function(){
// let data = '数据库中的用户数据';// resolve(data);
let err = '数据读取失败';reject(err);}, 1000);});
//调用 promise 对象的 then 方法 // resolve代表成功，调用then里面的第一个函数，reject代表失败，调用then里面的第二个函数p.then(function(value){console.log(value);}, function(reason){console.error(reason);})

我们使用Promise实现异步读取文件的操作：

//1. 引入 fs 模块
const fs = require('fs');

//2. 使用 Promise 封装
const p = new Promise(function(resolve, reject){fs.readFile("./resources/为学.mda", (err, data)=>{//判断如果失败if(err) reject(err);//如果成功resolve(data);});
});

p.then(function(value){console.log(value.toString());
}, function(reason){console.log("读取失败!!");
});

// p.catch(function(reason){
//     console.warn(reason);
// });

//  使用node命令执行： node xxx.js

我们使用Promise封装ajax发送请求：

    //实例化 Promise 对象const p = new Promise(function (resolve, reject) {setTimeout(function () {
// let data = '数据库中的用户数据';// resolve(data);
let err = '数据读取失败';reject(err);}, 1000);});
//调用 promise 对象的 then 方法// resolve代表成功，调用then里面的第一个函数，reject代表失败，调用then里面的第二个函数p.then(function(value){console.log(value);}, function(reason){console.error(reason);})// p.catch(function (reason) {//     console.error(reason)// })

使用then()可以实现循环嵌套

//引入 fs 模块
const fs = require("fs");

// fs.readFile('./resources/为学.md', (err, data1)=>{
//     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
//         fs.readFile('./resources/观书有感.md', (err, data3)=>{
//             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
//             console.log(result);
//         });
//     });
// });

//使用 promise 实现
const p = new Promise((resolve, reject) => {fs.readFile("./resources/为学.md", (err, data) => {resolve(data);});
});

p.then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/插秧诗.md", (err, data) => {resolve([value, data]);});});
}).then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/观书有感.md", (err, data) => {//压入value.push(data);resolve(value);});})
}).then(value => {console.log(value.join('\r\n'));
});

2.13 Set

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

    //声明一个 setlet s2 = new Set(['大事儿', '小事儿', '好事儿', '坏事儿', '小事儿']);
//元素个数console.log(s2.size);//添加新的元素s2.add('喜事儿');//删除元素s2.delete('坏事儿');//检测console.log(s2.has('糟心事'));//清空// s2.clear();console.log(s2);
for (let v of s2) {console.log(v);}

我们可以用Set来求数组的去重、交集、并集、差集

    let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];//1. 数组去重let result = [...new Set(arr)];console.log(result);//2. 交集let arr2 = [4, 5, 6, 5, 6];let result2 = [...new Set(arr)].filter(item => {return new Set(arr2).has(item);});console.log(result2);
//3. 并集let union = [...new Set([...arr, ...arr2])];console.log(union);
//4. 差集let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff);

2.14 Map

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

    //声明 Maplet m = new Map();
//添加元素m.set('name', '进击的巨人');m.set('change', function () {console.log("为人类献出心脏!!");});let key = {school: '史莱克学院'};m.set(key, ['唐三', '小舞', '戴沐白']);
//sizeconsole.log(m.size);
//删除m.delete('name');
//获取console.log(m.get('change'));console.log(m.get(key));
//清空// m.clear();
//遍历for (let v of m) {console.log(v);}
console.log(m);

2.15 class类

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

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

    class Shouji {//构造方法 名字不能修改constructor(brand, price) {this.brand = brand;this.price = price;}
//方法必须使用该语法, 不能使用 ES5 的对象完整形式call() {console.log("我可以打电话>>>brand:" + this.brand + ",price:" + this.price);}}
let onePlus = new Shouji("小米10", 3999);onePlus.call();
console.log(onePlus);

静态属性/方法的案例演示：

    class Phone {//静态属性static name = '手机';
static change() {console.log("我可以改变世界");}}
let nokia = new Phone();console.log(nokia.name);console.log(Phone.name);

继承/方法重写案例演示：

    class Phone {//构造方法constructor(brand, price) {this.brand = brand;this.price = price;}
//父类的成员属性call() {console.log("我可以打电话!!");}}
class SmartPhone extends Phone {//构造方法constructor(brand, price, color, size) {super(brand, price);// Phone.call(this, brand, price)this.color = color;this.size = size;}
photo() {console.log("拍照");}
playGame() {console.log("玩游戏");}
// 方法重写call() {console.log('我可以进行视频通话');}}
const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');xiaomi.call();xiaomi.photo();xiaomi.playGame();

get/set的案例演示：

    // get 和 set  class Phone {constructor(count, money) {this.count = count;this.money = money;}
get price() {console.log("价格属性被读取了");return this.money * this.count;}
set price(newVal) {console.log("价格属性被修改了");this.money = 200;}}
//实例化对象let s = new Phone(2, 188);
console.log(s.price);s.price = 88;console.log(s.price);

2.16 数值拓展

    //0. Number.EPSILON 是 JavaScript 表示的最小精度//EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16function equal(a, b) {if (Math.abs(a - b) < Number.EPSILON) {return true;} else {return false;}}
console.log(0.1 + 0.2 === 0.3);console.log(equal(0.1 + 0.2, 0.3))
//1. 二进制和八进制let b = 0b1010;let o = 0o777;let d = 100;let x = 0xff;console.log(x);
//2. Number.isFinite  检测一个数值是否为有限数console.log(Number.isFinite(100));console.log(Number.isFinite(100 / 0));console.log(Number.isFinite(Infinity));
//3. Number.isNaN 检测一个数值是否为 NaN console.log(Number.isNaN(123));
//4. Number.parseInt Number.parseFloat字符串转整数console.log(Number.parseInt('5211314love'));console.log(Number.parseFloat('3.1415926神奇'));
//5. Number.isInteger 判断一个数是否为整数console.log(Number.isInteger(5));console.log(Number.isInteger(2.5));
//6. Math.trunc 将数字的小数部分抹掉  console.log(Math.trunc(3.5));
//7. Math.sign 判断一个数到底为正数 负数 还是零console.log(Math.sign(100));console.log(Math.sign(0));console.log(Math.sign(-20000));

2.17 对象扩展

ES6 新增了一些 Object 对象的方法

1) Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）

2) Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象

3) proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

    //1. Object.is 判断两个值是否完全相等  与『===』行为基本一致（+0 与 NaN）console.log(Object.is(120, 120));  //trueconsole.log(Object.is(NaN, NaN));  //trueconsole.log(NaN === NaN);          //false
//2. Object.assign 对象的合并const config1 = {host: 'localhost',port: 3306,name: 'root',pass: 'root',test: 'test'};const config2 = {host: '127.0.0.1',port: 33060,name: 'admin',pass: 'admin',test2: 'test2'}console.log(Object.assign(config1, config2));  //后者会覆盖前者
//3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeOfconst school = {name: '四大才子'}const member = {people: ['唐伯虎', '祝枝山', '文征明', "徐祯卿"]}Object.setPrototypeOf(school, member);console.log(Object.getPrototypeOf(school));console.log(school);

2.18 map和reduce

map

map一般来说针对数组进行操作。但是进行了一个很好的封装使得读者可以清晰的看到被操作数组，以及对数组内每个元素进行操作的函数。

reduce

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

语法:

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）
- previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
- currentValue （数组中当前被处理的元素）
- index （当前元素在数组中的索引）
- array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）

  // map 接收了一个函数，将原数组中的所有元素用这个函数处理后放入新数组中let arr = ['1', '20', '18', '23'];arr=arr.map((item)=>{return item*2});console.log(arr);
//reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素// ['2', '40', '36', '46']let result= arr.reduce((a,b)=>{console.log("上一次处理后："+a);console.log("当前正在处理："+b);return a+b;})console.log(result);

3.模块化

3.1 模块化的好处

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

3.2 模块化规划产品

ES6 之前的模块化规范有：

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

3.3 模块化语法

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

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

3.4 export

export有三种写法，如下为具体示例：

m1.js

//分别暴露
export let school = '清华大学';

export function teach() {console.log("自强不息,厚德载物");
}

m2.js

//统一暴露
let school = '北京大学';

function teach(){console.log("勤奋、严谨、求实、创新");
}

//
export {school, teach};

m3.js

//默认暴露
export default {school: '中国人民大学',change: function(){console.log("实事求是");}
}

3.5 import

<script type="module">//1. 通用的导入方式//引入 m1.js 模块内容import * as m1 from "./src/js/m1.js";
console.log(m1);// //引入 m2.js 模块内容import * as m2 from "./src/js/m2.js";
console.log(m2);// //引入 m3.jsimport * as m3 from "./src/js/m3.js";
console.log(m3);console.log(m3.default.change());
//2. 解构赋值形式import {school, teach} from "./src/js/m1.js";import {school as beida, teach as teach_1} from "./src/js/m2.js";
console.log(beida);console.log(teach_1());import {default as m3} from "./src/js/m3.js";
//3. 简便形式  只针对默认暴露import m3_1 from "./src/js/m3.js";
console.log(m3_1);
</script>

3.6 更简洁的模块化引入

我们单独定义一个js文件

//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

console.log(m1);
console.log(m2);
console.log(m3);

在我们的html文件中，只需要做如下操作即可引入：

<script src="./src/js/app.js" type="module"></script>