函数式编程与 JS 异步编程、手写 Promise作业

简答题

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

  • JS 异步编程

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

  • EventLoop 事件环和消息队列

    EventLoop 是一种循环机制 ，不断去轮询一些队列 ，从中找到需要执行的任务并按顺序执行的一个执行模型。

    消息队列 是用来存放宏任务的队列， 比如定时器时间到了， 定时间内传入的方法引用会存到该队列， ajax回调之后的执行方法也会存到该队列。

    EventLoop.jpg

    一开始整个脚本作为一个宏任务执行。执行过程中同步代码直接执行，宏任务等待时间到达或者成功后，将方法的回调放入宏任务队列中，微任务进入微任务队列。

    当前主线程的宏任务执行完出队，检查并清空微任务队列。接着执行浏览器 UI 线程的渲染工作，检查web worker 任务，有则执行。

    然后再取出一个宏任务执行。以此循环...

  • 宏任务与微任务

    宏任务可以理解为每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

    浏览器为了让 JS 内部宏任务 与 DOM 操作能够有序的执行，会在一个宏任务执行结束后，在下一个宏任务执行开始前，对页面进行重新渲染。

    宏任务包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、MessageChannel 等

    微任务可以理解是在当前任务执行结束后需要立即执行的任务。也就是说，在当前任务后，在渲染之前，执行清空微任务。

    所以它的响应速度相比宏任务会更快，因为无需等待 UI 渲染。

    微任务包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)等

代码题

一、将下面异步代码使用 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);

参考代码：

// 第一种
new Promise(resolve => {
  var a = 'hello'
  resolve(a); // 将 pending状态的值改成 成功状态,并且将a传给下一个 promise的resolve作为参数
}).then(resA => {
  var b = 'lagou'
  return resA + b; // 将resA+b的结果传给下一个 promise的resolve作为参数
}).then(resB => {
  var c = 'I ❤ U';
  console.log(resB + c);
})

// 第二种
async function showStr() {
  let a = await Promise.resolve('hello');
  let b = await Promise.resolve('lagou');
  let c = await Promise.resolve('I ❤ U')
  console.log(a + b + c);
}
showStr();

// 第三种
function promise(str) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(str);
    }, 10);
  })
}

async function showStr() {
  let a = await promise('hello');
  let b = await promise('lagou');
  let c = await promise('I ❤ U');
  console.log(a + b + c)
}
showStr();

// 第四种
Promise.resolve('hello')
  .then((value) => {
    return value + 'logou';
  })
  .then((value) => {
    return value + 'I ♥ U';
  })
  .then((value) => console.log(value));

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

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);
}

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

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

/*
    我的写法
    flowRight从右向左依次执行函数，并将上一个函数返回的结果当作下一个函数的参数,最后会返回一个函数
*/
let isLastInStock = cars => fp.flowRight(fp.prop('in_stock'), fp.last)(cars);
console.log(isLastInStock(cars)); // false

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

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

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

// 我的写法
let getFirstName = cars => fp.flowRight(fp.prop('name'), fp.first)(cars);
console.log(getFirstName(cars)) // Ferrari FF

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

let _average = function (xs) {
  return fp.reduce(fp.add, 0, xs) / xs.length;
} // <-- 无须改动

let averageDollarValue = cars => {
  let dollar_values = fp.map(function (car) {
    return car.dollar_value;
  }, cars);
  return _average(dollar_values);
}

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

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

/* 
    我的写法
    将fp.map中每个值中的dollar_value组成一个新数组当作参数传给_average这个函数
*/
let averageDollarValue = cars => fp.flowRight(_average, fp.map(car => car.dollar_value))(cars);
console.log(averageDollarValue(cars));  // 790700

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

// 将全局匹配中所有非 数字 字母 下划线的 转换为_
let _underscore = fp.replace(/\W+/g, '_'); // <-- 无须改动，并在 sanitizeNames 中使用它

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

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'
    ]
*/

/*
    我的写法
    这题理解错题意了，我以为是将自己给定的数组里面的值转换
    全部转换为小写,然后用replace方法转换为_
*/
let sanitizeNames = array => fp.map(fp.flowRight(_underscore,fp.toLower))(array);
console.log(sanitizeNames(['Hello World']));

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

// 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 = () => {
  // 你需要实现的函数...
}

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

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

// 我的方法
let ex1 = (num) => {
  // 需要实现的函数
  return maybe.map(fp.map(x => fp.add(x,num)))._value;
}
console.log(ex1(1)); // [6, 7, 2]

练习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 = () => {
    // 你需要实现的函数。。。
}

解答如下：

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

// 我的方法
let ex2 = () => xs.map(fp.first)._value;
console.log(ex2()) // 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 = () => {
  // 你需要实现的函数。。。
}

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

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

// 我的方法
let ex3 = (user) => {
  // 你需要实现的函数
  return fp.first(safeProp('name')(user)._value);
}
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)
  }
}

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

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

// 我的写法
let ex4 = n => fp.flowRight(fp.first,fp.map(parseInt),Maybe.of)(n);

四、手写实现 MyPromise 源码

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

手把手教你实现Promise源码

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,240评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,328评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,182评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,121评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,135评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,093评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,013评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,854评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,295评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,398评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,989评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352