简答题

一、 JS 异步编程的、同步任务、异步任务、宏任务，微任务、EventLoop、消息队列

  • JS 异步编程
    JavaScript 语言的执行环境是单线程的，一次只能执行一个任务，多任务需要排队等候，这种模式可能会阻塞代码，导致代码执行效率低下。为了避免这个问题，出现了异步编程。一般是通过 callback 回调函数、事件发布/订阅、Promise 等来组织代码，本质都是通过回调函数来实现异步代码的存放与执行。

js引擎是单线程的

  • 同步任务：所有在主线程上排队执行的任务都叫同步任务，只有前一个任务执行完毕，才会执行下一个任务
  • 异步任务：不进入主线程而进入“任务队列”执行的任务，只有等主线程的同步任务都执行完，任务队列里的异步任务才会进入主线程执行。
    • 异步任务包括宏任务和微任务
      • 宏任务（macro-task）： script、setInterval、setTimeout、
      • 微任务（micro-task）： Promise、process.nextTick
        • Promise 不全是异步任务，Promise 里面的代码是同步的，执行resolve或reject回调的时候，会把then或catch 回调放异步任务中的微任务队列
  • JS 引擎的运行机制
    • 所有的同步任务都在主线程上执行，形成一个执行栈
    • 主线程之外还一个任务队列，当异步任务有了运行结果，就会在任务队列放置一个事件
    • 当执行栈里的所有同步任务执行完毕，系统就会去读取任务队列，将事件对应的异步任务放到执行栈中继续执行
    • 主线程不断的重复执行上面的第三步
  • 执行顺序
    1. 执行栈中从上往下一次执行，同步任务直接执行，异步任务会被放到任务队列中
    2. 当所有的同步任务执行完毕，开始执行所有的异步任务（也就是任务队列里的任务）
    3. 首先会执行任务队列里所有的微任务
    4. 然后执行一个宏任务
    5. 然后再执行完所有的微任务
    6. 执行宏任务、所有的微任务… 以此类推，知道所有的任务执行完毕
  • 以上c到f 这个循环便是事件循环 event loop
  • 事件循环是js 实现异步的一种方法，也是javaScript 的运行机制
  • EventLoop 事件环和消息队列
    EventLoop 是一种循环机制 ，不断去轮询一些队列 ，从中找到 需要执行的任务并按顺序执行的一个执行模型。
    消息队列 是用来存放宏任务的队列， 比如定时器时间到了， 定时间内传入的方法引用会存到该队列， ajax回调之后的执行方法也会存到该队列。
    函数式编程与 JS 异步编程、手写 Promise - 图1
    一开始整个脚本作为一个宏任务执行。执行过程中同步代码直接执行，宏任务等待时间到达或者成功后，将方法的回调放入宏任务队列中，微任务进入微任务队列。
    当前主线程的宏任务执行完出队，检查并清空微任务队列。接着执行浏览器 UI 线程的渲染工作，检查web worker 任务，有则执行。
    然后再取出一个宏任务执行。以此循环…

代码题

一、将下面异步代码使用 Promise 的方式改进

  1. setTimeout(function() {
  2.     var a = 'hello'
  3.     setTimeout(function() {
  4.         var b = 'lagou'
  5.         setTimeout(function() {
  6.             var c = 'I ❤️ U'
  7.             console.log(a + b + c)
  8.         }, 10);
  9.     }, 10);
  10. }, 10);

参考代码：

  1. new Promise(resolve => {
  2.     var a = 'hello'
  3.     resolve(a)
  4. }).then(resA => {
  5.     var b = 'lagou'
  6.     return resA + b;
  7. }).then(resB => {
  8.     var c = 'I ❤ U'
  9.     console.log(resB + c)
  10. })
  11. //
  12. async function showStr() {
  13.   let a = await Promise.resolve('helloP')
  14.   let b = await Promise.resolve('lagou')
  15.   let c = await Promise.resolve('IU')
  16.   console.log(a + b + c)
  17. }
  18. showStr()
  19. --------------------------------------------------
  20. / function promise(str) {
  21. //   return new Promise((resolve, reject) => {
  22. //     setTimeout(() => {
  23. //       resolve(str)
  24. //     }, 10)
  25. //   })
  26. // }
  28. // async function showStr() {
  29. //   let a = await promise('hello')
  30. //   let b = await promise('lagou')
  31. //   let c = await promise('IU')
  32. //   console.log(a + b + c)
  33. // }
  34. // showStr()
  35. -----------------------------
  36. Promise.resolve('hello')
  37.   .then((value) => {
  38.     return value + 'logou';
  39.   })
  40.   .then((value) => {
  41.     return value + 'I ♥ U';
  42.   })
  43.   .then((value) => console.log(value));

二、基于以下代码完成下面的四个练习

  1. const fp = require('lodash/fp')
  2. // 数据：horsepower 马力，dollar_value 价格，in_stock 库存
  3. const cars = [
  4.     { name: 'Ferrari FF', horsepower: 660, dollar_value: 700000, in_stock: true },
  5.     { name: 'Spyker C12 Zagato', horsepower: 650, dollar_value: 648000, in_stock: false },
  6.     { name: 'Jaguar XKR-S', horsepower: 550, dollar_value: 132000, in_stock: false },
  7.     { name: 'Audi R8', horsepower: 525, dollar_value: 114200, in_stock: false },
  8.     { name: 'Aston Martin One-77', horsepower: 750, dollar_value: 1850000, in_stock: true },
  9.     { name: 'Pagani Huayra', horsepower: 700, dollar_value: 1300000, in_stock: false }
  10. ]

练习1：使用组合函数 fp.flowRight() 重新实现下面这个函数

  1. let isLastInStock = function(cars){
  2.     // 获取最后一条数据
  3.     let last_car = fp.last(cars)
  4.     // 获取最后一条数据的 in_stock 属性值
  5.     return fp.prop('in_stock', last_car)
  6. }

先定义获取最后一条数据的函数，再定义获取某个对象中的 in_stock 属性的函数，再用 fp.flowRight 组合函数

  1. let isLastInStock = fp.flowRight(fp.prop('in_stock'), fp.last);
  2. console.log(isLastInStock(cars)); // false

练习2：使用 fp.flowRight()、fp.prop() 和 fp.first() 获取第一个 car 的 name

先定义获取第一条数据的函数，再定义获取某个对象中的 name 属性的函数，再用 fp.flowRight 组合函数

  1. const getFirstName = fp.flowRight(fp.prop("name"), fp.first)
  2. console.log(getFirstName(cars)) // Ferrari FF

练习3：使用帮助函数 _average 重构 averageDollarValue，使用函数组合的方式实现

  1. let _average = function(xs){
  2.     return fp.reduce(fp.add, 0, xs) / xs.length
  3. }

先定义获取某个对象中的 dollar_value 属性的函数，将该函数作为 fp.map 的数组元素处理函数，再用 fp.flowRight 组合函数

  1. let averageDollarValue = fp.flowRight(_average, fp.map('dollar_value'));
  2. console.log(averageDollarValue(cars));  //790700

练习4：使用 flowRight 写一个 sanitizeNames() 函数，返回一个下划线连续的小写字符串，把数组中的 name 转换为这种形式，例如：sanitizeNames([“Hello World”]) => [“hello_world”]

  1. let _underscore = fp.replace(/\W+/g, '_') // 无须改动，并在 sanitizeNames 中使用它

先定义获取某个对象中的 name 属性的函数，再定义转化为小写的函数，再将空格和下划线替换，,再用 fp.flowRight 组合函数

  1. let sanitizeNames = fp.flowRight(
  2.   fp.map(_underscore),
  3.   fp.map(fp.toLower),
  4.   fp.map((car) => car.name)
  5. );
  6. console.log(sanitizeNames(CARS)) 
  7. // [
  8. //  'ferrari_ff',       
  9. //  'spyker_c12_zagato',
  10. //  'jaguar_xkr_s',
  11. //  'audi_r8',
  12. //  'aston_martin_one_77',
  13. //  'pagani_huayra'
  14. // ]

三、基于下面提供的代码，完成后续的四个练习

  1. // support.js
  2. class Container {
  3.     static of(value){
  4.         return new Container(value)
  5.     }
  6.     constructor(value){
  7.         this._value = value
  8.     }
  9.     map(fn){
  10.         return Container.of(fn(this._value))
  11.     }
  12. }
  14. class Maybe {
  15.     static of(x){
  16.         return new Maybe(x)
  17.     }
  18.     isNothing(){
  19.         return this._value === null || this._value === undefined
  20.     }
  21.     constructor(x){
  22.         this._value = x
  23.     }
  24.     map(fn){
  25.         return this.isNothing() ? this : Maybe.of(fn(this._value))
  26.     }
  27. }
  28. module.exports = { Maybe, Container }

练习1：使用 fp.add(x, y) 和 fp.map(f,x) 创建一个能让 functor 里的值增加的函数 ex1

  1. const fp = require('lodash/fp')
  2. const {Maybe, Container} = require('./support')
  3. let maybe = Maybe.of([5,6,1])
  4. let ex1 = () => {
  5.     // 你需要实现的函数。。。
  6. }

函子对象的 map 方法可以运行一个函数对值进行处理，函数的参数为传入 of 方法的参数；接着对传入的整个数组进行遍历，并对每一项执行 fp.add 方法

  1. let ex1 = maybe.map(i => fp.map(fp.add(1), i))
  2. console.log(ex1) // [6, 7, 2]

练习2：实现一个函数 ex2，能够使用 fp.first 获取列表的第一个元素

  1. const fp = require('lodash/fp')
  2. const {Maybe, Container} = require('./support')
  3. let xs = Container.of(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])
  4. let ex2 = () => {
  5.     // 你需要实现的函数。。。
  6. }

解答如下：

  1. let ex2 = xs.map(i => fp.first(i))
  2. console.log(ex2)// do

练习3：实现一个函数 ex3，使用 safeProp 和 fp.first 找到 user 的名字的首字母

  1. const fp = require('lodash/fp')
  2. const {Maybe, Container} = require('./support')
  3. let safeProp = fp.curry(function(x, o){
  4.     return Maybe.of(o[x])
  5. })
  6. let user = { id: 2, name: 'Albert' }
  7. let ex3 = () => {
  8.     // 你需要实现的函数。。。
  9. }

调用 ex3 函数传入 user 对象，safeProp 是经过柯里化处理的，可以先传“属性”参数，后传“对象”参数。safeProp 函数处理后返回 user 的值，再调用fp.first 获取首字母

  1. let ex3 = fp.flowRight(fp.map(i => fp.first(i)), safeProp('name'))
  2. console.log(ex3(user)) // A
  3. // 或者 return safeProp("name", user).map(x => fp.first(x));

练习4：使用 Maybe 重写 ex4，不要有 if 语句

  1. const fp = require('lodash/fp')
  2. const {Maybe, Container} = require('./support')
  3. let ex4 = function(n){
  4.     if(n){
  5.         return parseInt(n)
  6.     }
  7. }

MayBe 函子用来处理外部的空值情况，防止空值的异常，拿到函子的值之后进行 parseInt 转化

  1. let ex4 = n => Maybe.of(n).map(parseInt)
  2. console.log(ex4('1')) // 1

四、手写实现 MyPromise 源码

尽可能还原 Promise 中的每一个 API，并通过注释的方式描述思路和原理。【参考代码】

  1. // 初始状态
  2. const PENDING = "pending";
  3. // 完成状态
  4. const FULFILLED = "fulfilled";
  5. // 失败状态
  6. const REJECTED = "rejected";
  8. // 异步执行方法封装
  9. function asyncExecFun(fn) {
  10.   setTimeout(() => fn(), 0);
  11. }
  13. // 执行promise resolve功能
  14. function resolvePromise(promise, res, resolve, reject) {
  15.   // 返回同一个promise
  16.   if (promise === res) {
  17.     reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
  18.     return;
  19.   }
  20.   // promise结果
  21.   if (res instanceof MyPromise) {
  22.     res.then(resolve, reject);
  23.   } else {
  24.     // 非promise结果
  25.     resolve(res);
  26.   }
  27. }
  29. /**
  30.  * 1. 是个构造函数
  31.  * 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数；  函数立即执行，  参数函数异步执行
  32.  * 3. 状态一旦更改就不可以变更  只能 pending => fulfilled 或者  pending => rejected
  33.  * 4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数
  34.  *      默认的 failCallback 一定要将异常抛出， 这样下一个promise便可将其捕获 异常冒泡的目的
  35.  * 5. then 中执行回调的时候要捕获异常 将其传给下一个promise
  36.  *    如果promise状态未变更 则将回调方法添加到对应队列中
  37.  *    如果promise状态已经变更 需要异步处理成功或者失败回调
  38.  *    因为可能出现 回调结果和当前then返回的Promise一致 从而导致死循环问题
  39.  * 6. catch只是then的一种特殊的写法 方便理解和使用
  40.  * 7. finally 特点 1. 不过resolve或者reject都会执行
  41.  *                2. 回调没有参数
  42.  *                3. 返回一个Promise 且值可以穿透到下一个then或者catch
  43.  * 8. Promise.resolve, Promise.reject 根据其参数返回对应的值 或者状态的Promise即可
  44.  * 9. Proise.all 特点  1. 返回一个Promise
  45.  *                    2. 入参是数组 resolve的情况下出参也是数组 且结果顺序和调用顺序一致
  46.  *                    3. 所有的值或者promise都完成才能resolve 所有要计数
  47.  *                    4. 只要有一个为reject 返回的Promise便reject
  48.  * 10. Proise.race 特点 1. 返回一个Promise
  49.  *                    2. 入参是数组 那么出参根据第一个成功或者失败的参数来确定
  50.  *                    3. 只要有一个resolve 或者reject 便更改返回Promise的状态
  51.  *
  52.  *
  53.  */
  55. class MyPromise {
  56.   status = PENDING;
  57.   value = undefined;
  58.   reason = undefined;
  59.   successCallbacks = [];
  60.   failCallbacks = [];
  61.   constructor(exector) {
  62.     // 立即执行传入参数
  63.     // 参数直接写为 this.resolve  会导致函数内 this指向会发生改变
  64.     // 异步执行状态变更
  65.     // 捕获执行器的异常
  66.     try {
  67.         exector(
  68.           (value) => asyncExecFun(() => this.resolve(value)),
  69.           (reason) => asyncExecFun(() => this.reject(reason))
  70.         );
  71.     } catch (e) {
  72.         this.reject(e)
  73.     }
  74.   }
  76.   resolve(value) {
  77.     // 如果状态已经变更则直接返回
  78.     if (this.status !== PENDING) return;
  79.     this.value = value;
  80.     this.status = FULFILLED;
  81.     // 执行所有成功回调
  82.     while (this.successCallbacks.length) this.successCallbacks.shift()();
  83.   }
  85.   reject(reason) {
  86.     // 如果状态已经变更则直接返回
  87.     if (this.status !== PENDING) return;
  88.     this.reason = reason;
  89.     this.status = REJECTED;
  90.     if(!this.failCallbacks.length){
  91.         throw '(in MyPromise)'
  92.     }
  93.     // 执行所有失败回调
  94.     while (this.failCallbacks.length) this.failCallbacks.shift()();
  95.   }
  96.   then(successCallback, failCallback) {
  97.     // 成功函数处理 忽略函数之外的其他值
  98.     successCallback =
  99.       typeof successCallback == "function" ? successCallback : (v) => v;
  100.     // 失败函数处理 忽略函数之外的其他值 抛出异常  实现catch冒泡的关键
  101.     failCallback =
  102.       typeof failCallback == "function"
  103.         ? failCallback
  104.         : (reason) => {
  105.             throw reason;
  106.           };
  108.     let promise = new MyPromise((resolve, reject) => {
  109.       // 统一异常处理逻辑
  110.       const execFun = (fn, val) => {
  111.         try {
  112.           let res = fn(val);
  113.           resolvePromise(promise, res, resolve, reject);
  114.         } catch (e) {
  115.           reject(e);
  116.         }
  117.       };
  118.       // 执行成功回调
  119.       const execSuccessCallback = () => execFun(successCallback, this.value);
  120.       // 执行失败回调
  121.       const execFailCallback = () => execFun(failCallback, this.reason);
  122.       // 同步将对应成功或者失败回调事件加入对应回调队列
  123.       if (this.status === PENDING) {
  124.         // 将成功回调加入队列
  125.         this.successCallbacks.push(execSuccessCallback);
  126.         // 讲失败回调加入队列
  127.         this.failCallbacks.push(execFailCallback);
  128.         return;
  129.       }
  130.       // 延迟执行 可以将函数执行结果和当前then 返回的promise 进行比较
  131.       asyncExecFun(() => {
  132.         // 如果已经 fulfilled 可直接调用成功回调方法
  133.         if (this.status === FULFILLED) {
  134.           execSuccessCallback();
  135.           // 如果已经 rejected 可直接调用失败回调方法
  136.         } else if (this.status === REJECTED) {
  137.           execFailCallback();
  138.         }
  139.       });
  140.     });
  141.     return promise;
  142.   }
  144.   catch(failCallback) {
  145.     return this.then(undefined, failCallback);
  146.   }
  148.   finally(callback) {
  149.     return this.then(
  150.       // 穿透正常值
  151.       (value) => MyPromise.resolve(callback()).then(() => value),
  152.       (reason) =>
  153.         MyPromise.resolve(callback()).then(() => {
  154.           // 穿透异常信息
  155.           throw reason;
  156.         })
  157.     );
  158.   }
  160.   static resolve(value) {
  161.     // 如果是MyPromise 实例 则直接返回
  162.     if (value instanceof MyPromise) return value;
  163.     // 如果是MyPromise 实例 否则返回一个 MyPromise实例
  164.     return new MyPromise((resolve) => resolve(value));
  165.   }
  166.   static reject(reason) {
  167.     // 如果是MyPromise 实例 则直接返回
  168.     if (reason instanceof MyPromise) return reason;
  169.     // 如果是MyPromise 实例 否则返回一个 MyPromise实例
  170.     return new MyPromise((resolve, reject) => reject(reason));
  171.   }
  173.   // all方法
  174.   static all(array) {
  175.     // 存储结果
  176.     let result = [];
  177.     // 存储数组长度
  178.     let len = array.length;
  179.     // 创建返回MyPromise
  180.     let promise = new MyPromise((resolve, reject) => {
  181.       // 定义当前MyPromise的索引
  182.       let index = 0;
  183.       // 添加数据的公用方法
  184.       function addData(key, data) {
  185.         // 赋值
  186.         result[key] = data;
  187.         // 索引递增
  188.         index++;
  189.         // 全部执行完则resolve
  190.         if (index == len) {
  191.           resolve(result);
  192.         }
  193.       }
  194.       // 按顺序变量数组
  195.       for (let i = 0; i < len; i++) {
  196.         let curr = array[i];
  197.         // 如果是MyPromise则 按其规则处理
  198.         if (curr instanceof MyPromise) {
  199.           curr.then((value) => addData(i, value), reject);
  200.         } else {
  201.           // 非MyPromise直接赋值
  202.           addData(i, curr);
  203.         }
  204.       }
  205.     });
  206.     // 返回新的MyPromise实例
  207.     return promise;
  208.   }
  209.   // 只要有一个成功或者失败就返回
  210.   static race(array) {
  211.     let promise = new MyPromise((resolve, reject) => {
  212.       for (let i = 0; i < array.length; i++) {
  213.         let curr = array[i];
  214.         // MyPromise实例 结果处理
  215.         if (curr instanceof MyPromise) {
  216.           curr.then(resolve, reject);
  217.         } else {
  218.           // 非MyPromise实例处理
  219.           resolve(curr);
  220.         }
  221.       }
  222.     });
  223.     return promise;
  224.   }
  225. }
  227. module.exports = MyPromise;