从一道坑人的面试题说函数式编程

谁践踏了优雅 2022-11-13 12:23 131阅读 0赞

一道著名的坑人题，可能一些同学见过：

['2', '3', '4'].map(parseInt);

说出上面代码的执行结果。

如果不过脑子的说是 \[2, 3, 4\]，那么肯定是错了。实际上，真正的执行结果是 \[2, NaN, NaN\]。为什么会这样呢？是因为 map 的算子是有两个参数的，第一个参数是被迭代数组的元素，第二个参数是该元素的下标。所以 \[‘2’, ‘3’, ‘4’\].map(parseInt) 实际上相当于执行了 \[parseInt(‘2’, 0), parseInt(‘3’, 1), parseInt(‘4’, 2)\]，结果就变成了 \[2, NaN, NaN\] 了。

今天我们在这里主要不是讨论为什么 parseInt(‘2’, 0) 是 2，而 parseInt(‘3’, 1) 是 NaN，实际上我们期望的结果应该是 parseInt(‘2’, 10) 和 parseInt(‘3’, 10)，把字符串 ‘2’、‘3’ 转成十进制 number。

所以，正确的写法应该是：

['2', '3', '4'].map(num => parseInt(num, 10));

上面这个写法对于这个问题来说是简单的，和函数式编程关系不大。但是，这个问题如果用过程抽象的思路通用化思考，应该是这样的：

['2', '3', '4'].map(parseInt.bindRight(null, 10));

其中 bindRight 和 bind 方法是相反的，bindRight 相当于从右往左 bind：

function add(x, y, z){
        return 100*x + 10 * y + z;
    }
    
    let add1 = add.bind(null, 1, 2);
    let add2 = add.bindRight(null, 1, 2);
    
    add1(3); //123
    add2(3); //321

要实现 bindRight，考虑各种情况，稍稍有些复杂，但也并不太麻烦：

这样就实现了我们需要的 bindRight，完整的结果如下：

Function.prototype.bindRight = function(thisObj, ...values){
      let fn = this, len = fn.length - values.length;
      return function(...args){
        let rest = [], rargs = values.reverse();
        
        if(len > 0){
          rest = args.slice(0, len);
        }
    
        return fn.apply(thisObj, rest.concat(rargs));
      }
    }
    
    console.log(["2","3","4"].map(parseInt));
    
    console.log(["2","3","4"].map(parseInt.bindRight(null, 10)));
    
    function add(x, y, z){
        return 100*x + 10 * y + z;
    }
    
    let add1 = add.bind(null, 1, 2);
    let add2 = add.bindRight(null, 1, 2);
    
    console.log(add1(3)); //123
    console.log(add2(3)); //321

bindRight 代码并不复杂，如果 bindRight 的参数个数比函数形参多，那么简单将参数次序 reverse 之后传给原来的函数，否则将函数前面的参数补齐。

除了这样实现 bindRight 之外，还可以有利用更基础的高阶函数操作组合的方式：

上面的这段代码里我们通过 reverseArgs 和 fixArgsLength 以及 bind 来组合出 bindRight。reverseArgs 是将函数参数顺序倒序的高阶函数，fixArgsLength 是将函数参数个数固定的高阶函数，我们可以看到 bindRight 就是先 reverseArgs 再 bind，最后 fixArgsLength（大家可以思考下为什么要 fixArgsLength）。这样就可以了。

不过话说，就上面这个问题直接用 fixArgsLength 也可以——

["2","3","4"].map(parseInt.fixArgsLength(1)); // [2, 3, 4]

最后是完整代码：

Function.prototype.reverseArgs = function(){
      let fn = this;
      return function(...args){
        return fn.apply(this, args.reverse());
      }
    }
    
    Function.prototype.fixArgsLength = function(len){
      let fn = this;
      return function(...args){
        args.length = len || fn.length;
        return fn.apply(this, args);
      }
    }
    
    Function.prototype.bindRight = function(thisObj, ...values){
      return this.reverseArgs().bind(thisObj, ...values).reverseArgs().fixArgsLength(1);
    }
    
    var a = parseInt.bind(null, 10);
    
    
    console.log(["2","3","4"].map(parseInt));
    console.log(["2","3","4"].map(parseInt.bindRight(null, 10)));
    console.log(["2","3","4"].map(parseInt.fixArgsLength(1)));
    
    function add(x, y, z){
        return 100*x + 10 * y + z;
    }
    
    let add1 = add.bind(null, 1, 2);
    let add2 = add.bindRight(null, 1, 2);
    
    console.log(add1(3)); //123
    console.log(add2(3)); //321

如有任何问题，欢迎讨论。

下面分享一份我整理的前端校招面试题，分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等，共280页PDF。

![b04ffb511a2334fd2d769557ef468daa.png][]

![3dbbb98241800377c15cd9f45ebe9b2b.png][]

#### 完整版面试题资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

[b04ffb511a2334fd2d769557ef468daa.png]: /images/20221022/0a8fbf0b1df641afb6b4df72eed96c17.png
[3dbbb98241800377c15cd9f45ebe9b2b.png]: /images/20221022/b3db2bf92e1848a2b1955e54a8e7e563.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq