面试体验很差,可能一开始就不大想要吧,不知道为啥要面试。
1. 实现一个 flex 的布局
//存在如下的html元素,利用flex布局实现左中右三个元素分别占据屏幕的25%、50%、25% | |
<style> | |
.box { | |
width: 80%; | |
height: 500px; | |
display: flex; | |
background-color: red; | |
} | |
.center { | |
width: 250px; | |
height: 200px; | |
background-color: brown; | |
flex: 2; | |
} | |
.left { | |
flex: 1; | |
} | |
.right { | |
flex: 1; | |
} | |
</style> | |
<div class="box"> | |
<div class="left"></div> | |
<div class="center"></div> | |
<div class="right"></div> | |
</div> |
2. 解析 URL 提取 params 参数
// 实现一个名为 urlToObj 的函数,将一个 url 中的参数转换成对象,入参为 url,返回的结果为对象。 | |
let httpUrlStr = 'https://www.whatever.com?name=zhangsan&age=18'; | |
// { "name": "zhangsan", "age": "18" } | |
function urlToObj(url){ | |
let params = url.split('?')[1]; | |
let param = params.split('&'); | |
let obj = {}; | |
for (let i = 0; i < param.length; i++) { | |
let paramA = param[i].split('='); | |
let key = paramA[0]; | |
let value = paramA[1]; | |
obj[key] = value; | |
} | |
return obj; | |
} | |
console.log(urlToObj(httpUrlStr)); |
3. 编写一个方法去掉数组里面重复的内容
// 实现一个名为 uniqueArray 的函数,去掉数组里面重复的内容 | |
// [1, 1, 2, 3, 3, 1] => [1,2,3] | |
let array = [1, 1, 2, 3, 3, 1]; | |
function uniqueArray(array){ | |
let arr = []; | |
for (let i = 0;i <array.length; i++) { | |
if (arr.indexOf(array[i]) === -1) { | |
arr.push(array[i]); | |
} | |
} | |
return arr; | |
// let res = [...new Set(array)]; | |
// return res; | |
} | |
console.log(uniqueArray(array)); |
4. 判断一个字符串中出现次数最多的字符,统计这个次数
// 找出一个字符串中出现次数最多的字符,并统计出现的次数 | |
// "ababajshbaasdaaaa" => {char:'a',count:9} | |
let str = "ababajshbaasdaaaa"; | |
function computeString(str){ | |
let obj = {}; | |
let count = 0; | |
for (let i = 0; i < str.length; i++) { | |
let char = str.charAt(i); | |
if (obj[char]) { | |
obj[char]++; | |
} else { | |
obj[char]=1 | |
} | |
} | |
let res = {}; | |
for (let key in obj ) { | |
if (obj[key] > count) { | |
count = obj[key]; | |
res = { | |
char: obj[key], | |
count : count | |
} | |
} | |
} | |
return res; | |
} | |
console.log(computeString(str)); |
5. 实现一个防抖函数
// 实现一个防抖函数(debounce)。防抖:函数在一段时间内的多次调用,仅使得最后一次调用有效。 | |
function debounce(){ | |
let time; | |
return function () { | |
let context = this; | |
let args = arguments; | |
if (time) { | |
clearTimeout(time); | |
} | |
time = setTimeout(() => { | |
func.apply(context,args); | |
},100) | |
} | |
} |