整理的前端面试题3

1.    JavaScript实现DOM树的遍历

function traversal(node){  

   if(node && node.nodeType ===1){  //对node的处理

     console.log(node.tagName);

   }

   var i = 0, childNodes =node.childNodes,item;

   for(; i < childNodes.length ; i++){

     item = childNodes[i];

     if(item.nodeType === 1){      

       traversal(item);  //递归先序遍历子节点

     }

   }   }

functiontraverseNodes(node){   

         if(node.nodeType == 1){  //判断是否是元素节点 

           display(node);                

           for(var i=0;i<node.attributes.length;i++){  //判断是否有属性节点                

                var attr =node.attributes.item(i);  //得到属性节点                 

                  if(attr.specified){  //判断该节点是否存在

                       display(attr); //如果存在显示输出

                } 

           }                

              if(node.hasChildNodes){  //判断该元素节点是否有子节点

                 var sonnodes = node.childNodes;  //得到所有的子节点

                  for (var i = 0; i < sonnodes.length; i++){  //遍历所有的子节点

                      var sonnode = sonnodes.item(i);  //得到具体的某个子节点

                       traverseNodes(sonnode);  //递归遍历

                } 

           } 

       }else{ 

           display(node); 

       } 

} 

DOM的广度和深度遍历

Tree.prototype.BFSearch =  function(node,callback){ 

   var queue=[]; 

   while(node!=null){         

      callback(node); 

      if(node.children.length!=0){ 

       for (var i=0;i<node.children.length;i++){ 

           queue.push(node.children[i]);//借助于队列,暂存当前节点的所有子节点 

       }  

       } 

           node=queue.shift();//先入先出，借助于数据结构：队列 

   }        

}; 

Tree.prototype.DFSearch =  function(node,callback){ 

       var stack=[];        

       while(node!=null){ 

       callback(node); 

       if(node.children.length!=0){ 

       for (var i=node.children.length-1;i>=0;i–){//按照相反的子节点顺序压入栈 

           stack.push(node.children[i]);//将该节点的所有子节点压入栈 

       } 

       } 

     node = stack.pop();//弹出栈的子节点顺序就是原来的正确顺序(因为栈是先入后出的)       

   }    

}; 

2.    javascript实现链表的操作

//Node类和LList类

function Node(element){

    this.element=element;

    this.next=null;

}

function LList(){

    this.head=new Node(“head”);

    this.find=find;

    this.insert=insert;

    this.display=display;

    this.findPrevious=findPrevious;

    this.remove=remove;

}

function display(){  //显示

    var currNode=this.head;

    while(!(currNode.next==null)){

        print(currNode.next.element);

        currNode=currNode.next;

}

function find(item){   //查找

    var currNode=this.head;

    while(currNode.element!=item){

        currNode=currNode.next;

    }

    return currNode;

}

functioninsert(newElement,item){  //插入

var newNode=new Node(newElement);

varcurrent=this.find(item);

newNode.next=current.next;

current.next=newNode;

}

function remove(item){  //移除

var preNode=this.findPrevious(item);

    if(!(preNode.next==null)){

     preNode.next=preNode.next.next;

    }

}  

3.  javascript实现import动态导入节点：

1）

var $import =function(){

    return function(rId, res, callback){

        if(res && ‘string’ == typeofres){

            if(rId){

                if(((‘#’ + rId),$(‘head’)).length>0){

                    return;

                }

            }            

            var sType =res.substring(res.lastIndexOf(‘.’) + 1); //加载资源文件

             if(sType && (‘js’ == sType || ‘css’== sType)){ // 支持js/css

                var isScript = (sType == ‘js’);

                var tag = isScript ? ‘script’ :’link’;

                var head =document.getElementsByTagName(‘head’)[0];              

                var linkScript =document.createElement(tag); // 创建节点

                linkScript.type = isScript ?’text/javascript’ : ‘text/css’;

                linkScript.charset = ‘UTF-8’;

                if(!isScript){

                    linkScript.rel = ‘stylesheet’;

                }

                isScript ? linkScript.src = res: linkScript.href = res;

                if(callback &&’function’ == typeof callback){

                    if(linkScript.addEventListener){

                        linkScript.addEventListener(‘load’,function(){

                            callback.call();

                        }, false);

                    } else if(linkScript.attachEvent) {

                       linkScript.attachEvent(‘onreadystatechange’, function(){

                            var target =window.event.srcElement;

                            if(target.readyState == ‘complete’) {

                               callback.call();

                            }

                        });    }   }

                head.appendChild(linkScript);

            } }  };  }();

2）var JCore ={//构造核心对象

version:1.0,

$import:function(importFile){

var file =importFile.toString();

varIsRelativePath = (file.indexOf(“$”)==0 ||file.indexOf(“/”)==-1);//相对路径(相对于JCore)

var path=file;

if(IsRelativePath){//计算路径,$开头表示使用当前脚本路径，/开头则是完整路径

if(file.indexOf(“$”)==0)

file =file.substr(1);

path =JCore.$dir+file;

}

varnewElement=null,i=0;

var ext =path.substr(path.lastIndexOf(“.”)+1);

if(ext.toLowerCase()==”js”){

var scriptTags =document.getElementsByTagName_r(“script”);

for(var i=0;ilength;i++) {

if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1)

return;

}

newElement=document.createElement_x(“script”);

newElement.type=”text/javascript”;

newElement.src=path;

}

elseif(ext.toLowerCase()==”css”){

var linkTags = document.getElementsByTagName_r(“link”);

for(var i=0;ilength;i++) {

if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1)

return;

}

newElement=document.createElement_x(“link”);

newElement.type=”text/css”;

newElement.rel=”Stylesheet”;

newElement.href=path;

}

else

return;

var head=document.getElementsByTagName_r(“head”)[0];

head.appendChild(newElement);

},

$dir :function(){

var scriptTags = document.getElementsByTagName_r(“script”);

for(var i=0;ilength;i++) {

if(scriptTags[i].src &&scriptTags[i].src.match(/JCore/.js$/)) {

path = scriptTags[i].src.replace(/JCore/.js$/,”“);

return path;

}  }

return “”;

}()

}

4.    javascript实现分页函数：

function goPage(pno,psize){

    var itable =document.getElementById(“idData”);

    var num = itable.rows.length;//表格所有行数(所有记录数)   

    var totalPage = 0;//总页数

    var pageSize = psize;//每页显示行数   

    if(num/pageSize >parseInt(num/pageSize)){  //总共分几页  

            totalPage=parseInt(num/pageSize)+1;  

       }else{  

          totalPage=parseInt(num/pageSize);  

       }  

    var currentPage = pno;//当前页数

    var startRow = (currentPage - 1) *pageSize+1;//开始显示的行  31

    var endRow = currentPage * pageSize;//结束显示的行   40

    endRow = (endRow > num)? num :endRow;    40     

    for(var i=1;i<(num+1);i++){   //遍历显示数据实现分页 

        var irow = itable.rows[i-1];

        if(i>=startRow &&i<=endRow){

            irow.style.display =”block”;   

        }else{

            irow.style.display = “none”;

        }

    }

     varpageEnd = document.getElementById(“pageEnd”);

    var tempStr = “共”+num+”条记录 分”+totalPage+”页 当前第”+currentPage+”页”;

    if(currentPage>1){

        tempStr += “<ahref=\”#\” onClick=\”goPage(“+(1)+”,”+psize+”)\”>首页</a>”;

tempStr += “<a href=\”#\”onClick=\”goPage(“+(currentPage-1)+”,”+psize+”)\”><上一页</a>”

    }else{

        tempStr += “首页”;

        tempStr += “<上一页”;   

    }

 if(currentPage<totalPage){

tempStr += “<a href=\”#\”onClick=\”goPage(“+(currentPage+1)+”,”+psize+”)\”>下一页></a>”;

tempStr += “<a href=\”#\”onClick=\”goPage(“+(totalPage)+”,”+psize+”)\”>尾页</a>”;

    }else{

        tempStr += “下一页>”;

        tempStr += “尾页”;   

    }

5.    String()与toString()的区别：

     (1)null和undefined有String()转换成字符串，而toString()不能；

     (2)toString()能设定数值数据转换的进制数，而String()不能；

     (3)其他情况下：toString(val) === String(val)

6.    下面这个ul，如何点击每一列的时候alert其index?（闭包）

<ul id=”test”>

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

// 方法一：

var lis=document.getElementById(‘test’).getElementsByTagName(‘li’);

for(var i=0;i<3;i++)

{   lis[i].index=i;

   lis[i].onclick=function(){

       alert(this.index);

   };

}

//方法二：

var lis=document.getElementById(‘test’).getElementsByTagName(‘li’);

for(var i=0;i<3;i++){

   lis[i].index=i;

   lis[i].onclick=(function(a){

       return function() {

           alert(a);

       }

   })(i);

}

7.    javascript实现快排

选择中间的元素作为基准，其他的元素和基准比较，形成两个子集，不断重复，直到所有子集剩下一个元素为止；

   var quickSort = function(arr) {

    　　if(arr.length <= 1) { return arr; }

    　　varpivotIndex = Math.floor(arr.length / 2);

    　　var pivot =arr.splice(pivotIndex, 1)[0];

    　　var left =[];

    　　var right =[];

    　　for (var i= 0; i < arr.length; i++){

    　　　　if(arr[i] < pivot) {

    　　　　　　left.push(arr[i]);

    　　　　} else {

    　　　　　　right.push(arr[i]);

    　　　　}

    　　}

    　　returnquickSort(left).concat([pivot], quickSort(right));

   };

8.    javascript实现冒泡排序

bubbleSort: function(array) {

   var i = 0,

   len = array.length,

   j, d;

   for (; i < len; i++) {

       for (j = 0; j < len; j++) {

           if (array[i] < array[j]) {

                d = array[j];

                array[j] = array[i];

                array[i] = d;

           }

       }

    }

   return array;

},

9.    插入排序：

function insertSort(arr){

   for(var i =1,j;i<arr.lenght;i++){

       j=i;

       v=arr[j];

       while(arr[j-1]>v){

          arr[j] = arr[j-1];

          j–;

          if(j == 0){

          break;

         }

       }

       arr[j]=v;

    }

   return arr;

}

10. 选择排序:

function selectSort(arr){

   var len=arr.length;

   var temp;

   for(var i=0;i<len-1;i++){

      for(var j=i+1;j<len;j++){

         if(arr[j]<arr[i]){

            temp=arr[j];

            arr[j]=arr[i];

            arr[i]=temp;

         }

       }

      i++;

     }

    returnarr;

  }

11. 希尔排序：

function shallSort(array) {

 varincrement = array.length;

 vari

 vartemp; //暂存

 varcount = 0;

 do {

   //设置增量

  increment = Math.floor(increment / 3) + 1;

  for (i = increment ; i < array.length; i++) {

   console.log(increment);

    if (array[i] < array[i - increment]) {

      temp = array[i];

      for (var j = i - increment; j >= 0 && temp < array[j]; j-= increment) {

          array[j + increment] = array[j];

      }

      array[j + increment] = temp;

    }

   }

 }

 while (increment > 1)

 return array;

}

12. 堆排序：

Array.method(‘createHeap’, function(low,high){

   var i=low, j=2*i, tmp=this[i];

   while(j<=high){

       if(j< high && this[j]<this[j+1]) j++; //从左右子节点中选出较大的节点

       if(tmp < this[j]){    //根节点(tmp)<较大的节点

           this[i] = this[j];

           i = j;

           j = 2*i;

       }else break;

    }

   this[i] = tmp;    //被筛选的元素放在最终的位置上

   return this;

});

Array.method(‘heapSort’, function(){

   var i, tmp, len=this.length-1;

   for(i=parseInt(len/2); i>=1; i–) this.createHeap(i, len);

   for(i=len; i>=2; i–){

       tmp = this[1];

       this[1] = this[i];

       this[i] = tmp;

       this.createHeap(1, i-1);

    }

   return this;

});

13. 归并排序：

function mergeSort(items) {

   if (items.length < 2) {

       return items;

    }

   var middle = Math.floor(items.length / 2),

       left = items.slice(0, middle),

       right = items.slice(middle),

       params = merge(mergeSort(left), mergeSort(right));

   params.unshift(0, items.length);

   items.splice.apply(items, params);

   return items;

   function merge(left, right) {

       var result = [], il = 0, ir = 0;

       while (il < left.length && ir < right.length) {

            if (left[il] < right[ir]) {

                result.push(left[il++]);

           } else {

                result.push(right[ir++]);

           }

       }

       return result.concat(left.slice(il)) .concat(right.slice(ir));

    }

}

14. javascript实现二分查找

function binarySearch(data, dest){ 

   var h = data.length - 1, 

       l = 0; 

   while(l <= h){ 

       var m = Math.floor((h + l) / 2); 

       if(data[m] == dest){ 

           return m; 

       } 

       if(dest > data[m]){ 

            l = m + 1; 

       }else{ 

           h = m - 1; 

       } 

   }     

   return false; 

} 

15. XML和 JSON有过了解吧？能说一下分别介绍一下他们吗？ JSON有什么优势？

XML：扩展标记语言 (ExtensibleMarkup Language, XML) ，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。

XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

1）应用广泛，可扩展性强，被广泛应用各种场合

2）读取、解析没有JSON快

3）可读性强，可描述复杂结构

4）XML文件庞大，文件格式复杂，传输占带宽

JSON：(JavaScript ObjectNotation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。 JSON采用完全独立于语言的文本格式。

JSON建构于两种结构：“名称/值”对

1）结构简单，都是键值对。

2）读取、解析速度快，很多语言支持

3）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；

4）描述复杂结构能力较弱

XML: <Student>张三</Student>  转为JSON:  { “Student”: “张三” }

16. 斐波那契数

function fib(n){ 

   if(n==1||n==2){ 

       return 1; 

   } 

   return arguments.callee (n-1)+ arguments.callee (n-2); 

} 

17. String(), toString()的区别

数值，布尔值，对象和字符串值都有toString()方法，但是null和undefined没有这个方法。

一般情况下没有参数，但是可以传递一个参数，输出数值的基数。

String()可以将任何类型的值转化为字符串，如果值有toString()的方法，则调用该方法并返回相应的结果。如果值是null，则返回null。如果值是undefined，则返回undefined。

18. 左边固定，右边自适应

1）#left{

 float:left;

 width:200px;

 background-color:blue;

  }

 #right{

 overflow:hidden;

 background-color:gray;

  }

2）#left{

 float:left;

 width:200px;

 background-color:blue;

  }

 #right{

 margin-left:200px;

 background-color:red;

  }

3）#left{

 position:absolute;

 top:0px;

 left:0px;

 width:200px;

 background-color:blue;

  }

 #right{

 margin-left:200px;

 background-color:red;

  }

4）#left{

 position:absolute;

  top:0px;

 left:0px;

 width:200px;

 background-color:blue;

  }

 #right{

 position:absolute;

 top:0px;

 left:200px;

 width:100%;

 background-color:gray;

  }

右边固定，左边自适应：

1）#left{

 float:left;

 width:100%;

 background-color:blue;

 margin-left:-200px;

 }

 #right{

 float:right;

 width:200px;

 background-color:gray;

}