2024年Web前端最全33个前端常用的JavaScript函数封装方法(2)，2024年最新阿里高级前端面试

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

11、文本复制功能

const copyTxt = function(text, fn) { // 复制功能 if (typeof document.execCommand !== ‘function’) { console.log(‘复制失败，请长按复制’) return } var dom = document.createElement(‘textarea’) dom.value = text dom.setAttribute(‘style’, ‘display: block;width: 1px;height: 1px;’) document.body.appendChild(dom) dom.select() var result = document.execCommand(‘copy’) document.body.removeChild(dom) if (result) { console.log(‘复制成功’) typeof fn === ‘function’ && fn() return } if (typeof document.createRange !== ‘function’) { console.log(‘复制失败，请长按复制’) return } var range = document.createRange() var div = document.createElement(‘div’) div.innerhtml = text div.setAttribute(‘style’, ‘height: 1px;fontSize: 1px;overflow: hidden;’) document.body.appendChild(div) range.selectNode(div) var selection = window.getSelection() console.log(selection) if (selection.rangeCount > 0) { selection.removeAllRanges() } selection.addRange(range) document.execCommand(‘copy’) typeof fn === ‘function’ && fn() console.log(‘复制成功’)}

12、判断是否是一个数组

const isArray = function(arr) { // 判断是否是一个数组 return Object.prototype.toString.call(arr) === ‘[object Array]’}

13、判断两个数组是否相等

const arrayEqual = function(arr1, arr2) { //判断两个数组是否相等 if (arr1 === arr2) return true; if (arr1.length != arr2.length) return false; for (let i = 0; i < arr1.length; ++i) { if (arr1[i] !== arr2[i]) return false; } return true;}

14、时间与时间转换

const stamp = { // 时间，时间戳转换 getTime: function(time) { // 时间转10位时间戳 let date = time ? new Date(time) : new Date() return Math.round(date.getTime() / 1000) }, timeToStr: function(time, fmt) { // 10位时间戳转时间 return new Date(time * 1000).pattern(fmt || ‘yyyy-MM-dd’) }}

15、常用正则验证

const checkStr = function(str, type) { // 常用正则验证，注意type大小写 switch (type) { case ‘phone’: // 手机号码 return /^1[3|4|5|6|7|8|9][0-9]{9}KaTeX parse error: Undefined control sequence: \d at position 50: … return /^(0\̲d̲{2,3}-\d{7,8})(…/.test(str) case ‘card’: // 身份证 return /(^{\d{15}$)|(^\d{18}$)|(}\d{17}(\d|X|x)KaTeX parse error: Undefined control sequence: \w at position 86: …turn /^[a-zA-Z]\̲w̲{5,17}/.test(str) case ‘postal’: // 邮政编码 return /[1-9]\d{5}(?!\d)/.test(str) case ‘QQ’: // QQ号 return /¹[0-9]{4,9}KaTeX parse error: Undefined control sequence: \w at position 51: … return /^[\̲w̲-]+(\.[\w-]+)*@…/.test(str) case ‘money’: // 金额(小数点2位) return /^\d*(?:.\d{0,2})?KaTeX parse error: Undefined control sequence: \/ at position 64: …ttp|ftp|https):\̲/̲\/[\w\-_]+(\.[\…/.test(str) || /^(\d{4})-(\d{2})-(\d{2})$/.test(str)cas{e}^{\prime }numbe{r}^{\prime }://数字return{/}^{[}0-9]$/.test(str) case ‘english’: // 英文 return /²+$/.test(str)cas{e}^{\prime }chines{e}^{\prime }://中文return{/}^{[}\breve{4}E00-\breve{9}FA5]+$/.test(str) case ‘lower’: // 小写 return /³+$/.test(str)cas{e}^{\prime }uppe{r}^{\prime }://大写return{/}^{[}A-Z]+$/.test(str) case ‘HTML’: // HTML标记 return /<("[^“]*”|'[']‘|[^’">])>/.test(str) default: return true }}

16、是否为PC端

const isPC = function() { // 是否为PC端 let userAgentInfo = navigator.userAgent let Agents = [‘Android’, ‘iPhone’, ‘SymbianOS’, ‘Windows Phone’, ‘iPad’, ‘iPod’] let flag = true for (let v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false break } } return flag}

17、去除空格

const trim = function(str, type) { // 去除空格， type: 1-所有空格 2-前后空格 3-前空格 4-后空格 type = type || 1 switch (type) { case 1: return str.replace(/\s+/g, ‘’) case 2: return str.replace(/(^\s*)|(\s*KaTeX parse error: Undefined control sequence: \s at position 48: …str.replace(/(^\̲s̲*)/g, '') ca…)/g, ‘’) default: return str }}

18、字符串大小写转换

const changeCase = function(str, type) { // 字符串大小写转换 type: 1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写 type = type || 4 switch (type) { case 1: return str.replace(/\b\w+\b/g, function(word) { return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase() }) case 2: return str.replace(/\b\w+\b/g, function(word) { return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase() }) case 3: return str.split(‘’).map(function(word) { if (/[a-z]/.test(word)) { return word.toUpperCase() } else { return word.toLowerCase() } }).join(‘’) case 4: return str.toUpperCase() case 5: return str.toLowerCase() default: return str }}

19、html过滤****代码

const filterTag = function(str) { // 过滤html代码(把<>转换) str = str.replace(/&/ig, ‘&’) str = str.replace(/</ig, ‘<’) str = str.replace(/>/ig, ‘>’) str = str.replace(’ ', ’ ') return str}

20、生成随机数范围

const random = function(min, max) { // 生成随机数范围 if (arguments.length === 2) { return Math.floor(min + Math.random() * ((max + 1) - min)) } else { return null }}

21、阿拉伯数字转中文大写数字

const numberToChinese = function(num) { // 将阿拉伯数字翻译成中文的大写数字 let AA = new Array(‘零’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’, ‘八’, ‘九’, ‘十’) let BB = new Array(‘’, ‘十’, ‘百’, ‘仟’, ‘萬’, ‘億’, ‘点’, ‘’) let a = (‘’ + num).replace(/(^0*)/g, ‘’).split(‘.’) let k = 0 let re = ‘’ for (let i = a[0].length - 1; i >= 0; i–) { switch (k) { case 0: re = BB[7] + re break case 4: if (!new RegExp(‘0{4}//d{’ + (a[0].length - i - 1) + ‘}$’).test(a[0])) { re = BB[4] + re } break case 8: re = BB[5] + re BB[7] = BB[5] k = 0 break } if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) { re = AA[0] + re } if (a[0].charAt(i) !== 0) { re = AA[a[0].charAt(i)] + BB[k % 4] + re } k++ } if (a.length > 1) { // 加上小数部分(如果有小数部分) re += BB[6] for (let i = 0; i < a[1].length; i++) { re += AA[a[1].charAt(i)] } } if (re === ‘一十’) { re = ‘十’ } if (re.match(/^一/) && re.length === 3) { re = re.replace(‘一’, ‘’) } return re}

22、原生世界操作

const dom = {

$: function(selector) {

let type = selector.substring(0, 1)

if (type === ‘#’) {

if (document.querySelecotor) return document.querySelector(selector)

return document.getElementById(selector.substring(1))

} else if (type === ‘.’) {

if (document.querySelecotorAll) return document.querySelectorAll(selector)

return document.getElementsByClassName(selector.substring(1))

} else {

return document’querySelectorAll’ ? ‘querySelectorAll’ : ‘getElementsByTagName’

}

},

hasClass: function(ele, name) { /* 检测类名 */

return ele.className.match(new RegExp(‘(\s|^)’ + name + ‘(\s|$)’))

},

addClass: function(ele, name) { /* 添加类名 */

if (!this.hasClass(ele, name)) ele.className += ’ ’ + name

},

removeClass: function(ele, name) { /* 删除类名 */

if (this.hasClass(ele, name)) {

let reg = new RegExp(‘(\s|^)’ + name + ‘(\s|$)’)

ele.className = ele.className.replace(reg, ‘’)

}

},

replaceClass: function(ele, newName, oldName) { /* 替换类名 */

this.removeClass(ele, oldName)

this.addClass(ele, newName)

},

siblings: function(ele) { /* 获取兄弟节点 */

console.log(ele.parentNode)

let chid = ele.parentNode.children,

eleMatch = []

for (let i = 0, len = chid.length; i < len; i++) {

if (chid[i] !== ele) {

eleMatch.push(chid[i])

}

}

return eleMatch

},

getByStyle: function(obj, name) { /* 获取行间样式属性 */

if (obj.currentStyle) {

return obj.currentStyle[name]

} else {

return getComputedStyle(obj, false)[name]

}

},

domToStirng: function(htmlDOM) { /* DOM转字符串 */

var div = document.createElement(‘div’)

div.appendChild(htmlDOM)

return div.innerHTML

},

stringToDom: function(htmlString) { /* 字符串转DOM */

var div = document.createElement(‘div’)

div.innerHTML = htmlString

return div.children[0]

}

}

23、判断图片加载完成

const imgLoadAll = function(arr, callback) { // 图片加载 let arrImg = [] for (let i = 0; i < arr.length; i++) { let img = new Image() img.src = arr[i] img.onload = function() { arrImg.push(this) if (arrImg.length == arr.length) { callback && callback() } } }}

24、广播加载完成操作

const loadAudio = function(src, callback) { // 音频加载 var audio = new Audio(src) audio.onloadedmetadata = callback audio.src = src}

25、不同位置字符字符

const insertAtCursor = function(dom, val) { // 光标所在位置插入字符 if (document.selection) { dom.focus() let sel = document.selection.createRange() sel.text = val sel.select() } else if (dom.selectionStart || dom.selectionStart == ‘0’) { let startPos = dom.selectionStart let endPos = dom.selectionEnd let restoreTop = dom.scrollTop dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length) if (restoreTop > 0) { dom.scrollTop = restoreTop } dom.focus() dom.selectionStart = startPos + val.length dom.selectionEnd = startPos + val.length } else { dom.value += val dom.focus() }}

26、图片地址转base64

const getBase64 = function(img) { //传入图片路径，返回base64，使用getBase64(url).then(function(base64){},function(err){}); let getBase64Image = function(img, width, height) { //width、height调用时传入具体像素值，控制大小,不传则默认图像大小 let canvas = document.createElement(“canvas”); canvas.width = width ? width : img.width; canvas.height = height ? height : img.height; let ctx = canvas.getContext(“2d”); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); let dataURL = canvas.toDataURL(); return dataURL; } let image = new Image(); image.crossOrigin = ‘’; image.src = img; let deferred = $.Deferred(); if (img) { image.onload = function() { deferred.resolve(getBase64Image(image)); } return deferred.promise(); }}

27、base64图片下载功能

const downloadFile = function(base64, fileName) { //base64图片下载功能 let base64ToBlob = function(code) { let parts = code.split(‘;base64,’); let contentType = parts[0].split(‘:’)[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }; let aLink = document.createElement(‘a’); let blob = base64ToBlob(base64); //new Blob([content]); let evt = document.createEvent(“HTMLEvents”); evt.initEvent(“click”, true, true); //initEvent不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click();}

28、浏览器是否支持webP格式图片

const isSupportWebP = function() { //判断浏览器是否支持webP格式图片 return !![].map && document.createElement(‘canvas’).toDataURL(‘image/webp’).indexOf(‘data:image/webp’) == 0;}

29、url参数转对象

const parseQueryString = function(url) { //url参数转对象 url = !url ? window.location.href : url; if (url.indexOf(‘?’) === -1) { return {}; } let search = url[0] === ‘?’ ? url.substr(1) : url.substring(url.lastIndexOf(‘?’) + 1); if (search === ‘’) { return {}; } search = search.split(‘&’); let query = {}; for (let i = 0; i < search.length; i++) { let pair = search[i].split(‘=’); query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ‘’); } return query;}

30、对象序列化【对象转url参数】

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

n query;}

30、对象序列化【对象转url参数】

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-WioC6PGd-1715364103252)]
[外链图片转存中…(img-RmRlj72d-1715364103253)]

---

1. 1-9 ↩︎

2. a-zA-Z ↩︎

3. a-z ↩︎