前端开发面试题-编程

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