以百度前端技术学院的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. JSP6（JSP 指令与JSP 动作元素）

      一．JSP指令用来设置整个JSP页面相关的属性 指令可以有很多个属性,它们以键值对的形式存在,并用逗号隔开. JSP中的三种指令标签: Page指令 Page指令为容器提供当前页面的使用说明.一个JS ...

    2. Mybatis分页插件PageHelper使用

      一． Mybatis分页插件PageHelper使用  1.不使用插件如何分页: 使用mybatis实现: 1)接口: List<Student> selectStudent(Map< ...

    3. upload 简单的封装

      upload 最简单的封装类 <?php    class Upload{        public function Up($files){            if($files['na ...

    4. Shell 初步学习

      Shell 概述 Shell:Linux命令解释器 脚本执行方式 chmod 755 脚本名:赋权限(调用必须显示的使用绝对路径或相对路径) bash 脚本名:通过Bash调用执行脚本 命令别名 al ...

    5. [菜鸟弄nginx]nginx ---- 同一个server下根据host 配置不同的error_page页

      有一个需求: 两个域名指向同一个nignx,不同的域名404跳转页面不同.如www.y.com跳到www.y.com/error.html ,www.j.com跳到www.j.com/errorxxx ...

    6. CentOS6 图形界面（gnome）安装,使用vnc进行远程连接

      CentOS6相对于CentOS5的安装有了不少的进步,有不少默认的选项可以选择,如: Desktop :基本的桌面系统,包括常用的桌面软件,如文档查看工具. Minimal Desktop :基本的 ...

    7. JavaScript学习笔记（十六）——面向对象编程

      在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

    8. 阿里Java开发手册1.3.0 文字版

      版本: 1.3.0 update: 2017.9.25 一.编程规约 (一) 命名风格 1. [强制]代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例:_name _na ...

    9. eclipse中Cannot change version of project facet Dynamic Web Module to 2.5.

      Cannot change version of project facet Dynamic Web Module to 2.5.这个错误可能很多人都碰到过,这里网上查了一些资料,解决的问题.所以这里 ...

    10. 《iOS Human Interface Guidelines》——Multitasking

      多任务处理 多任务处理让人们在屏幕上(以及合适的iPad模式)查看多个app,而且在近期使用的app中高速地切换. 在iOS 9中.人们能够使用多任务处理UI(例如以下所看到的)来选择一个近期使用的a ...