京东前端手写面试题集锦

最新推荐文章于 2024-09-13 09:37:55 发布

helloworld1024fd

最新推荐文章于 2024-09-13 09:37:55 发布

阅读量703

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端框架 javascript

本文链接：https://blog.youkuaiyun.com/helloworld1024fd/article/details/129501289

这篇博客汇总了前端面试中常见的手写代码题目，包括实现call方法、双向数据绑定、数组的flat方法、Object.create、数组的map方法、instanceOf、数组去重、节流函数、Event Bus、call函数的实现等。此外，还涵盖了大整数相加、函数柯里化、日期格式化、字符串查找、模板引擎和异步操作如fetch和AJAX的封装。通过这些实战练习，提升前端开发者的基础技能和面试准备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现call方法

call做了什么:

将函数设为对象的属性
执行和删除这个函数
指定this到函数并传入给定参数执行函数
如果不传入参数，默认指向为 window

// 模拟 call bar.mycall(null);
//实现一个call方法：
// 原理：利用 context.xxx = self obj.xx = func-->obj.xx()
Function.prototype.myCall = function(context = window, ...args) {
   
   
  if (typeof this !== "function") {
   
   
    throw new Error('type error')
  }
  // this-->func  context--> obj  args--> 传递过来的参数

  // 在context上加一个唯一值不影响context上的属性
  let key = Symbol('key')
  context[key] = this; // context为调用的上下文,this此处为函数，将这个函数作为context的方法
  // let args = [...arguments].slice(1)   //第一个参数为obj所以删除,伪数组转为数组

  // 绑定参数 并执行函数
  let result = context[key](...args);
  // 清除定义的this 不删除会导致context属性越来越多
  delete context[key];

  // 返回结果 
  return result;
};

//用法：f.call(obj,arg1)
function f(a,b){
   
   
 console.log(a+b)
 console.log(this.name)
}
let obj={
   
   
 name:1
}
f.myCall(obj,1,2) //否则this指向window

实现双向数据绑定

let obj = {
   
   }
let input = document.getElementById('input')
let span = document.getElementById('span')
// 数据劫持
Object.defineProperty(obj, 'text', {
   
   
  configurable: true,
  enumerable: true,
  get() {
   
   
    console.log('获取数据了')
  },
  set(newVal) {
   
   
    console.log('数据更新了')
    input.value = newVal
    span.innerHTML = newVal
  }
})
// 输入监听
input.addEventListener('keyup', function(e) {
   
   
  obj.text = e.target.value
})

实现数组的flat方法

function _flat(arr, depth) {
   
   
  if(!Array.isArray(arr) || depth <= 0) {
   
   
    return arr;
  }
  return arr.reduce((prev, cur) => {
   
   
    if (Array.isArray(cur)) {
   
   
      return prev.concat(_flat(cur, depth - 1))
    } else {
   
   
      return prev.concat(cur);
    }
  }, []);
}

手写 Object.create

思路：将传入的对象作为原型

function create(obj) {
   
   
  function F() {
   
   }
  F.prototype = obj
  return new F()
}

模拟Object.create

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

// 模拟 Object.create

function create(proto) {
   
   
  function F() {
   
   }
  F.prototype = proto;

  return new F();
}

交换a,b的值，不能用临时变量

巧妙的利用两个数的和、差：

a = a + b
b = a - b
a = a - b

参考前端进阶面试题详细解答

实现数组的map方法

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

实现instanceOf

// 模拟 instanceof
function instance_of(L, R) {
   
   
  //L 表示左表达式，R 表示右表达式
  var O = R.prototype; // 取 R 的显示原型
  L = L.__proto__; // 取 L 的隐式原型
  while (true) {
   
   
    if (L === null) return false;
    if (O === L)
      // 这里重点：当 O 严格等于 L 时，返回 true
      return true;
    L = L.__proto__;
  }