前端经典面试手写题

        

        前端面试中常会遇到的手写题主要考察应聘者对前端基础知识的掌握程度以及编程能力。以下是一些经典的前端手写题及其解答思路:

  • 手写深拷贝(Deep Clone)

深拷贝是指复制一个对象及其所有子对象,使得新的对象和原对象完全独立。

function deepClone(obj, cache = new WeakMap()) {  if (typeof obj !== 'object' || obj === null) {  return obj;  }  if (cache.get(obj)) {  return cache.get(obj); // 防止循环引用  }  let cloneObj = Array.isArray(obj) ? [] : {};  cache.set(obj, cloneObj);  for (let key in obj) {  if (obj.hasOwnProperty(key)) {  cloneObj[key] = deepClone(obj[key], cache);  }  }  return cloneObj;  
}
  • 手写防抖(Debounce)函数

防抖函数用于限制某个函数的执行频率,确保函数在指定的时间间隔内只执行一次。

function debounce(fn, delay) {  let timer;  return function(...args) {  if (timer) {  clearTimeout(timer);  }  timer = setTimeout(() => {  fn.apply(this, args);  }, delay);  };  
}
  • 手写节流(Throttle)函数

节流函数用于限制函数的执行频率,确保函数以一定的时间间隔执行。

function throttle(fn, delay) {  let last = 0;  return function(...args) {  const now = Date.now();  if (now - last > delay) {  last = now;  fn.apply(this, args);  }  };  
}
  • 手写 Object.create 方法

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

function create(obj) {  function F() {}  F.prototype = obj;  return new F();  
}
  • 手写 new 运算符

new 运算符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

function myNew(fn, ...args) {  if (typeof fn !== 'function') {  throw new Error('type error');  }  const obj = Object.create(fn.prototype);  const result = fn.apply(obj, args);  return result instanceof Object ? result : obj;  
}
  • 手写排序算法(如快速排序、冒泡排序等)

        这里以冒泡排序为例

function bubbleSort(arr) {  let len = arr.length;  for (let i = 0; i < len - 1; i++) {  for (let j = 0; j < len - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  // 相邻元素两两对比  let temp = arr[j + 1]; // 元素交换  arr[j + 1] = arr[j];  arr[j] = temp;  }  }  }  return arr;  
}
  • 数组去重

        实现一个数组去重的函数,可以使用 Set 数据结构或遍历比较。

function uniqueArray(arr) {  return [...new Set(arr)];  
}  // 或者使用遍历比较的方式  
function uniqueArrayByTraversal(arr) {  const uniqueSet = new Set();  const uniqueArr = [];  for (let item of arr) {  if (!uniqueSet.has(item)) {  uniqueSet.add(item);  uniqueArr.push(item);  }  }  return uniqueArr;  
}
  • 手写 Array.prototype.push 方法

push 方法向数组的末尾添加一个或多个元素,并返回新的长度。

Array.prototype.myPush = function(...items) {  for (let item of items) {  this[this.length] = item;  }  return this.length;  
};
  • 手写 Array.prototype.filter 方法

        创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

Array.prototype.myFilter = function(callback, thisArg) {  if (typeof callback !== 'function') {  throw new Error('callback must be a function');  }  const result = [];  for (let i = 0; i < this.length; i++) {  if (callback.call(thisArg, this[i], i, this)) {  result.push(this[i]);  }  }  return result;  
};
  • 手写 Array.prototype.find 方法

        返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

Array.prototype.myFind = function(callback, thisArg) {  if (typeof callback !== 'function') {  throw new Error('callback must be a function');  }  for (let i = 0; i < this.length; i++) {  if (callback.call(thisArg, this[i], i, this)) {  return this[i];  }  }  return undefined;  
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/23940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫实战:解析京东商品信息(附部分源码)

在信息爆炸的今天&#xff0c;网络爬虫&#xff08;Web Scraping&#xff09;作为一种自动获取网页内容的技术&#xff0c;已经成为数据采集的重要手段。Python&#xff0c;因其简洁的语法和强大的库支持&#xff0c;成为编写爬虫的首选语言之一。本文将通过一个实战案例&#…

聊聊DoIP吧(二)-报文结构和时间参数

书接上回&#xff0c;DoIP报文及其在以太网帧中的位置&#xff1a;图片来自Vector官网 这里我们来看看DoIP报文结构&#xff1a; DoIP协议时间参数详解 - 知乎 (zhihu.com)

实验三-8086指令的应用《计算机组成原理》

一、实验目的 掌握8086指令的应用 二、实验原理 三、实验仪器 计算机1台&#xff0c;emu8086软件。 四、实验步骤 1、建立00H&#xff5e;0FH&#xff5e;00H 31个数&#xff0c;00H&#xff5e;0FH数据逐渐增大,0FH&#xff5e;00H逐渐减小&#xff0c;即DI指针所表示的地…

linux进程间通讯指南-打通IPC大门,高效沟通无阻

在现代操作系统中&#xff0c;进程就像独立的个体&#xff0c;有时需要相互合作、数据共享&#xff0c;这就要求进程间能够高效通信。本文将为你揭开Linux进程间通信(IPC)的神秘面纱&#xff0c;探讨各种IPC工具的运作原理&#xff0c;同步机制的重要性&#xff0c;以及如何规避…

手动安装Nvidia驱动和CUDA Toolkit

1、打开cuda-toolkit 网站 CUDA Toolkit Archive | NVIDIA Developer 根据自己需要选择CUDA Toolkit版本&#xff0c;这里选择12.0.0 2、点击链接跳转到下载页面&#xff0c;选择操作系统类型和安装包类型 3、下载CUDA Toolkit 安装包 4、执行下载命令 wget https://develo…

【C语言】学生管理系统:完整模拟与实现

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 &#x1f525;引言 本篇文章为修改了在校期间实训报告&#xff0c;使用C…

undefined与null的区别

null表示"没有对象"&#xff0c;即该处不应该有值。 &#xff08;1&#xff09; 作为函数的参数&#xff0c;表示该函数的参数不是对象。 &#xff08;2&#xff09; 作为对象原型链的终点。 Object.getPrototypeOf(Object.prototype) // nullundefined表示"…

Qt+qss动态属性改变控件状态切换的样式

先说点基础的吧&#xff0c;qt的样式实现&#xff0c;常见的主要有三种方式&#xff0c;分别为&#xff1a; 1.ui界面中右键样式表直接添加 2.代码中对控件设置样式setStyleSheet 3.外部预设好qss文件&#xff0c;代码中加载后设置样式 实际工作开发中&#xff0c;我推荐使用优…

停止一个正在运行的线程

暴力停止方法 stop 该方法是不安全的&#xff0c;已经过时的方法&#xff0c;在其方法描述上 This method is inherently unsafe&#xff0c;这个方法实际上是不安全的 package com.alibaba.fescar.core.protocol.test;public class TestThreadStop {public static void main(S…

基于STM32开发的智能水族箱管理系统

目录 引言环境准备智能水族箱管理系统基础代码实现&#xff1a;实现智能水族箱管理系统 4.1 温度传感器数据读取4.2 水泵与加热器控制4.3 水位传感器数据读取4.4 用户界面与显示应用场景&#xff1a;水族箱管理与优化问题解决方案与优化收尾与总结 1. 引言 智能水族箱管理系…

day51 动态规划 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 动态规划 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][0] 表示第i天持有股票所得最多现金 &#xff0c;这里可能有同学疑惑&#xff0c;本题中只能买卖一次&#xff0c;持有股票之后哪还有现金呢&#xff1f; 其实一开始现…

web学习笔记(六十五)

目录 1. Hash模式和History模式 2. 导航守卫 3. 路由元信息 1. Hash模式和History模式 Hash模式&#xff08;历史模式&#xff09;和History模式&#xff08;哈希模式&#xff09;是匹配路由的两种模式&#xff0c;一般默认配置Hash模式&#xff0c;可以在index.js页面中将路…

几种在ARM MCU上控制流水灯的方法

对于初学者&#xff0c;在ARM单片机上控制流水灯的亮灭是必经之路。控制流水灯的亮灭有很多方法&#xff0c;比如8个LED&#xff0c;可以控制8灯同时亮、灭&#xff1b;可以控制8灯依次亮、灭&#xff1b;可以控制8灯依次亮、灭&#xff0c;然后反方向再依次亮、灭&#xff1b;…

python-NLP常用数据集0.1.012

XNLI数据集 用户语言翻译和跨语言分类的语料库 官网地址&#xff1a;https://github.com/facebookresearch/XNLI下载地址&#xff1a;https://dl.fbaipublicfiles.com/XNLI/XNLI-1.0.zip注意事项&#xff1a;数据集有json格式的&#xff0c;和txt格式的数据格式 txt格式 la…

我们正迈向万物互联

物联网&#xff08;Internet of Things&#xff0c;IoT&#xff09;是近年来信息技术领域最引人注目的创新之一。它通过将物理世界与数字世界紧密相连&#xff0c;为我们的日常生活、工业生产、城市管理等多个领域带来了前所未有的变革。本文将深入探讨物联网的基本概念、技术原…

Java 18 新功能概述

Java 18 在 2022 年 3 月 22 日正式发布&#xff0c;Java 18 不是一个长期支持版本。 包含多项新特性和改进&#xff0c;如文件系统链接、文本块、表达式求值API、ForkJoinPool优化、Optional新方法等。 亮点还包括预览特性&#xff1a;Record Pattern Matching for Switch和增…

FMEA与8D间之动态化及关联性——SunFMEA软件

企业做好全面质量管理&#xff0c;需要具备&#xff1a;以事先预防、系统化、动态化、创新性四大理念为核心。 为实现质量管理目标&#xff0c;通常采用不同工具和方法&#xff0c;我们会发现&#xff0c;每种工具都有其特定的对象&#xff0c;很多问题的解决都需要多种工具的…

Android - RadioGroup中多个radiobutton同时被选中问题

问题描述: 动态创建radio button, 并将多个button添加到radio group中。但是实际运行时多个radiobutton会被同时选中: 代码如下: mRadioGroup findViewById(R.id.radioGroup);mDevButtons new RadioButton[device_count];for(int i0;i<device_count;i) {mDevButtons[i] …

C++ - 查找算法 和 其他 算法

目录 一. 查找算法&#xff1a; 1.顺序查找&#xff1a; 2.二分查找&#xff1a; 二. 其他算法&#xff1a; 1.遍历算法&#xff1a; 2.求和、求平均值等聚合算法。 a.求和算法&#xff1a; b.求平均值算法&#xff1a; 一. 查找算法&#xff1a; 1.顺序查找&#xff1…

Python深度学习基于Tensorflow(15)OCR验证码 文本检测与识别实例

文章目录 文本检测文本识别CTC层生成验证码并制作数据集建立模型模型推理 参考 文本检测 文本检测和目标检测类似&#xff0c;其不同之处在于文本目标具有序列特征&#xff0c;有连续性&#xff0c;可以通过结合 Faster R-CNN 和 LSTM 的方式进行文本检测&#xff0c;如 CTPN …