前端开发工程师面试题目（前端开发工程师笔试题）

云哥跟大家说下前端面试笔试题和线上面试的时候有时候会出手写题和编程题，外包公司很多都考编程题，自研公司有些也考，可以抽时间做做，不然可能到时候面试一道都做不出来

一、常见的前端面试题手写代码题

1. 防抖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> 防抖： <input id="input" type="text"> </body> <script> // 监听拿到input输入的值 input.addEventListener('input', function (e) { val(e.target.value) }) // 防抖的核心代码 function fn(time, fun) { let flag // 定义状态 return function (value) { clearTimeout(flag)// 在执行之前清除定时器的 flag 不让他执行 flag = setTimeout(() => { fun(value) }, time) } } const val = fn(1000, function (val) { console.log(val) }) </script> </html> 2. 节流 <body> <button id="button">手在快1秒执行一次</button> </body> <script> /* 定时器版本的 fns 回调函数 time 间隔时间 function throttle(fns, time) { let flag // 定义一个空状态 return function () { // 内部函数访问外部函数形成闭包 if (!flag) { // 状态为空执行 flag = setTimeout(() => { fns.apply(this, arguments) // 改变this指向吧 event 事件对象传出去 flag = null }, time) } } } */ function throttle(fun, time) { let flag = 0 return function () { let now = +new Date().valueOf() // 当前的值减去上一次的值 >= 传过来的事件执行 if (now - flag >= time) { fun.apply(this, arguments) flag = now } } } button.onclick = throttle((e) => { console.log(e) }, 1000) </script> 3. 深拷贝 var arr = { a: 2, b: [33] } function cloneDeep(arr = {}) { // 终止递归判断如果传进来的数据不是 object 或者传进来的是一个 null 直接返回 if (!arr || typeof arr != 'object' || arr == null) return arr // 声明一个对象 let result // 用 instanceof 判断原型链上是否有该类型的原型是 Array => [] ! Arrays =>{} arr instanceof Array ? result = [] : result = {} // forin 循环对象的key值 for (const key in arr) { // 对象 key 赋值 result result[key] = cloneDeep(arr[key]) } return result } let arr2 = cloneDeep(arr) // let arr2 = [...arr] arr2.b[0] = 5 console.log(arr);// {a: 2, b: Array(1)} Array a: 2 b: [33] console.log(arr2);// {a: 2, b: Array(1)} Array a: 2 b: [5] // 修改新对象不影响原来的对象

4. 类型判断 /* 实现一个类型判断 [] 返回 array {} 返回object /^$/ RegExp 1 number */ // 第一种方案 function type_of(obj) { let res = Object.prototype.toString.call(obj).split(' ')[1] // 输出 RegExp] /* res.substring(0, res.length - 1) 从第 0 项开始截取截取到它的长度 -1 也就是最后一项的前一项把最后的一项 ] 给干掉 */ return res.substring(0, res.length - 1).toLowerCase() } // 第二种方案 function type_of(obj) { // .slice(8, -1) 从第 8项开始截取 -1 不要最后一项 return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() } 5. 生成随机数 // 生成随机数 function random(min, max) { // Math.floor() 向下进行取证 return Math.floor(Math.random() * (max - min + 1) + min) } console.log(random(3, 5)) 6. 手写 indexOf function myIndexOf(a) { // 1、这个也可以正则实现下面代码 // let reg = new RegExp(a) // res = reg.exec(this) // return res === nu ll ? -1 : res.index // 这个也可以正则实现 let lena = a.length y = this.length flag = -1 if (lena > y) return -1 // 如果输入的字符串大于要检测的字符串直接 -1 for (let i = 0; i <= y - lena; i++) { if (this.substr(i, lena) === a) { // substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 flag = i break } } return flag } String.prototype.myIndexOf = myIndexOf let demo = 'dwanlghMappaw' let str = 'h' console.log(demo.myIndexOf(str)); 7. 数组排序（冒泡） function sort(arr) { // 外层循环控制的是比较的轮数，你要循环几轮 // arr.length （5 ） - 1 = 4 for (let i = 0; i < arr.length - 1; i++) { // 内层循环控制的每一轮交换的次数 // 第一轮要比较4次下标为 0 arr.length - 1（4） - i（0） = 4 // 第二轮要比较3次下标为 1 arr.length - 1（4） - i（1） = 3 // 第三轮要比较2次下标为 2 arr.length - 1（4） - i（2） = 2 // 第四轮要比较1次下标为 3 arr.length - 1（4） - i（3） = 1 // 内层循环控制的每一轮交换的次数 for (let j = 0; j < arr.length - 1 - i; j++) { // arr[j] 第一项 arr[j + 1] 第二项 // arr[j] 第二项 arr[j + 1] 第三项 // .... if (arr[j] > arr[j + 1]) { // 大于后一项做一个交换变量 es6 结构赋值的变量交换 [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] } } } return arr } console.log(sort([200, 100, 3, 9, 4])); 8. 数组最大值最小值 const array = [5, 4, 7, 8, 9, 2]; let num = array.reduce((a, b) => a > b ? a : b); console.log(num) // 9 let nums = array.reduce((a, b) => a < b ? a : b); console.log(nums) // 2 9. 数组去重 /* 数组的去重 */ const ylbsz = [1, 35, 6, 78, 66, 6, 35] function _set(arr) { // 放一个新数组 const newArr = [] for (let i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) == -1) { newArr.push(arr[i]) } } return newArr } console.log(_set(ylbsz)) console.log([...new Set([11, 11, 222, 222])]) // 字符串去重 let str = '你好你好' console.log([...new Set(str.split(''))].join('')) 10. instanceOf 手写 // instanceof // 1、只要当前类出现在实例的原型上，结果都为 true // 2、由于我们可以肆意的修改原型的指向，所以检测出来的结果是不准确的 // 3、不能检测基本数据类型 const arr = [] console.log(arr); function instance_of(example, classFunc) { // 实例.__proto__ === 类.prototype => instanceof let classFuncPrototype = classFunc.prototype // 这个就代表类的原型 proto = Object.getPrototypeOf(example) // example.__proto__ 实例的.__proto__ while (true) { // 我也不知道你要找多少次 while循环 if (proto === null) { // 找到最顶层为null就说明没找到返回 false return false } if (proto === classFuncPrototype) { return true } proto = Object.getPrototypeOf(proto) } } console.log(instance_of(arr, Array)); console.log(instance_of(arr, Object)); console.log(instance_of(arr, RegExp)); 11. 大小写转换

/* * @ 这里有一个字符串需要将它吧大写转为小写小写转为大写 * let str = 'sUnZHIhaO' */ // charCodeAt(N) 返回在指定的位置的字符的 Unicode 编码 let str = 'sUnZHIhaO' function fn(val) { return val.replace(/[a-zA-Z]/g, config => { // config 每一次正则匹配的结果 // charCodeAt a ==65 z ==90 判断是否大小写 config.charCodeAt() >= 65 && config.charCodeAt() <= 90 // 验证字母大小写：把字母转换为大写，看原来的是否是大写，如果是就转换为小写，不是还是原来 return config.toUpperCase() === config ? config.toLowerCase() : config.toUpperCase() }) console.log(val) } console.log(fn('sUnZHIhaO')) 12.实现数组扁平化 递归实现 function flatten(arr){ let result = [] for(let i=0,len=arr.length;i<len;i++){ if(Array.isArray(arr[i])){ result = result.concat(flatten(arr[i])) }else{ result.push(arr[i]) } } return result }, ES6扩展运算符 function flatten(arr){ while(arr.some(item=>Array.isArray(item))){ arr = [].concat(...arr) } return arr } 13.解析获取 URL 参数

function getParams() {

const params = {}; const search = location.search.substring(1); // 去掉问号 const pairs = search.split('&'); // 按 & 分割参数 for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); const key = decodeURIComponent(pair[0]); // 解码参数名 const value = decodeURIComponent(pair[1] || ''); // 解码参数值（如果没有值，则默认为 ""） params[key] = value; // 存储为对象属性 } return params; }

const getSearchParams = () => {

const search = new URLSearchParams(window.location.search) const paramsObj = {} for (const [key, value] of search.entries()) { paramsObj[key] = value } return paramsObj } 14.实现一个 new 操作符

function myNew(Con, ...args){ let obj = {} obj.__proto__ = Con.prototype let result = Con.call(obj, ...args) return result instanceof Object ? result : obj } let anini = myNew(Star,'anini',18) // 相当于 let anini = new Star('anini',18)

到此这篇前端开发工程师面试题目（前端开发工程师笔试题）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：前端埋点sdk（前端埋点工具）

下一篇：前端模块化的好处（前端模块化开发的认识）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/11742.html

相关文章：