前端开发面试题-编程
Posted Leatitia
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发面试题-编程相关的知识,希望对你有一定的参考价值。
1、水平垂直居中实现
- 已知宽高:
/*(1)absolute+负margin*/
div
position:ablsolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
z-index:10;
/*(2)absolute+auto*/
div
margin: auto;
position: absolute;
width:200px;
height:200px;
top: 0;
left: 0;
bottom: 0;
right: 0;
- 未知宽高
/*(1)absolute+transform*/
div
position:absolute;
top:50%;
left:50%;
tansform:translate(-50%,-50%);
/*(1)absolute+transform*/
div
display:flex;
align-items:center;
justify-content:center;
2、左右固定200px,中间div自适应宽度占满全屏,要求先加载中间块。
.left,.right
width:200px;
height:200px;
position:absolute;
.left
left:0px;
.right
right:0px;
.canter
margin:0 200x;
height:200px;
.left,.right
width:200px;
height:200px;
.left
float:left;
.right
float:right;
.canter
margin:0 200x;
3、判断一个字符串中出现次数最多的字符出现的次数
const str = "ssdgjjlajsladaaaaaasdssssaa";
var json = ;
for(let i=0;i<str.length;i++)
if(json[str.chartAt(i))
json[str.chartAt(i)] = 1;
else
json[str.chartAt(i)]+=1;
var iMax = 0;
var index = "";
for(let i in json)
if(json[i]>iMax)
iMax = json[i];
index = i;
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
4、拼接两个数组,并且按照从小到大排序;
let a = [2,5,3,7,9,1,2];
let b = [12,5,23,11,12,10,21];
let c = [...a,...b];
let d = c.sort((a,b)=>return a-b);
console.log(d) //[1, 2, 2, 3, 5, 5, 7, 9, 10, 11, 12, 12, 21, 23]
5、写个防抖和节流的函数
//防抖 (事件触发并经过一段时间间隔后执行事件处理函数,如果在这段时间内事件又被触发了,那么将重新计时。)
function debounce(callback, delay, isImmediate)
let timerID = null;
let result = undefined;
return (...args) =>
if (timerID)
clearTimeout(timerID);
if (isImmediate && !timerID)
callback.apply(this, args);
timerID = setTimeout(() =>
result = callback.apply(this, args);
, delay);
return result;
;
//节流 (事件触发并经过一段时间间隔后执行一次事件处理函数。也就是说不管你触发了多少次事件,在这段事件就只能触发一次。)
function throttle(callback, delay)
let previousTime = 0;
return (...args) =>
let currentTime = Date.now();
if (currentTime - previousTime >= delay)
previousTime = currentTime;
callback.apply(this, args);
;
6、实现一个 Promise.all
Promise.all = function (promises)
let results = new Array();
return new Promise(async function (resolve, reject)
promises.forEach(promise =>
promise.then(res =>
results.push(res);
if (results.length === promises.length)
resolve(results);
);
);
);
7、实现一个数组转树形结构的函数
const convert = (list) =>
const map = list.reduce((res,v)=>
res[v.id] = v;
return res;
,)
const res = [];
for(let item of list)
if(item.parentId === 0)
res.push(item);
continue;
if(item.parentId in map)
const parent = map[item.parentId];
parent.children = parent.children || [];
parent.children.push(item);
return res;
8、实现一个深拷贝
function deepClone(arr)
var obj=arr.constructor==Array?[]:;
//第二种方法 var obj=arr instanceof Array?[]:
//第三种方法 var obj=Array.isArray(arr)?[]:
for(var item in arr)
if(typeof arr[item]==="object")
obj[item]=deepClone(arr[item]);
else
obj[item]=arr[item];
return obj;
9、js实现Promise请求
function ajax()
var ajaxData =
type:arguments[0].type || "GET",
url:arguments[0].url || "",
async:arguments[0].async || "true",
data:arguments[0].data || null,
dataType:arguments[0].dataType || "text",
contentType:arguments[0].contentType || "application/x-www-form-urlencoded",
beforeSend:arguments[0].beforeSend || function(),
success:arguments[0].success || function(),
error:arguments[0].error || function()
ajaxData.beforeSend()
var xhr = createxmlHttpRequest();
xhr.responseType=ajaxData.dataType;
xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
xhr.setRequestHeader("Content-Type",ajaxData.contentType);
xhr.send(convertData(ajaxData.data));
xhr.onreadystatechange = function()
if (xhr.readyState == 4)
if(xhr.status == 200)
ajaxData.success(xhr.response)
else
ajaxData.error()
function createxmlHttpRequest()
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
function convertData(data)
if( typeof data === 'object' )
var convertResult = "" ;
for(var c in data)
convertResult+= c + "=" + data[c] + "&";
convertResult=convertResult.substring(0,convertResult.length-1)
return convertResult;
else
return data;
10、求数组里面最大连续项的和
function maxSum2(arr = [])
let dp = [];
for (let i = 0; i < arr.length; i++)
if (dp[i - 1] > 0)
dp[i] = dp[i - 1] + arr[i];
else
dp[i] = arr[i];
return Math.max(...dp)
11、写一个function,清除字符串前后的空格。(兼容所有浏览器)
function trim(str)
if (str && typeof str === "string")
return str.replace(/(^\\s*)|(\\s*)$/g,""); //去除前后空白符
以上是关于前端开发面试题-编程的主要内容,如果未能解决你的问题,请参考以下文章