首页 > 代码库 > js跟数组相关的一到面试题

js跟数组相关的一到面试题

面试题真的是查漏补缺,尤其是大公司大神们出的题目,总能告诉你某些地方你是学的有多么的不扎实……

根据各科成绩排序:

HTML代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>百度面试——成绩排名</title>    <style>        *{margin:0;padding:0;}        table{border-collapse:collapse;margin:0 auto;}        tbody tr{cursor:pointer;}        th,td{width:200px;height:30px;border:1px solid #000;}        td{text-align:center;}    </style></head><body>    <table id="table">        <thead>            <tr>                <th>排名</th>                <th>姓名</th>                <th onclick="paixu(2)">语文</th>                <th onclick="paixu(3)">数学</th>                <th onclick="paixu(4)">外语</th>                <th>总和</th>            </tr>        </thead>        <tbody>            <tr>                <td></td>                <td>陈小妞</td>                <td>76</td>                <td>80</td>                <td>87</td>                <td></td>            </tr>            <tr>                <td></td>                <td>陈莲莲</td>                <td>98</td>                <td>43</td>                <td>78</td>                <td></td>            </tr>            <tr>                <td></td>                <td>Alien</td>                <td>90</td>                <td>53</td>                <td>86</td>                <td></td>            </tr>            <tr>                <td></td>                <td>陈晓瑞</td>                <td>80</td>                <td>43</td>                <td>87</td>                <td></td>            </tr>            <tr>                <td></td>                <td>高健</td>                <td>43</td>                <td>87</td>                <td>98</td>                <td></td>            </tr>            <tr>                <td></td>                <td>张媛媛</td>                <td>60</td>                <td>54</td>                <td>84</td>                <td></td>            </tr>            <tr>                <td></td>                <td>郑媛媛</td>                <td>34</td>                <td>34</td>                <td>67</td>                <td></td>            </tr>            <tr>                <td></td>                <td>秦优</td>                <td>54</td>                <td>87</td>                <td>87</td>                <td></td>            </tr>            <tr>                <td></td>                <td>陈书贞</td>                <td>65</td>                <td>87</td>                <td>67</td>                <td></td>            </tr>            <tr>                <td></td>                <td>陈杲</td>                <td>100</td>                <td>100</td>                <td>100</td>                <td></td>            </tr>        </tbody>    </table></body></html>
HTML

最开始的时候,就是想着根据DOM中表格的操作获取第一个tBody的rows,然后写一个排序规则,根据rows中某一列的具体值排序整个rows,就是利用数组的sort方法,自己写排序规则,但是最后执行的时候说是不认识sort,进行了数组检测才发现原来获取到的rows根本就不是数组(Array),而是集合(Collection)。经过多番认证后,更为震惊的结果是,类似于getElementsByTagName等的这些方法也都是集合,所以数组的方法sort是没有办法应用的泪奔啊……

然后就想起了冒泡排序,就想着,既然它没有给定的排序规则,就想着自己定义一个排序方法。

接下来当然是激动地写起了冒泡排序(http://zh.wikipedia.org/wiki/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F#JavaScript.E5.AE.9E.E7.8E.B0),最后的确是当点击标题的时候,下边的内容会排序会发生相应的变化,但是但是,差点被迷惑,偶然发现根本就不是升序,而是乱序的,

function $(id){            return document.getElementById ? document.getElementById(id) : id;        }        var oTable = $("table");        var aTh = oTable.tHead.rows[0].cells;        var aRow = oTable.tBodies[0].rows;        function bubbleSort(aRow,index){          var i=aRow.length, j;          var temp;          while(i>0){            for(j=0;j<i-1;j++){                var v1 = parseInt(aRow[j].cells[index].innerHTML);                var v2 = parseInt(aRow[j+1].cells[index].innerHTML);                console.log("v1:"+v1,"v2:"+v2);                debugger;                if(v1>v2){                    console.log(aRow[j].innerHTML,aRow[j+1].innerHTML);//1                    temp = aRow[j];                    console.log("temp",temp)//2                       aRow[j] = aRow[j+1];                       console.log("aRow[j]",aRow[j])//3                    aRow[j+1] = temp;                    console.log("aRow[j+1]",aRow[j+1])//4                    console.log(aRow[j].innerHTML,aRow[j+1].innerHTML);//5                }            }            i--;          }          return aRow;        }        function paixu(index){            aRow = bubbleSort(aRow,index);            for (var i = 0; i < aRow.length; i++) {                oTable.tBodies[0].appendChild(aRow[i]);            };        }
错误的js

代码中的console 注释1 跟 注释5 的结果是一样的,如果两个换位置的话,应该是不同的才对,所以两个没有换位置,然后就更具体地调试,

根据2,3,4的结果发现,这三行根本就没有赋值成功,我靠,再次晕倒。

js得到的集合只能够读取,是不能够设置值的……

但是,当我点击标题的时候为什么会有变化呢???

这个问题出现在paixu这个函数中,在for循环中写debugger;看一下……

 

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

  debugger;
  oTable.tBodies[0].appendChild(aRow[i]);
};

上边for循环中的aRow是动态变化的,我靠……再次被雷到……因为小女子真的是不止一次掉入这个神坑无比的大坑了,只能说,历练少……思路不严谨了……

最后还是将这个集合放到数组中,然后利用数组的sort方法好了,突然觉得这样想真的是好简单哦,绕着世界一大圈,发现什么都没干,又回来了……

function $(id){            return document.getElementById ? document.getElementById(id) : id;        }        var oTable = $("table");        var aTh = oTable.tHead.rows[0].cells;        var cRow = oTable.tBodies[0].rows;        function paixu(index){            var aRow = [];            for (var i = 0; i < cRow.length; i++) {                aRow[i] = cRow[i];            };            aRow.sort(function(a,b){                var v1 = parseInt(a.cells[index].innerHTML);                var v2 = parseInt(b.cells[index].innerHTML);                return v1 - v2;            });            for (var i = 0; i < aRow.length; i++) {                oTable.tBodies[0].appendChild(aRow[i]);            };        }
正确的js

看着上边的代码,欲哭无泪……

 

js跟数组相关的一到面试题