React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理，区别，亮点，作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
-
项目里用到了react，为什么要选择react，react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗？
-
React的jsx，函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西，接受几个参数
-
redux请求中间件如何处理并发
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
const cookie = { // cookie操作【set，get，del】 set: function(name, value, day) { let oDate = new Date() oDate.setDate(oDate.getDate() + (day || 30)) document.cookie = name + ‘=’ + value + ‘;expires=’ + oDate + “; path=/;” }, get: function(name) { let str = document.cookie let arr = str.split(‘; ‘) for (let i = 0; i < arr.length; i++) { let newArr = arr[i].split(’=’) if (newArr[0] === name) { return newArr[1] } } }, del: function(name) { this.set(name, ‘’, -1) }}
05、Js获取元素样式【支持内联】
const getRealStyle = function(obj, styleName) { // Js获取元素样式【支持内联】var realStyle = null if (obj.currentStyle) { realStyle = obj.currentStyle[styleName] } else if (window.getComputedStyle) { realStyle = window.getComputedStyle(obj, null)[styleName] } return realStyle}
06、时间格式化
const formatDate = function(fmt, date) { // 时间格式化 【‘yyyy-MM-dd hh:mm:ss’,时间】 if (typeof date !== ‘object’) { date = !date ? new Date() : new Date(date) }var o = { ‘M+’: date.getMonth() + 1, // 月份 ‘d+’: date.getDate(), // 日 ‘h+’: date.getHours(), // 小时 ‘m+’: date.getMinutes(), // 分 ‘s+’: date.getSeconds(), // 秒 ‘q+’: Math.floor((date.getMonth() + 3) / 3), // 季度 ‘S’: date.getMilliseconds() // 毫秒 } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ‘’).substr(4 - RegExp.$1.length)) } for (var k in o) { if (new RegExp(‘(’ + k + ‘)’).test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((‘00’ + o[k]).substr((‘’ + o[k]).length))) } } return fmt}
07、原生ajax操作
const ajax = function(conf) { // ajax操作 let url = conf.url, data = conf.data, senData = [], // 封装后的数据 async = conf.async !== undefined ? conf.async : true, // ture为异步请求 type = conf.type || ‘get’, // 默认请求方式get dataType = conf.dataType || ‘json’, contenType = conf.contenType || ‘application/x-www-form-urlencoded’, success = conf.success, error = conf.error, isForm = conf.isForm || false, // 是否formdata header = conf.header || {}, // 头部信息 xhr = ‘’ // 创建ajax引擎对象 if (data == null) { senData = ‘’ } else if (typeof data === ‘object’ && !isForm) { // 如果data是对象，转换为字符串 for (var k in data) { senData.push(encodeURIComponent(k) + ‘=’ + encodeURIComponent(data[k])) } senData = senData.join(‘&’) } else { senData = data } try { xhr = new ActiveXObject(‘microsoft.xmlhttp’) // IE内核系列浏览器 } catch (e1) { try { xhr = new XMLHttpRequest() // 非IE内核浏览器 } catch (e2) { if (error != null) { error(‘不支持ajax请求’) } } }; xhr.open(type, type !== ‘get’ ? url : url + ‘?’ + senData, async) if (type !== ‘get’ && !isForm) { xhr.setRequestHeader(‘content-type’, contenType) } for (var h in header) { xhr.setRequestHeader(h, header[h]) } xhr.send(type !== ‘get’ ? senData : null) xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { if (dataType === ‘json’ && success != null) { let res = ‘’ try { res = eval(‘(’ + xhr.responseText + ‘)’) } catch (e) { console.log(e) } success(res) // 将json字符串转换为js对象 }; } else { if (error != null) { error(‘通讯失败!’ + xhr.status) } } } }}
08、fetch请求的封装
const fetch = function(url, setting) { // fetch请求的封装 let opts = { // 设置参数的初始值 method: (setting.method || ‘GET’).toUpperCase(), // 请求方式 headers: setting.headers || {}, // 请求头设置 credentials: setting.credentials || true, // 设置cookie是否一起发送 body: setting.body || {}, mode: setting.mode || ‘no-cors’, // 可以设置 cors, no-cors, same-origin redirect: setting.redirect || ‘follow’, // follow, error, manual cache: setting.cache || ‘default’ // 设置 cache 模式 (default, reload, no-cache) } let dataType = setting.dataType || ‘json’ // 解析方式 let data = setting.data || ‘’ // 参数 let paramsFormat = function(obj) { // 参数格式 var str = ‘’ for (var i in obj) { str += ${i}=${obj[i]}& } return str.split(‘’).slice(0, -1).join(‘’) }
if (opts.method === ‘GET’) { url = url + (data ? ?${paramsFormat(data)} : ‘’) } else { setting.body = data || {} } return new Promise((resolve, reject) => { fetch(url, opts).then(async res => { let data = dataType === ‘text’ ? await res.text() : dataType === ‘blob’ ? await res.blob() : await res.json() resolve(data) }).catch(e => { reject(e) }) })}
09、设备判断：android、ios、web
const isDevice = function() { // 判断是android还是ios还是web var ua = navigator.userAgent.toLowerCase() if (ua.match(/iPhone\sOS/i) === ‘iphone os’ || ua.match(/iPad/i) === ‘ipad’) { // ios return ‘iOS’ } if (ua.match(/Android/i) === ‘android’) { return ‘Android’ } return ‘Web’}
10、判断是否为微信
const isWx = function() { // 判断是否为微信 var ua = window.navigator.userAgent.toLowerCase() if (ua.match(/MicroMessenger/i) === ‘micromessenger’) { return true } return false}
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 /1[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}) / . t e s t ( s t r ) c a s e ′ n u m b e r ′ : / / 数字 r e t u r n / [ 0 − 9 ] /.test(str) case 'number': // 数字 return /^[0-9] /.test(str)case′number′://数字return/[0−9]/.test(str) case ‘english’: // 英文 return /2+ / . t e s t ( s t r ) c a s e ′ c h i n e s e ′ : / / 中文 r e t u r n / [ 4 ˘ E 00 − 9 ˘ F A 5 ] + /.test(str) case 'chinese': // 中文 return /^[\u4E00-\u9FA5]+ /.test(str)case′chinese′://中文return/[4˘E00−9˘FA5]+/.test(str) case ‘lower’: // 小写 return /3+ / . t e s t ( s t r ) c a s e ′ u p p e r ′ : / / 大写 r e t u r n / [ A − Z ] + /.test(str) case 'upper': // 大写 return /^[A-Z]+ /.test(str)case′upper′://大写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() } } }}
最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
