腾讯前端手写面试题及答案

最新推荐文章于 2024-04-22 03:57:30 发布

原创

最新推荐文章于 2024-04-22 03:57:30 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详述了前端面试中常见的手写题目，包括实现柯里化的add函数、深度比较isEqual、数组的filter方法、字符串翻转、模拟Object.assign、封装fetch、查找文章高频单词、浅拷贝等。涵盖了函数、对象、数组、字符串等多个方面的JavaScript知识点。

实现 add(1)(2)(3)

函数柯里化概念：柯里化（Currying）是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。

1）粗暴版

function add (a) {
   
   
return function (b) {
   
   
     return function (c) {
   
   
      return a + b + c;
     }
}
}
console.log(add(1)(2)(3)); // 6

2）柯里化解决方案

参数长度固定

var add = function (m) {
   
   
  var temp = function (n) {
   
   
    return add(m + n);
  }
  temp.toString = function () {
   
   
    return m;
  }
  return temp;
};
console.log(add(3)(4)(5)); // 12
console.log(add(3)(6)(9)(25)); // 43

对于add(3)(4)(5)，其执行过程如下：

先执行add(3)，此时m=3，并且返回temp函数；
执行temp(4)，这个函数内执行add(m+n)，n是此次传进来的数值4，m值还是上一步中的3，所以add(m+n)=add(3+4)=add(7)，此时m=7，并且返回temp函数
执行temp(5)，这个函数内执行add(m+n)，n是此次传进来的数值5，m值还是上一步中的7，所以add(m+n)=add(7+5)=add(12)，此时m=12，并且返回temp函数
由于后面没有传入参数，等于返回的temp函数不被执行而是打印，了解JS的朋友都知道对象的toString是修改对象转换字符串的方法，因此代码中temp函数的toString函数return m值，而m值是最后一步执行函数时的值m=12，所以返回值是12。

参数长度不固定

function add (...args) {
   
   
    //求和
    return args.reduce((a, b) => a + b)
}
function currying (fn) {
   
   
    let args = []
    return function temp (...newArgs) {
   
   
        if (newArgs.length) {
   
   
            args = [
                ...args,
                ...newArgs
            ]
            return temp
        } else {
   
   
            let val = fn.apply(this, args)
            args = [] //保证再次调用时清空
            return val
        }
    }
}
let addCurry = currying(add)
console.log(addCurry(1)(2)(3)(4, 5)())  //15
console.log(addCurry(1)(2)(3, 4, 5)())  //15
console.log(addCurry(1)(2, 3, 4, 5)())  //15

手写深度比较isEqual

思路：深度比较两个对象，就是要深度比较对象的每一个元素。=> 递归

递归退出条件：
- 被比较的是两个值类型变量，直接用“===”判断
- 被比较的两个变量之一为null，直接判断另一个元素是否也为null
提前结束递推：
- 两个变量keys数量不同
- 传入的两个参数是同一个变量
递推工作：深度比较每一个key

function isEqual(obj1, obj2){
   
   
    //其中一个为值类型或null
    if(!isObject(obj1) || !isObject(obj2)){
   
   
        return obj1 === obj2;
    }

    //判断是否两个参数是同一个变量
    if(obj1 === obj2){
   
   
        return true;
    }

    //判断keys数是否相等
    const obj1Keys = Object.keys(obj1);
    const obj2Keys = Object.keys(obj2);
    if(obj1Keys.length !== obj2Keys.length){
   
   
        return false;
    }

    //深度比较每一个key
    for(let key in obj1){
   
   
        if(!isEqual(obj1[key], obj2[key])){
   
   
            return false;
        }
    }

    return true;
}

实现数组的filter方法

Array.prototype._filter = function(fn) {
   
   
    if (typeof fn !== "function") {
   
   
        throw Error('参数必须是一个函数');
    }
    const res = [];
    for (let i = 0, len = this.length; i < len; i++) {
   
   
        fn(this[i]) && res.push(this[i]);
    }
    return res;
}