京东前端手写面试题集锦

这篇博客汇总了前端面试中常见的手写代码题目,包括实现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__;
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值