前端常考手写面试题汇总

最新推荐文章于 2025-01-19 12:06:03 发布

helloworld1024fd

最新推荐文章于 2025-01-19 12:06:03 发布

阅读量438

点赞数

文章标签： javascript

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

版权

这篇博客汇总了前端面试中常见的手写题目，包括数据类型判断、字符串查找、千位分隔符、链式调用实现、邮箱验证、事件绑定、排序算法、链表操作、Promise实现、深浅拷贝等。通过这些实战练习，帮助开发者提升前端技能，应对面试挑战。

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

实现一个函数判断数据类型

function getType(obj) {
   
   if (obj === null) return String(obj);
   return typeof obj === 'object' 
   ? Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase()
   : typeof obj;
}

// 调用
getType(null); // -> null
getType(undefined); // -> undefined
getType({
   }); // -> object
getType([]); // -> array
getType(123); // -> number
getType(true); // -> boolean
getType('123'); // -> string
getType(/123/); // -> regexp
getType(new Date()); // -> date

字符串查找

请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）。

a='34';b='1234567'; // 返回 2
a='35';b='1234567'; // 返回 -1
a='355';b='12354355'; // 返回 5
isContain(a,b);

function isContain(a, b) {
   
  for (let i in b) {
   
    if (a[0] === b[i]) {
   
      let tmp = true;
      for (let j in a) {
   
        if (a[j] !== b[~~i + ~~j]) {
   
          tmp = false;
        }
      }
      if (tmp) {
   
        return i;
      }
    }
  }
  return -1;
}

实现千位分隔符

// 保留三位小数
parseToMoney(1234.56); // return '1,234.56'
parseToMoney(123456789); // return '123,456,789'
parseToMoney(1087654.321); // return '1,087,654.321'

function parseToMoney(num) {
   
  num = parseFloat(num.toFixed(3));
  let [integer, decimal] = String.prototype.split.call(num, '.');
  integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,');
  return integer + '.' + (decimal ? decimal : '');
}

实现 (5).add(3).minus(2) 功能

例： 5 + 3 - 2，结果为 6

Number.prototype.add = function(n) {
   
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
   
  return this.valueOf() - n;
};

实现add(1)(2) =3

// 题意的答案
const add = (num1) => (num2)=> num2 + num1;

// 整了一个加强版 可以无限链式调用 add(1)(2)(3)(4)(5)....
function add(x) {
   
  // 存储和
  let sum = x;

  // 函数调用会相加，然后每次都会返回这个函数本身
  let tmp = function (y) {
   
    sum = sum + y;
    return tmp;
  };

  // 对象的toString必须是一个方法 在方法中返回了这个和
  tmp.toString = () => sum
  return tmp;
}

alert(add(1)(2)(3)(4)(5))

无限链式调用实现的关键在于 对象的 toString 方法 : 每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。

也就是我在调用很多次后，他们的结果会存在add函数中的sum变量上，当我alert的时候 add会自动调用 toString方法打印出 sum, 也就是最终的结果

验证是否是邮箱

function isEmail(email) {
   
    var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
    return regx.test(email);
}

创建10个标签，点击的时候弹出来对应的序号

var a
for(let i=0;i<10;i++){
   
 a=document.createElement('a')
 a.innerHTML=i+'<br>'
 a.addEventListener('click',function(e){
   
     console.log(this)  //this为当前点击的<a>
     e.preventDefault()  //如果调用这个方法，默认事件行为将不再触发。
     //例如，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。
     alert(i)
 })
 const d=document.querySelector('div')
 d.appendChild(a)  //append向一个已存在的元素追加该元素。
}

查找数组公共前缀（美团）

题目描述

编写一个函数来查找字符串数组中的最长公共前缀。
如果不存在公共前缀，返回空字符串 ""。

示例 1：

输入：strs = ["flower","flow","flight"]
输出："fl"

示例 2：

输入：strs = ["dog","racecar","car"]
输出：""
解释：输入不存在公共前缀。

答案

const longestCommonPrefix = function (strs) {
   
  const str = strs[0];
  let index = 0;
  while (index < str.length) {
   
    const strCur = str.slice(0, index + 1);
    for (let i = 0; i < strs.length; i++) {
   
      if (!strs[i] || !strs[i