前言前面33篇我们搭建了完整项目、吃透原理、优化性能、掌握工程化。本篇作为面试手撕专项补强篇汇总前端最高频、最容易挂、必考10道手写真题。全部适配零基础、代码极简、注释清晰、面试可直接默写全部可以写进简历技能亮点。一、数组去重ES5ES6双写法ES6最简写法面试首选function uniqueArr(arr) { return [...new Set(arr)]; }ES5兼容写法面试官追问必答function uniqueArr(arr) { var res []; for(var i 0; i arr.length; i){ if(res.indexOf(arr[i]) -1){ res.push(arr[i]) } } return res; }二、数组扁平化多维数组转一维function flatArr(arr) { return arr.toString().split(,).map(Number) } // 递归完整版高分答案 function flatDeep(arr){ let res [] arr.forEach(item { if(Array.isArray(item)){ res res.concat(flatDeep(item)) }else{ res.push(item) } }) return res }三、字符串反转function reverseStr(str){ return str.split().reverse().join() }四、统计字符串出现最多字符function getMaxStr(str){ let obj {} let maxNum 0 let maxChar for(let char of str){ obj[char] obj[char] ? obj[char] 1 : 1 if(obj[char] maxNum){ maxNum obj[char] maxChar char } } return {maxChar,maxNum} }五、遍历对象键值对获取function getObjKeyValue(obj){ let keys Object.keys(obj) let values Object.values(obj) return {keys,values} }六、简单深拷贝面试基础版function deepClone(obj){ // 基础类型直接返回 if(typeof obj ! object || obj null){ return obj } // 区分数组和对象 let res Array.isArray(obj) ? [] : {} for(let key in obj){ if(obj.hasOwnProperty(key)){ res[key] deepClone(obj[key]) } } return res }七、判断数据类型万能精准判断function getType(val){ return Object.prototype.toString.call(val).slice(8,-1) }可精准区分数组、对象、正则、日期、null、undefined八、循环绑定定时器经典题型闭包考点// 利用let块级作用域解决 for(let i 0; i 3; i){ setTimeout(() { console.log(i) },1000) }面试官核心考点var无块级作用域、let产生块级作用域、闭包变量捕获九、过滤数组对象指定字段function filterArrField(arr, key){ return arr.map(item item[key]) }十、手机号、邮箱简单脱敏格式化// 手机号脱敏 function hidePhone(phone){ return phone.slice(0,3) **** phone.slice(7) }十一、面试简答题配套标准答案附赠1. 深拷贝和浅拷贝区别浅拷贝只复制一层引用类型共用地址修改会互相影响深拷贝递归复制所有层级完全独立互不影响。2. Set数据结构作用自动去重、存储唯一值适合数组去重、存储不重复列表。3. forEach和map区别forEach无返回值单纯遍历map返回新数组适合数据加工映射。本篇结语本篇收录的10道真题是90%初级前端面试必考手写题。全部代码简洁、规范、工程化不仅能应付面试还能直接放进项目工具库提升代码规范度。到这里你的技术栈项目实战 原理底层 性能优化 工程化 面试手撕 高频问答完全闭环。
