有意思的前端面试题收录分析解答

[ChenJiaH]

首发于微信公众号《前端成长记》，写于 2017.01.20

介绍

近期看见一些有意思的前端面试题，激起了我心中的火，故收录并尝试解答分析

面试题

1. 写一个mul函数调用时生成如下输出：

console.log(mul(2)(3)(4)); // output : 24 
console.log(mul(4)(3)(4)); // output : 48 

即乘法。

** 解答 **

function mul(a){
    var result = function(b){
        return mul(a * b)
    };
    result.valueOf = function(){
        return a;
    }
    return result
}

** 分析 **

初一看这道题，被三个()看的有的晕乎，心想两个的我见过，三个的还真是头一回。

仔细琢磨下，发现这其中需要实现的就是需要保留每次执行函数的结果，用于跟下一次的入参做乘法；同时函数需要自执行，因为最终需要输出结果而不是Function

得出这几点：

• 该mul函数返回结果肯定是一个Function Object,而且该函数的返回值应该是两次入参的乘积
• 在return之前肯定进行取值操作了

然后我们通过解答去分析，mul(2)的执行结果是 function(b){ return mul(2 * y)}，但是，该函数进行了valueOf操作，所以第一次执行的结果是 mul(2 * y)，接下来，将3传入，所以此时的结果是mul(6 * y)，注意这时候的6是刚才的结果，y是接下来传入的参数值，同理传入4的时候没有y值了，所以最终的返回值为 2 * 3 * 4=24。

** 出处 **

https://www.zhihu.com/question/54822257

2. Concatenating functions

Functional programming thrives from the reuse of functions. One core feature to extend the reuse is the concatenation of functions.

You probably know this feature from your favorite shell: ls -la | sort | head lists the top lines of the sorted result of ls -la

Build a function pipe to achieve this with JS. An example use could be:

var addOne = function(e) {
    return e + 1;
};
var square = function(e) {
    return e * e;
};
var result = [1,2,3,4,5].map(addOne.pipe(square)) //-> [4,9,16,25,36]

Since a function only can return one value it is absolutely sufficient to only support functions that consume only one parameter. Build your pipe function in a way, that one can pipe an arbitrary number of functions.

** 解答 **

// just a small amount of possible functions to start testing with.
var addOne = function(e) {return e + 1;};
var square = function(e) {return e * e;};
// Extend the Function prototype with a method pipe
Function.prototype.pipe = function(input){
  var func = this;
  return function(num){
    return input(func(num));
  };
};

** 分析 **

这道题在我看来是将函数作为入参，另外考察数组map的使用

我们从 addOne.pipe(square) 看，这里说明pipe接收一个Fn作为参数，同时很显示，输出是原数组的每项加一的平方。即可以得出：

Function.prototype.pipe = function (square){
    // 里面一定有
    // addOne(number);    // 这里number是map方法的第一个参数
    // 接着pipe(square)这里必须是需要返回number+1的平方，细看square方法，如果我们把addOne(number)+1作为入参传入square，是不是就OK了呢，于是：
    return function (number){
        return square(addOne(number))
    }
    // 然后再优化一下写法
    return function (number) {
        return square(this(number))
    }.bind(this);

如果用ES6的写法就更简单了，直接 ...args

Function.prototype.pipe = function (square) {
  return (...args) => square(this(...args))
}

** 出处 **

https://www.codewars.com/kata/concatenating-functions/javascript

长期收集补充，欢迎大家提供有趣的前端面试题

此收录长期有效。

如果您也遇见或者接触到有意思的前端题目，欢迎留言给我，我们一起做这个有意义有价值的事情。

（完）

---

本文为原创文章，可能会更新知识点及修正错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验
如果能给您带去些许帮助，欢迎 ⭐️star 或 ✏️ fork
(转载请注明出处：https://chenjiahao.xyz)