前端常见面试题

最新推荐文章于 2023-02-08 22:55:37 发布

混名汪小星

最新推荐文章于 2023-02-08 22:55:37 发布

阅读量140

点赞数

分类专栏： JavaScript 面试题

本文链接：https://blog.csdn.net/qq_28835447/article/details/90679465

版权

JavaScript 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

面试题

1 篇文章 0 订阅

订阅专栏

1，将数组去重
思路1：遍历去重

var arr=new Array(8)                 
for(var n=0;n<arr.length;n++){
arr[n]=Number(prompt('请输入第'+(n+1)+'个数'))														
}
console.log(arr)   	
	     
for(var n=0,rute=[];n<arr.length;n++){   
	for(var j=0;j<rute.length;j++){       
    	if(arr[n]==rute[j]){ 
			break;
				}
			}				
	if(j==rute.length){ 
	rute[rute.length]=arr[n] 
			}
		}
		console.log(rute)             
	}

思路2：数组下标判断法去重

function unique3(array){
var n = [array[0]]; 
   for(var i = 1; i < array.length; i++){    
     if(array.indexOf(array[i]) == i){
       n.push(array[i]);
   }
}
 return n;
}

2.请用冒泡算法排序

function maopao(){
			var arr=new Array(8) ；
			for(var n=0;n<arr.length;n++){
				arr[n]=Number(prompt('请输入第'+(n+1)+'个数'))		 			
			}
			console.log(arr) ；    
			    
 for(var r=1;r<arr.length;r++){  
   for(var i=0;i<arr.length-r;i++){                  
		     		if(arr[i]>arr[i+1]){                         
		     		var temp;                                
		     		temp=arr[i];         
		     		arr[i]=arr[i+1];
		     		arr[i+1]=temp;			     		
		     		}			     			     		
		     	}
		     }	console.log(arr)；	
		 }

3，介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

4，如何水平垂直居中div？（至少给出2种解决方法）
4-1.浏览器居中

<style>
 #father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
  }

 #son {
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px ;
margin-top: -50px;
 }
</style> 


#son {
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
    </style> 
 <div id="father">
<div id="son">我是块级元素</div>
 </div>

4-2，弹性盒子设置DIV中元素垂直居中

<style>		
#father {
   width:400px;
height:400px;
background-color:skyblue;				
display:flex;/*将其定义为弹性容器*/
align-items: center;/*垂直居中对齐*/
justify-content: center;/*水平居中对齐*/        
   }
 </style>
     <span id="father">
<span id="son">我是行内元素</span>

4-3，div内行内元素垂直居中

 <style>
#father {
    width: 500px;
    height: 300px;
    background-color: skyblue;
    display: table-cell;
    vertical-align:middle;
}

#son {
    background-color: green;
}
 </style>

<div id="father">
<span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素
我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
 </div>

5，浏览器的内核分别是什么？

5-1.Trident内核：代表作品是IE

5-2.Gecko内核：代表作品Firefox

5-3.Webkit内核：代表作品是Safari

5-4.prosto内核：Opera

5-5.Blink内核：chrome

6，正则表达式
6- 1、写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {
if (str && typeof str === “string”) {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
6- 2、使用正则表达式验证邮箱格式

var reg = /^(\w)+(\\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";

7,三列布局（左右固定；中间自适应）
7-1浮动

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
    float: left;
    height: 200px;
    width: 100px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background-color: green;
}
</style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
 </body>
 </html>

7-2定位

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
	.container {
	    position: relative;
	}
	.main {
	    height: 400px;
	    margin: 0 120px;
	    background-color: green;
}
.left {
    position: absolute;
    width: 100px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: red;
}
.right {
    position: absolute;
    width: 100px;
    height: 300px;
    background-color: blue;
        right: 0;
    top: 0;
}
</style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
    </div>
</body>
</html>

8，清楚浮动的方法？(多次出现在面试题)

1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
3，父级div定义伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

9，看下列代码，将会输出什么?
var foo = 1;
function f(){
console.log(foo);
var foo = 2;
console.log(foo);
}
f();
答案：输出undefined 和 2

10，“this”关键字的原理是什么？请提供一些代码示例。
在 JavaScript 中，this 是指正在执行的函数的“所有者”，或者更确切地说，指将当前函数作为方法的对象。

 function foo() {
 console.log( this.bar );
}
var bar = "global";
var obj1 = {
 bar: "obj1",
 foo: foo
};
var obj2 = {
 bar: "obj2"
};
foo(); // "global"
obj1.foo(); // "obj1"
foo.call( obj2 ); // "obj2"
new foo(); // undefined

混名汪小星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见面试题

1，将数组去重思路1：遍历去重var arr=new Array(8) for(var n=0;n<arr.length;n++){arr[n]=Number(prompt('请输入第'+(n+1)+'个数')) }console.log(arr) for(var n=0,rute=[];n<a...
复制链接

扫一扫

专栏目录