复习ES(6-11)语法之ES6下篇

目录

• 异步操作前置知识
• Promise
• Generator
  • 原理
  • 用法
  • 异步状态管理
• Iterator
  • 原生具备 Iterator 接口的数据结构
  • Generator遍历不可迭代对象
• 模块化规范

异步操作前置知识

• JS是单线程的

单线程即一个时间只能处理一个任务。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

• 同步任务与异步任务

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

const a = 2
const b = 3
console.log(a + b) // 同步任务
// 异步任务
setTimeout(() => { // 延迟1s执行
    console.log(a + b)
}, 1000)

console.log(1)
setTimeout(() => {
    console.log(2)
}, 1000)
console.log(3)
// 1 3 2

console.log(1)
//不管延迟时间是多少，它都是异步任务，必须等主线程任务执行完成之后再执行
setTimeout(() => {
    console.log(2)
}, 0)
console.log(3)
//1 3 2

• Ajax原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

function ajax(url, callback) {
  // 1、创建XMLHttpRequest对象
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    // 兼容早期浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2、发送请求
  xmlhttp.open("GET", url, true); // 指定发送请求的操作
  xmlhttp.send(); // 发送
  // 3、服务端响应
  // 监听onreadystatechange 方法
  xmlhttp.onreadystatechange = function () {
    // 事件处理函数
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var obj = JSON.parse(xmlhttp.responseText);
      // console.log(obj)
      callback(obj); // 将响应得到的数据传给回调，回调函数是自己定义并传入的
    }
  };
}

//获取随机猫咪照片
var url = "https://api.thecatapi.com/v1/images/search?limit=1";
ajax(url, (res) => {
  console.log(res);
});

• Callback Hell

回调函数可规范调用的顺序，但是当代码层层嵌套越写越深，代码的可维护性、可读性都会降低，就会造成Callback Hell

// 1 -> 2 -> 3
// callback hell
ajax('static/a.json', res => {
    console.log(res)
    ajax('static/b.json', res => {
        console.log(res)
        ajax('static/c.json', res => {
            console.log(res)
        })
    })
})

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("zzz");
    resolve();
  }, 1000);
}).then(
  (res) => {
    console.log("成功");
  },
  (err) => {
    console.log("失败");
  }
);

如果Promise内部没有写任何异步操作，那么它是会立即执行的。then方法相当于promise的回调函数(它的微任务)，待promise内的函数执行完成便执行。

let p = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
});

p.then((res) => {
  console.log(3);
});
console.log(2);

//依次输出：1 2 3

Promise状态一旦确定下来就无法再改变

let p = new Promise((resolve, reject) => {
  resolve(1);
  reject(2);
});
p.then(
  (res) => {
    console.log(res); // 1
  },
  (err) => {
    console.log(err);
  }
);

改造回调深渊Callback Hell

// 传入成功回调与失败回调
function ajax(url, successCallback, failCallback) {
  // 1、创建XMLHttpRequest对象
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    // 兼容早期浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2、发送请求
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  // 3、服务端响应
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var obj = JSON.parse(xmlhttp.responseText);
      // console.log(obj)
      successCallback && successCallback(obj);
    } else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
      failCallback && failCallback(xmlhttp.statusText);
    }
  };
}
function getPromise(url) {
  return new Promise((resolve, reject) => {
    ajax(
      url,
      (res) => {
        resolve(res);
      },
      (err) => {
        reject(err);
      }
    );
  });
}
getPromise("static/a.json")
  .then((res) => {
    console.log(res);
    return getPromise("static/b.json");
  })
  .then((res) => {
    console.log(res);
    return getPromise("static/c.json");
  })
  .then((res) => {
    console.log(res);
  });

静态方法：

• Promise.resolve() 表示成功的状态

let p1 = Promise.resolve("success");
p1.then((res) => {
  console.log(res); // success
});

• Promise.reject() 表示失败的状态

let p2 = Promise.reject("fail");
p2.catch((err) => {
  console.log(err); // fail
});

• Promise.all() 传入一个数组作为参数，数组内的每一个内容都对应一个Promise对象

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(1);
    resolve("1成功");
  }, 1000);
});

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(2);
    //resolve("2成功");
    reject('2失败')
  }, 2000);
});
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(3);
    resolve("3成功");
  }, 3000);
});
//p1，p2，p3都resolve了才执行后面的then,只要有一个失败了就进入失败状态
Promise.all([p1, p2, p3]).then((res) => {
  console.log(res);
},err=>{
  console.log(err)
});

Promise.all（下文都称p）的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

• Promise.race() 将多个 Promise 实例，包装成一个新的 Promise 实例

//只要有一个率先完成，那整个状态就是完成的，只要有一个率先失败，那整个状态就是失败的
Promise.race([p1, p2, p3]).then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

只要p1、p2、p3之中有一个实例率先改变状态，Promise.race的状态就跟着改变。

Promise的应用场景举例：

①上传图片

const imgArr = ["1.jpg", "2.jpg", "3.jpg"];
let promiseArr = [];
imgArr.forEach((item) => {
  promiseArr.push(
    new Promise((resolve, reject) => {
      //图片上传的操作
      resolve();
    })
  );
});
Promise.all(promiseArr).then((res) => {
  console.log("图片全部上传成功");
});

②加载图片

function getImg() {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.onload = function () {
      resolve(img.src);
    };
    // img.src = "http://www/xxx.com/xx.jpg";
    img.src = "https://cdn2.thecatapi.com/images/6fk.jpg";
  });
}
function timeout() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("图片请求超时");
    }, 2000);
  });
}

Promise.race([getImg(), timeout()])
  .then((res) => {
    console.log("加载图片成功", res);
  })
  .catch((err) => {
    console.log(err);
  });

Generator

原理

• 从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
  执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
• 形式上，Generator 函数是一个普通函数，但是有两个特征。一是， function 关键字与函数名之间有一个星号；二是，函数体内部使用 yield 表达式， 定义不同的内部状态（ yield 在英语里的意思就是“产出”）。
• Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
• 必须调用遍历器对象的 next 方法(next方法可以传递参数），使得指针移向下一个状态。也就是说，每次调用 next 方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式（或 return 语句）为止。换言之，Generator 函数是分段执行的， yield 表达式是暂停执行的标记，而 next 方法可以恢复执行。

用法

Generator是可以暂停的，需要调用next方法手动执行, yield指令只能在生成器内部使用。

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

//普通函数
function foo() {
  for (let i = 0; i < 3; i++) {
    console.log(i);
  }
}
foo(); // 直接输出 0,1,2

// Generator
function* _foo() {
  for (let i = 0; i < 3; i++) {
    yield i;
  }
}
let f = _foo();
// 通过next手动执行
console.log(f.next()); // { value: 0, done: false }
console.log(f.next()); // { value: 1, done: false }
console.log(f.next()); // { value: 2, done: false }
console.log(f.next()); // { value: undefined, done: true }

// yield指令只能在生成器内部使用
// function* gen(args) {
//     args.forEach(item => {
//         yield item + 1
//     })
// }

需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

function* gen(x) {
  let y = 2 * (yield x + 1);
  let z = yield y / 3;
  return x + y + z;
}
let g = gen(5);
console.log(g.next().value); // 6
// 上一次yield表达式没有返回y值，所以变成y = 2* undefined => NaN
console.log(g.next().value); // NaN  
console.log(g.next().value); // NaN  y / 3 => NaN

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

//①
let g = gen(5);
//  x+1 = 6
console.log(g.next().value);// 输出6
// 传递参数6，前面的 (yield x + 1) = 6,所以y = 2* 6 = 12, y /3 = 4
console.log(g.next(6).value); //输出4
 // 传递参数4，前面的 ( yield y / 3 ) = 4，所以z = 4，return x+y+z = 5+12+4 = 21
console.log(g.next(4).value); //输出21
//②
let g = gen(5);
// x+1 = 6
console.log(g.next().value); //输出6
//传递参数8，前面的 (yield x + 1) = 8,所以y = 2* 8 = 16, y /3 = 5.3333
console.log(g.next(8).value); //输出5.3333
// 传递参数12,前面的(yield y /3 ) = 12，所以z = 12, return x+y+z = 5+16+12 = 33
console.log(g.next(12).value); //输出33

可以写一个计数器，每次遇到7的倍数就停止执行

//计数器 遇到7的倍数就停止
function* count(x = 1) {
  while (true) {
    if (x % 7 === 0) {
      yield x;
    }
    x++;
  }
}
let n = count();
console.log(n.next().value); // 7
console.log(n.next().value); // 14
console.log(n.next().value); // 21
console.log(n.next().value); // 28
console.log(n.next().value); // 35

异步状态管理

以ajax为例，请求顺序a→b→c

function ajax(url, callback) {
  // 1、创建XMLHttpRequest对象
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    // 兼容早期浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2、发送请求
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  // 3、服务端响应
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var obj = JSON.parse(xmlhttp.responseText);
      // console.log(obj)
      callback(obj);
    }
  };
}
// 封装请求方法，调用ajax
function request(url) {
  ajax(url, (res) => {
    getData.next(res); // 每一次request请求都会调用next，使Generator对象继续执行
  });
}

function* gen() {
  let res1 = yield request("static/a.json");
  console.log(res1);
  let res2 = yield request("static/b.json");
  console.log(res2);
  let res3 = yield request("static/c.json");
  console.log(res3);
}

let getData = gen();
getData.next();

Iterator

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制，使得不支持遍历的数据结构“可遍历”。Iterator 接口主要供for...of消费。

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

function makeIterator(arr) {
  let nextIndex = 0;
  return {
    next() {
      return nextIndex < arr.length
        ? {
            value: arr[nextIndex++],
            done: false,
          }
        : {
            value: undefined,
            done: true,
          };
    },
  };
}
let it = makeIterator(["a", "b", "c"]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

原生具备 Iterator 接口的数据结构

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

下面的例子是数组和Map的Symbol.iterator属性。

let arr = ['a', 'b', 'c'] // 对于数组这样的可迭代结构，它里面自带了Symbol.iterator
console.log(arr) // ["a", "b", "c"]
let it = arr[Symbol.iterator]()
console.log(it.next()) // {value: "a", done: false}
console.log(it.next())
console.log(it.next())
console.log(it.next())// {value: undefined, done: true} ,迭代结束

let map = new Map()
map.set('name', 'es')
map.set('age', 5)
let it = map[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())

将不可迭代对象改造成符合上述两种协议的结构，便能够实现遍历：

let courses = {
  allCourse: {
    fronted: ["ES", "Vue", "小程序"],
    backend: ["JAVA", "Python"],
    webapp: ["Android", "IOS"],
  },
};
for (let c of courses) {
  console.log(c); // 报错，不可迭代
}

// 可迭代协议：Symbol.iterator
// 迭代器协议：return { next(){ return { value,done } } }
courses[Symbol.iterator] = function () {
  let allCourse = this.allCourse;
  let keys = Reflect.ownKeys(allCourse);
  let values = [];
  return {
    next() {
      if (!values.length) {
        if (keys.length) {
          values = allCourse[keys[0]];
          keys.shift();
        }
      }
      return {
        done: !values.length,
        value: values.shift(),
      };
    },
  };
};

for (let c of courses) {
  console.log(c); // 可迭代
}

Generator遍历不可迭代对象

Generator自带next方法，所以它也能够帮助不可迭代对象遍历。

courses[Symbol.iterator] = function* () {
  let allCourse = this.allCourse;
  let keys = Reflect.ownKeys(allCourse);
  let values = [];
  while (1) {
    if (!values.length) {
      if (keys.length) {
        values = allCourse[keys[0]];
        keys.shift();
        yield values.shift();
      } else {
        return false;
      }
    } else {
      yield values.shift();
    }
  }
};

for (let c of courses) {
  console.log(c); // 报错，不可迭代
}

模块化规范

CommonJS：Node.js

AMD：require.js

CMD：sea.js

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

import { a } from "./module.js";
console.log(a);

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { a as aa } from "./module.js";
console.log(aa);

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// module.js
const a = 5;
export default a;


//index.js
import aa from "./module.js";
console.log(aa);

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。