面试题-第1篇

拨云见日

本篇文章主要是我整理的一些面试题，希望可以帮助到大家

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

- JS 异步编程

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

- EventLoop 事件环和消息队列

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

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

  ![EventLoop.jpg](http://ww1.sinaimg.cn/large/0069rEoegy1gg8i0534ytj30zm0p7gol.jpg)

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

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

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

- 宏任务与微任务

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

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

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

  

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

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

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

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

answer1：
new Promise(resolve => {
    var a = 'hello'
    resolve(a)
}).then(resA => {
    var b = 'lagou'
    return resA + b;
}).then(resB => {
    var c = 'I ❤ U'
    console.log(resB + c)
})

answer2：
async function showStr() {
  let a = await Promise.resolve('helloP')
  let b = await Promise.resolve('lagou')
  let c = await Promise.resolve('IU')
  console.log(a + b + c)
}
showStr()

answer3：
async function showStr() {
	let a = await Promise('hello')
	let b = await Promise('lagou')
	let c = await Promise('IU')
console.log(a + b + c)
}
showStr()

answer4：
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

#### 练习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


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


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


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


let averageDollarValue = fp.flowRight(_average, 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 中使用它


> 先定义获取某个对象中的 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'
// ]

谢谢观看，如有不足，敬请指教