以百度前端技术学院的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. vuejs(2.0)基础笔记

      基本结构 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#wrap', data ...

    2. 浅谈IM(InstantMessaging) 即时通讯/实时传讯【理论篇】

          一.IM简要概述 IM InstantMessaging(即时通讯,实时传讯)的缩写是IM,互动百科大致解释是一种可以让使用者在网络上建立某种私人聊天(chatroom)的实时通讯服务. 大部 ...

    3. 爬虫day 04_01(爬百度页面)

      import urllib.request import http.cookiejar from lxml import etree head = { 'Connection': 'Keep-Aliv ...

    4. LoadRunner性能测试过程中报Error(-17998):Failed to get [param not passed in call] thread TLS entry.

      最近与其他公司一起合作使用loadrunner11进行性能测试,在此过程中,遇到Error(-17998)的错误,从网上搜索,找到的答案基本上都是说没有定义事务,但检查所有测试代码,发现都已经定义了事 ...

    5. 【原创】2、小程序域名配置之申请支持SSL（https）

      要把一个网站对接进小程序,一.网站的域名必须通过备案(ICP备案).在买域名的时候,各个域名服务商都有提供相应的备案平台,可以方便的提交备案.工信部官网:http://www.miitbeian.go ...

    6. codeforces 893B Beautiful Divisors 打表

      893B Beautiful Divisors 思路: 打表 代码: #include <bits/stdc++.h> using namespace std; #define _for( ...

    7. SQL Server学习之路（六）：“增删改查”之“查”

      0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...

    8. javascript设计模式——迭代器模式

      前面的话 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示.迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也 ...

    9. Centos-6.5 + python3 + mysql5.6 环境搭建

      注意:Centos6.5 是刚装好的系统 yum install lrzsz  (ftp上传和下载) yum install -y gcc     yum install -y gcc gcc-c++ ...

    10. 大白话Vue源码系列(03)：生成AST

      阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...