前端面试题整理一

题一. typeof 和 instanceof 的区别

首先，我们来看代码的区别，就能悟出一二了。

var str = new String();

console.log(str instanceof String); //输出：true

console.log(typeof str);//输出：object

分析：

1.两者的输出结果的类型不同。instanceof的返回值是布尔类型，不是true就是false；typeof的返回值是一个字符串 来检测变量的数据类型，返回值有可能是（string/object/number/boolean/function/undefind）。

2.他们的语法不同：

object instanceof constructor: instanceof 运算符用于检测constructor.prototype是否存在于参数object的原型链上。

typeof object直接检测变量的数据类型

题二.如何最快的找出数组中的最大值和最小值

方法一：

var arr = [1,32,5,65,75,12,442];
function sortNum(a,b){
return a-b;
}
console.log(arr.sort(sortNum));//[1,5,12,32,65,75,442]
var newArr = arr.sort(sortNum);
var len = newArr.length;
console.log(newArr[0]);//最小值
console.log(newArr[len-1]);//最小值

方法二：

var  arr = [1,32,5,65,75,12,442];
Array.prototype.min = function(){
var min = this[0];
var len = this.length;
for(var i=1;i<len;i++){
if(this[i]<min){
min=this[i];
}
}
return min;
}
console.log(arr.min());//1
Array.prototype.max = function(){
var max = this[0];
var len = this.length;
for(var i=1;i<len;i++){
if(this[i]>max){
max=this[i];
}
}
return max;
}
console.log(arr.max());//442

题三.如何去除数组中重复的元素

方法一：

Array.prototype.unique=function(){
 //集中声明变量
 var
 oldArr=this,
 newArr=[oldArr[0]],
 len=oldArr.length,
 i=1;
  //过滤空数组
  // if(!len) return this;
  //过滤重复元素
  for(i;i<len;i++){
  newArr.indexOf(oldArr[i])==-1 ? newArr.push(oldArr[i]) : '';
  }
  //返回过滤后的数组没有影响原数组
  return newArr;
}
var arr=['a','a','b','a','c','d'];
console.log(arr.unique());//['a','b','c','d']

方法二：

var arr=['a','a','b','a','c','d'];
function unique(arr){
var newArr = [];
//遍历arr，把不相同的元素放入newArr里
for(var i in arr){
if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(arr));//["a", "b", "c", "d"]

总结：

从题二和题三，可以发现给prototype添加属性或者方法，有利于不同的实例化对象多次调用该属性和方法。

例如：var arr_a = new Array();   var arr_b = new Array();   Array.prototype.do = function(){alert('ok')}   arr_a.do(); 和 arr_b.do()都会弹出ok。只要你是数组，你就有权利调用封装的函数do。很方便，也能很大程度上的优化代码。

题四. 不规则瀑布流

css样式如下：

<style>
*{margin: 0;padding: 0;}
ul{list-style:none;}
ul li{width:300px;border:1px solid #CCC;padding:10px;position:absolute;transition:all 0.4s;}
ul li h3{text-align:center;color:green;line-height:40px;}
ul li img{width:300px;}
</style>

body部分如下：

<ul>
<li><img src="images/1.jpg" alt=""><h3>1</h3></li>
<li><img src="images/2.jpg" alt=""><h3>2</h3></li>
<li><img src="images/3.jpg" alt=""><h3>3</h3></li>
<li><img src="images/4.jpg" alt=""><h3>4</h3></li>
<li><img src="images/5.jpg" alt=""><h3>5</h3></li>
<li><img src="images/6.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/7.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/8.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/9.jpg" alt=""><h3>9527</h3></li>
<li><img src="images/10.jpg" alt=""><h3>9527</h3></li>
</ul>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script>
function run(){
// 获取所有的 li
var liObj = $('li');
// 默认的 margin 容器的边距
var margin = 10;
// 每一个 li 标签 要占的宽度。
var liWidth = liObj[0].offsetWidth+margin;
// 一排可以显示 li 的 数量。
var num =   parseInt(document.documentElement.offsetWidth/liWidth);
// 定义一个空数组 来 装每个  li 的 高度。
var liH = [];
for(var i=0;i<liObj.length;i++){
if(i<num){
// 第一排的 li
liObj.eq(i).css({top:'0',left:i*liWidth})
liH[i] = liObj[i].offsetHeight;
}else{
// 谁的高度最小。
var minH = Math.min.apply(null,liH);
// 最小高度的位置。
var minKey = getKey(liH,minH);

// 摆放 非 第一排的 li
liObj.eq(i).css({top:minH+margin,left:minKey*liWidth});

// 更新 上以次 存 高度的数组。
liH[minKey] += liObj[i].offsetHeight+margin;
}
// 给每一个 h3 添加编号。
$('h3').eq(i).html('编号：'+i);
}
}
// 等待 所有的 dom 加载完成
// 因为 我们要等图片加载完成，才能获取图片的大小
window.onload = function(){
run();
}

// 通过数组的 value  获取  key
function getKey(obj,value){
for(var i=0;i<obj.length;i++){
if(value==obj[i]){return i}
}
}
// alert(liObj);

// 浏览器大小 改变时 就会 执行这个函数。
window.onresize = function(){
run();
}
</script>