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

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

时间： 2024-10-24 12:06:07

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

JS的数组相关知识

创建数组方法一: var a1=new Array(5); console.log(a1.length);//5 console.log(a1); //[] ,数组是空的 var a2=new Array(5,6); console.log(a2.length);//2 console.log(a2); //[5,6] 创建数组二: var a1=[5]; console.log(a1.length);//1 console.log(a1); //[5] var a2=[5,6]; consol

js中数组相关的Api

话不多说,直接上图,一眼便知道怎么回事!!! forEach every some sort map filter 原文地址:https://www.cnblogs.com/coder-lzh/p/9191705.html

关于JS中数组splice，concat的用法和AngularJs中filter的补充知识

一 JS数组相关操作 1. splice函数,可做插入,删除,替换操作 1 <script> 2 "use strict" 3 var arr = ['z3']; 4 arr.splice(1,0,'l4'); 5 alert(arr); //z3,l4 6 arr.splice(1,1,'w5'); 7 alert(arr); //z3,w5 8 arr.splice(1,1); 9 alert(arr); //z3 10 arr.splice(10,1,'l4','w5

前端Js传递数组至服务器端

相关学习资料 Linux黑客大曝光: 第8章 无线网络 无线网络安全攻防实战进阶 无线网络安全 黑客大曝光 第2版 http://zh.wikipedia.org/wiki/IEEE_802.11 http://www.hackingexposedwireless.com/doku.php http://blog.csdn.net/gueter/article/details/4812726 http://my.oschina.net/u/994235/blog/220586#OSC_h2_6

原生 JS 中对象相关 API 合集

https://juejin.im/entry/58f8a705a0bb9f0065a4cb20 原文链接:https://microzz.com/2017/04/20/jsobject/ 原生 JavaScript 中对象相关 API 合集 - 对象篇.现在 jQuery 已经没有那么有优势了,原生 JS 赶紧学起来... -- 由microzz分享 Microzz [email protected] 主页 文章 标签 GitHub 关于我 掘金专栏 SegmentFault Vue音乐播放器

js中数组Array的操作

JS中数组有很多操作,作为前端多多少少知道点,但每次要用时都需要去百度,有点麻烦,所以在这儿做个备忘,简单总结些平时最常用的数组操作. shift:删除原数组第一项,并返回删除元素的值: var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 注:如果数组为空则返回undefined unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); /

面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.export 是什么? 6.module.export.export 与 export defalut 有什么区别? 7.什么是组件化? 8.组件化的原则是什么? 9.全局组件与局部组件的区别? 10.如何注册一个全局组件,并使用它? 11.局部组件又是如何注册并使用的? 12.如何封装一个高复用的 Vu

js 关联数组

踩得坑: JS ,通过 new Array()创建了一个数组: var param =  new Array();param["key1"] = value1;param["key2"] = value2;param["key3"] = value3; 打印  param.length 时 一直为0; 发现: js关联数组的属性:length,其数值记录的是key为整数的元素个数 当某元素key为字符串的时候,不计入length中. 办法: Ob

js删除数组元素中的指定值

js删除数组元素中的指定值:所谓删除数组元素中指定的值,就是删除具有指定的数组项,下面就通过实例代码代码介绍一下如何实现此功能.代码如下: var theArray=["蚂蚁部落",2,"青岛市南区","antzone","蚂蚁部落"]; for(var i=0;i<theArray.length;i++){ if(theArray[i]=="蚂蚁部落"){ theArray.splice(i,1);