前端开发面试题-编程

Posted 2022-11-29 Leatitia

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,""); //去除前后空白符