练习题一

一、同异步编程

谈谈你是如何理解 JS 异步编程的，EventLoop、消息队列都是做什么的，什么是宏任务，什么是微任务？

• JS 异步编程

  JavaScript 是单线程的，一次只能执行一个任务，多任务需要排队，可能会造成阻塞代码，为了避免这个问题，出现了异步编程。一般是通过回调函数、事件发布订阅、Promise 来组织代码，本质上都是通过回调函数实现

• EventLoop 事件循环

  EventLoop 是一种循环机制，不断地去消息队列中轮询，从中找到需要执行的任务按顺序执行

• 消息队列

  消息队列是用来存放宏任务的队列（定时器时间到了里面的回调函数、ajax 回调后的执行方法）

  当前主线程宏任务执行完出队，检查并清空微任务队列，接着执行浏览器 UI 线程渲染工作、检查 Web Worker 任务，然后再取出下一个宏任务执行，以此循环

• 宏任务

  每次执行栈执行的代码就是宏任务。浏览器为了让 JS 宏任务与 DOM 操作能有序进行，会在宏任务执行结束后，在下一个宏任务执行前，对页面重新渲染

  宏任务：script（整体代码）、setTimeout、setInterval、I/O、UI交互事件、MessageChannel 等

• 微任务

  当前任务执行结束后需要立即执行的任务（在渲染之前会清空微任务，无需等待 UI 渲染）

  微任务：Promise.then、MutationObserver、process.nextTick（Node）等

二、Promise 改进

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

setTimeout(function () {
  var a = 'hello'
  setTimeout(function () {
    var b = 'lagou'
    setTimeout(function () {
      var c = 'I ❤️ U'
      console.log(a + b + c)
    }, 10)
  }, 10)
}, 10)

==答：==

function promise(str) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(str)
    }, 10)
  })
}
async function main() {
  let a = await promise('hello')
  let b = await promise('lagou')
  let c = await promise('I ❤️ U')
  console.log(a + b + c)
}
main()

三、合成函数运用

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

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

练习1

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

let isLastInStock = function (cars) {
  // 获取最后一条数据
  let last_car = fp.last(cars)
  // 获取最后一条数据的 in_stock 属性值
  return fp.prop('in_stock', last_car)
}
console.log(isLastInStock(cars)) // false

==答：==

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

练习2

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

==答：==

let getFirstCar = fp.flowRight(fp.prop('name'), fp.first)
console.log(getFirstCar(cars)) // Ferrari FF

练习3

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

let _average = function (xs) {
  return fp.reduce(fp.add, 0, xs) / xs.length
}
let averageDollarValue = function (cars) {
  let dollar_value = fp.map(function (car) {
    return car.dollar_value
  }, cars)
  return _average(dollar_value)
}

==答：==

const averageDollarValue = fp.flowRight(
  xs => fp.reduce(fp.add, 0, xs) / xs.length,
  fp.map('dollar_value')
)
console.log(averageDollarValue(cars)) // 790700

练习4

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

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

==答：==

let _underscore = fp.replace(/\W+/g, '_')
let sanitizeNames = fp.flowRight(
  fp.map(_underscore),
  fp.map(fp.toLower),
  fp.map(car => car.name)
)
console.log(sanitizeNames(cars))
/* [
  'ferrari_ff',
  'spyker_c12_zagato',
  'jaguar_xkr_s',
  'audi_r8',
  'aston_martin_one_77',
  'pagani_huayra'
] *

四、函子运用

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

// support.js
class Container {
  static of(value) {
    return new Container(value)
  }
  constructor(value) {
    this._value = value
  }
  map(fn) {
    return Container.of(fn(this._value))
  }
}
class Maybe {
  static of(x) {
    return new Maybe(x)
  }
  isNothing() {
    return this._value === null || this._value === undefined
  }
  constructor(x) {
    this._value = x
  }
  map(fn) {
    return this.isNothing() ? this : Maybe.of(fn(this._value))
  }
}
module.exports = { Maybe, Container }

练习1

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

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

==答：==

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support')
let maybe = Maybe.of([5, 6, 1])
let ex1 = v => {
  return fp.map(fp.add(1), v)
}
console.log(maybe.map(ex1))

练习2

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

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

==答：==

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support')
let xs = Container.of(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])
let ex2 = () => {
  return xs.map(fp.first)
}
console.log(ex2()._value) // do

练习3

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

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

==答：==

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support')
let safeProp = fp.curry(function (x, o) {
  return Maybe.of(o[x])
})
let user = { id: 2, name: 'Albert' }
let ex3 = () => {
  return fp.flowRight(fp.map(fp.first), safeProp('name'))
}
console.log(ex3()(user)) // [ 'A' ]

练习4

使用 Maybe 重写 ex4，不要有 if 语句

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support')
let ex4 = function (n) {
  if (n) {
    return parseInt(n)
  }
}

==答：==

const fp = require('lodash/fp')
const { Maybe, Container } = require('./support')
let ex4 = function (n) {
  return Maybe.of(n).map(parseInt)
}
console.log(ex4('1')._value) // 1

五、手写 Promise 源码

要求：尽可能还原 Promise 中的每一个 API，并通过注释的方式描述思路和原理