以百度前端技术学院的js任务三为例，复习一下关于js数组的几个点

题目

<!DOCTYPE>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

  </head>

<body>

  <ul id="source">

    <li>北京空气质量：<b>90</b></li>

    <li>上海空气质量：<b>70</b></li>

    <li>天津空气质量：<b>80</b></li>

    <li>广州空气质量：<b>50</b></li>

    <li>深圳空气质量：<b>40</b></li>

    <li>福州空气质量：<b>32</b></li>

    <li>成都空气质量：<b>90</b></li>

  </ul>

  <ul id="resort">

    <!--

    <li>第一名：北京空气质量：<b>90</b></li>

    <li>第二名：北京空气质量：<b>90</b></li>

    <li>第三名：北京空气质量：<b>90</b></li>

     -->

  </ul>

  <button id="sort-btn">排序</button>

<script type="text/javascript">

/**

 * getData方法

 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量

 * 返回一个数组，格式见函数中示例

 */

function getData() {

  /*

  coding here

  */

  /*

  data = [

    ["北京", 90],

    ["北京", 90]

    ……

  ]

  */

  return data;

}

/**

 * sortAqiData

 * 按空气质量对data进行从小到大的排序

 * 返回一个排序后的数组

 */

function sortAqiData(data) {

}

/**

 * render

 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中

 * 格式见ul中的注释的部分

 */

function render(data) {

}

function btnHandle() {

  var aqiData = getData();

  aqiData = sortAqiData(aqiData);

  render(aqiData);

}

function init() {

  // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

}

init();

</script>

</body>

</html>

我的代码

<!DOCTYPE>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

  </head>

<body>

  <ul id="source">

    <li>北京空气质量：<b>90</b></li>

    <li>上海空气质量：<b>70</b></li>

    <li>天津空气质量：<b>80</b></li>

    <li>广州空气质量：<b>50</b></li>

    <li>深圳空气质量：<b>40</b></li>

    <li>福州空气质量：<b>32</b></li>

    <li>成都空气质量：<b>90</b></li>

  </ul>

  <ul id="resort">

    <!--

    <li>第一名：北京空气质量：<b>90</b></li>

    <li>第二名：北京空气质量：<b>90</b></li>

    <li>第三名：北京空气质量：<b>90</b></li>

     -->

  </ul>

  <button id="sort-btn">排序</button>

<script type="text/javascript">

/**

 * getData方法

 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量

 * 返回一个数组，格式见函数中示例

 */

window.onload = function() {

    var source = document.getElementById('source');

    var source_li = source.getElementsByTagName('li');

    var resort = document.getElementById('resort');

    var bn = document.getElementsByTagName('button')[0];

    //定义data数组，定义的位置很重要

    var data = [];

    //str一定要等于空字符串，不然的话第一个数据就会是undfined

    var str='';

    var n=0;

    function getData() {

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

            var arr = source_li[i].innerHTML;

            var Arr = [];//如果是在for循环外定义的这个数组，那生成的将会是一个一维数组，非二维

            Arr.push(arr.slice(0,2));//数组的slice方法，复制数组的0到2位

            Arr.push(arr.slice(10,12));

            data.push(Arr);//这个返回的不直接是一个直观的Data二维数组，但他其实是对的。我在这里因为没有直观的看到data数组而踩了很多坑

        };

        return data;

    }

    function sortAqiData(data) {

        data.sort(function(a,b){

          return a[1] - b[1];//因为data数组的第2位才是数字，所以要选到第二位再进行比较

        });

        return data;

    }

    function render(data) {

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

          n++;

          str += '<li>第'+n+'名：'+data[i][0]+'-'+data[i][1]+'</li>';

          resort.innerHTML= str;

      }

    }

    function btnHandle() {

      var aqiData = getData();

      aqiData = sortAqiData(aqiData);

      render(aqiData);

    }

    function init() {

      bn.onclick = function(){

        btnHandle();

        bn.disabled="disabled";

      }

      // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

    }

    init();

}

</script>

</body>

</html>

取出文本

方法一：
source.getElementsByTagName('li')[i].innerHTML

这种方法会将整个

  • 的内容一起取出来，包括标签。

    方法二：
    source.getElementsByTagName('li')[i].innerText

    这种方法只会取出

  • 中的文本内容

    方法三
    source.getElementsByTagName('li')[i].childNodes[1]

    是第二个节点，childNodes[1]就是获取这个节点里的内容

    生成数组

    数组的slice方法

    slice() 方法可从已有的数组中返回选定的元素。

    arrayObject.slice(start,end)
    参数 描述
    start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
    end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
    数组的push方法

    push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

    arrayObject.push(newelement1,newelement2,....,newelementX)
    生成二维数组

    我在这里踩了很多坑，后来发现，要把数组放在for循环里面定义，然后在for循环里用两次slice方法，这样就会是循环一次加入一组数据，而不是循环一次加入一个数据。

    存在的问题，事件绑定

    我原来的想法是给按钮绑定两个事件“排序”和“收起”，用addEventListener（）方法；

    bn.addEventListener('click',f1);//排序
    
bn.addEventListener('click',f2);//清空列表

    可是我发现点一次两个事件就都执行了，就照成整个效果不变。

    JavaScript中的数组对象遍历、读写、排序等操作的更多相关文章

    1. JavaScript中Array(数组) 对象

      JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

    2. javascript中的数组对象

      1.创建数组的三种方式: 1.1 var 数组名=[元素1,元素2,元素3...]; 例如: var arr1=[1,2,3,4]; 1.2 var 数组名=new Array(元素1,元素2,元素3 ...

    3. JavaScript 中有关数组对象的方法

      JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...

    4. javascript中对数组对象的深度拷贝

      在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况. 如果是简单的一维数组对象,可以使用两个原生方法: 1.splice var arr1 = ['a', 'b', 'c ...

    5. javascript中关于数组的一些鄙视题

      一.判断一个数组中是否有相同的元素 /* * 判断数组中是否有相同的元素的代码 */ // 方案一 function isRepeat1(arrs) { if(arrs.length > 0) ...

    6. JavaScript中的数组详解

      JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...

    7. 详解Javascript中的Array对象

      基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

    8. JavaScript中对数组和数组API的认识

      JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...

    9. JavaScript中的数组和字符串

      知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串 一.JavaScript中的数组 1.JavaScript中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...

    随机推荐

    1. 深度解析continue,break和return

      continue,break和return是Java中的关键字,在方法体内的流程控制中使用频率较高. 在现实中,经常会有同学在使用中产生混淆,从而使得流程控制语句发生混乱.在这里,我结合个人的使用经历 ...

    2. Mysql--数据的操作

      1.插入数据 1.1 插入完整数据记录 语法1: 例子: 语法2: 例子: 1.2 插入数据记录一部分 语法: 例子: 1.3 插入多条数据记录 1.插入多条完整的数据 语法: 例子:   插入多条部 ...

    3. struct 类型指针技巧

      此类型对于两种结构的查找和删除都十分方便,实际项目中也常常用到.

    4. 关于mui header在手机上运行丢失问题

      并不需要换header, 只需要把引用的例子自带的CSS文件 app.css.里的两个样式:.mui-plus.mui-android header.mui-bar {display: none;}. ...

    5. Python函数篇（4）之迭代器与生成器

      1.文件操作的"b模式"(补充) 在上一篇文章中,我在最后一部分写了文件处理的一些方法,但是觉得还是有必要再提一下如下的内容: 像rb.wb.ab这种模式,是以字节的形式操作,需要 ...

    6. 深度解剖sesssion运行原理

      已经大半年没有更新博客了,一方面有比博客更重要的事情要做,另外一方面也没有时间来整理知识,所以希望在接下来的日子里面能够多多的写博客来与大家交流 什么是session session的官方定义是:Se ...

    7. css走过的坑

      css盒模型 1.内联元素 设置宽高无效.margin左右有效上下无效.padding都有效 会被当做字体所以内联之间有间隙 父级元素要设置font-size:0; 内联元素:a.b.button.e ...

    8. [Android App]IFCTT，即：If Copy Then That，是一个基于IFTTT的"This"实现

      以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/8075738.html IFCTT,即:If Copy Then ...

    9. python文件和文件夹訪问File and Directory Access

      http://blog.csdn.net/pipisorry/article/details/47907589 os.path - Common pathname manipulations 都是和路 ...

    10. WAS集群系列（2）：数据库连接低级错误——网络连接问题

      环境 项目点 指标 WAS版本号 7.0 应用server操作系统 Windows 2008 应用server系统位数 64bit 数据库server操作系统 CentOS 5.6 数据库版本号 Or ...