前端面试题

夕雾不闻钟

已于 2023-11-28 12:17:38 修改

阅读量197

点赞数

分类专栏：有用的知识文章标签： vue.js 前端 javascript

于 2023-01-28 16:46:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36712606/article/details/128770225

版权

有用的知识专栏收录该内容

5 篇文章

订阅专栏

1.div水平垂直居中方法（4个）

1 通过设置绝对定位和设置div负边距实现；

思路：父div相对定位relative，子div设置绝对定位，且top和left50%，再设置margin-left和margin-top为div的-50%；注意：需要实现知道div的宽高。

2 通过绝对定位和translate实现；

思路：原理和上面差不多，也是先通过绝对定位将div定位到上，左各一半的位置，然后通过translate，向上或者向左移动自身一半的位置，transform：translate（-50%，-50%）；注意：需要浏览器指出translate。

3通过设置绝对定位和margin：auto来实现；

思路：父div相对定位，子div设置top，left，right，bottom为0，margin：auto自动计算上下边距

4 弹性盒子布局

思路：父div设置弹性盒子dispaly：flex；justify-content：center；align-items：center；宽高设为100%；子div设置position：absolute；

5 使用table-cell

将父级元素设置为单元格display: table-cell，然后使用vertical-align:middle;来实现子div的垂直方向的居中，然后设置子级div 的margin：auto;实现水平方向上居中。

2.清除浮动有哪些方法

原因：容器内有浮动元素，容器不能自动伸长以适应内容的高度，使得内容溢出影响布局

方法一：额外标签法（添加无意义标签，结构化较差）

<div id="parent">
    <div id="child"></div>
    <!-- 方法一  额外标签法 -->
    <div id="clear"></div>
</div>
#clear{
    clear: both;
}

方法二：父元素添加overflow：hidden；（内容增多时不会自动换行导致溢出内容被隐藏）

方法三：使用after伪元素清除浮动（ie6-7不支持伪元素after，需要使用zoom：1触发hasLayout）

#parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：使用before和after双伪元素清除浮动

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
    clear: both;
}
#parent{
    *zoom: 1;
}

方法五：为父元素设置高度

3.px em rem 之间的区别 vw vh 百分比的区别

px：pixel 像素；只要设置就是个固定值，不会随浏览器大小改变而改变；

em：css中的相对单位，相对于父元素的字体大小来定，如果你的父元素字体大小：font-size: 20px;那么子元素1em=20px; 如果父元素没有设置字体大小，那么会以浏览器默认的字体大小来定，浏览器默认字体大小是：font-size: 16px; 那么现在的1em=16px；

rem：root em的缩写，在页面中只有一个html是根元素，所以是根据html来定的，如果设置html字体大小font-size：20px，则1rem=20px。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局

vw和vh都是视口单位即view width / view height
相对单位：表示把屏幕分为了100份，1份等于1%
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。

vw就是view width,可视宽度,所以一般来说都是可是窗口的一半.

百分比的宽度,就是自己父元素宽度的一半了.

4.怎么判断一个对象是否是空对象

5.对象的深拷贝和浅拷贝怎么实现的

浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向对象的指针，新旧对象共享同一块内存；深拷贝会另外创造一个对象，新旧对象不会互相影响。

实现深拷贝：1 采用递归去拷贝所有层级属性；2 通过JSON.stringify把对象转为字符串，再用JSON.parse把字符串转成新的对象。

实现浅拷贝：1 Object.assign方法；2 for in 方法；3 concat（）方法；4 slice（）方法；

5 array.from（）方法；6 扩展运算符array.push（）；

应用场景：deepclone

深拷贝、浅拷贝及其实现方式_JV_32的博客-优快云博客_深拷贝和浅拷贝的实现

6.封装一个函数获取函数中url中参数的值

function getUrlkey(url) {

      var params = {};

          arr = url.split("?");

      if (arr.length <= 1) return params;

      arr = arr[1].split("&");

      for (var i in arr) {

        var a = arr[i].split("=");

        params[a[0]] = a[1];

      }

      return params;

    }

var url="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=123456";
    key=getUrlkey(url);
console.log(key['ie'])

location.search直接获取？后面的参数

7.封装一个函数获取字符串中字符出现最多的字符

function test(str) {
				var num = 0;
				var ivalue = '';
				var obj = {}
//				obj={
//					a:[],
//					b:[]
//				}
				for(var i = 0; i < str.length; i++) {
					if(!obj[str[i]]) {
						obj[str[i]] = [str[i]];
					}
					else{
						obj[str[i]].push(str[i])
					}
					
				}
 
				for(var attr in obj) {
					if(num < obj[attr].length) {
						num = obj[attr].length
					
					ivalue = obj[attr][0];
                                       }
                               }
 
				return "出现最多的字符是" + ivalue + ",一共出现了" + num ;
			}
			//正则方法：
			function test2(str){
				var num = 0;
				var ivalue = ''
				// 分成数组
				var arr = str.split('');
				// 相同的放一起
				arr.sort();
				// 再拼成字符串
				str = arr.join('');
				var re = /(\w)\1+/g; //正则匹配连续相同的字符
				str.replace(re,function(a,b){
					// a是整体aaa bbbb
					// b是子项a b
					if(num <a.length){
						num = a.length;
						ivalue = b;
					}
				})
				return "出现最多的字符是" + ivalue + ",一共出现了" + num ;
			}
			// alert(test("aaabbb"))
			alert(test2("aaabbbb"))

8.事件委托和事件代理

事件委托和事件代理是一回事，本质是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托的优点，如果需要对多个dom添加事件处理，会导致多次访问dom，延长页面交互时间，且每个事件处理方法都是一个对象，对象越多，占内存越大，性能越差；使用事件委托，只访问父级dom，能减少与dom的交互次数，提高性能，减少内存占用。

事件冒泡：子元素事件触发后，事件沿着包含关系，依次往上级传递，并触发父级事件，直到根元素。使用event.stopPropagation()终止事件冒泡。

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

//将ul内的li增加点击事件
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}
//事件委托
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){ //toLowerCase()方法将大写字符转成小写
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

js中的事件委托或是事件代理详解 - 凌云之翼 - 博客园