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>
