首页 > 代码库 > 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>
最开始的时候,就是想着根据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]); }; }
代码中的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跟数组相关的一到面试题