【笔试面试】笔试题汇总

阅读数: 2021-08-19

YF 2021前端面试题

注意：请在30分钟内完成，并禁止使用任何网络设备查找资料(闭卷形式)。

题目1：请用JS代码生成由数字和大小写字母组成的，长度为100的随机字符串

题目2：找出题目1的随机串中连续最长的字母串

题目3：统计题目1的随机串中每个字符出现的次数，并按数量进行降序排序

题目4：删除题目1的随机串中符合以下条件的字符：

（1）出现次数最少

（2）复数出现的：如ds33abc、ab333ab，处理之后为dsabc，abab

// 1、请用JS代码生成由数字和大小写字母组成的，长度为100的随机字符串
const str = [...new Array(100).keys()].map(item => {
    let tmp = '0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ'
    return tmp.substr(Math.random() * tmp.length, 1)
}).join('')
console.log('str：', str)




// 2、找出题目1的随机串中连续最长的字母串
const arr = str.match(/[a-zA-Z]+/g)   // split正则同理，如果不用正则也是和split方法类似，在数字的地方用 isNaN(+item) 来判断划分
let maxStr = ''
if (arr) {
    arr.forEach(item => {
        if (item.length > maxStr.length) {
            maxStr = item
        }
    })
}
console.log('maxStr：', maxStr)




// 3、统计题目1的随机串中每个字符出现的次数，并按数量进行降序排序
// 方法1：该方式利用sorted函数和正则
const sortedArr1 = str.split('').sort((a, b) => {
    return str.match(new RegExp(a, 'g')).length - str.match(new RegExp(b, 'g')).length
})
// 去重：sortedArr1 = [...new Set(sortedArr1)]
const sortedStr1 = sortedArr1.join('')
console.log('sortedStr1', sortedStr1)

// 方法2：利用sorted和辅助对象
const obj = {}  // 记录每个字符出现次数的辅助对象
for(let i in str){
    if (obj.hasOwnProperty(str[i])){
        obj[str[i]] += 1
    } else {
        obj[str[i]] = 1
    }
}
const sortedArr2 = str.split('').sort((a, b) => {
    return obj[a] - obj[b]
})
// 去重：sortedArr2 = [...new Set(sortedArr2)]
const sortedStr2 = sortedArr2.join('')
console.log('sortedStr2', sortedStr2)




// 4、删除题目1的随机串中符合以下条件的字符：
// （1）出现次数最少
// （2）复数出现的：如ds33abc、ab333ab，处理之后为dsabc，abab
let resultStr = ''
const min = Math.min.apply(null, Object.values(obj))   // 利用上面的记录每个字符出现次数的辅助对象得到最少的出现次数
const strArr = str.split('')
for(let i = strArr.length; i >= 0; i--) {
    // 删除最小出现次数的字符
    if (obj[strArr[i]] === min){
        strArr.splice(i, 1)
        continue
    }

    // 删除复数出现的字符 
    let k = 0;
    while(i > 0 && str[i] === str[i-1]) k++
    strArr.splice(i-k, k)
}
resultStr = strArr.join('')
console.log('resultStr', resultStr)

CSS预处理器有哪些？有什么优缺点？

文件上传有哪些思路？分别有什么优缺点？

O(1)时间复杂度把数组分为左边奇数，右边偶数

如何兼容html5和css3？如何判断浏览器是否支持HTML5?

纯原生手写轮播图

一筐鸡蛋，如果一次拿一个，刚好拿完，一次拿两个还剩一个，一次拿三个，也刚好拿完，一次拿四个还剩一个，一次拿五个也还剩一个，一次拿六个还剩三个，一次拿七个刚好拿完，一次拿八个还剩一个，一次拿九个刚好拿完，求这筐鸡蛋一共有多少个？

消除异步函数传染性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>消除异步传染性</title>
</head>
<body>
	<h1>消除异步传染性</h1>
	<p>根据日志可以看出来，实际上并不是真正意义上的消除异步，而是把异步变成了回调的形式，实际生产用处不大，在有打包工具的情况下还是 async await 比较方便，但是思路可以借鉴下。</p>
	<script>
		// https://www.bilibili.com/video/BV1NZ421B7JS/
		function getUser() {
			console.log('getUser')
			return fetch('https://www.ionluo.cn/cdn/tmp/FeHelper-20240719185756.json')
		}
		
		function m1() {
			const user = getUser()
			console.log('m1', user)
			return user
		}
		
		function m2() {
			const user = m1()
			console.log('m2', user)
			return user
		}
		
		function m3() {
			const user = m2()
			console.log('m3', user)
			return user
		}
		
		function main() {
			const user = m3()
			console.log('main', user)
			return user
		}
		
		function run(func) {
			console.log('running')
			// 1. 改动fetch
			const oldFetch = window.fetch
			const cache = {
				status: 'pending',
				value: null
			}
			function newFetch(...args) {
				// 有缓存返回缓存
				if (cache.status === 'fulfilled') return cache.value
				if (cache.status === 'rejected') throw cache.value
				// 没有缓存发送请求并抛出错误
				throw oldFetch(...args).then(res => res.json()).then(data => {
					cache.value = data
					cache.status = 'fulfilled'
				}).catch(err => {
					cache.value = err
					cache.status = 'rejected'
				})
			}
			window.fetch = newFetch
			// 2. 执行func
			try {
				func()
			} catch(err) {
				// 等待请求完成后重新执行 func (TODO: 有待优化，promise不一定是自带对象，也有可能是通过 Promise A+规范自建的类型就不能用这里的判断了)
				err instanceof Promise && err.finally(_ => {
					window.fetch = newFetch
					func()
					window.fetch = oldFetch
				})
			}
			// 3. 改回fetch
			window.fetch = oldFetch
		}
		run(main)
		console.log('after run')
	</script>
</body>
</html>

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/9f887373.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！