JavaScript中的数组对象遍历、读写、排序等操作
以百度前端技术学院的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中的数组对象遍历、读写、排序等操作的更多相关文章
- JavaScript中Array(数组) 对象
JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...
- javascript中的数组对象
1.创建数组的三种方式: 1.1 var 数组名=[元素1,元素2,元素3...]; 例如: var arr1=[1,2,3,4]; 1.2 var 数组名=new Array(元素1,元素2,元素3 ...
- JavaScript 中有关数组对象的方法
JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...
- javascript中对数组对象的深度拷贝
在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况. 如果是简单的一维数组对象,可以使用两个原生方法: 1.splice var arr1 = ['a', 'b', 'c ...
- javascript中关于数组的一些鄙视题
一.判断一个数组中是否有相同的元素 /* * 判断数组中是否有相同的元素的代码 */ // 方案一 function isRepeat1(arrs) { if(arrs.length > 0) ...
- JavaScript中的数组详解
JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...
- 详解Javascript中的Array对象
基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...
- JavaScript中对数组和数组API的认识
JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...
- JavaScript中的数组和字符串
知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串 一.JavaScript中的数组 1.JavaScript中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...
随机推荐
- c# winform 窗体之间的传参
说起winform程序中窗体之间的参数互传,大家找度娘会找到很多方法: 1.在窗体类中创建全局变量,类型为公开.静态的: 2.在窗体类中定义狗仔函数: 3.通过实践来船体参数: 这三种思路完全来自于霖 ...
- linux环境变量的配置
1.全局环境变量 vi /etc/profile JAVA_HOME=/opt/modules/jdk1.8.0_11/ export PATH=$PATH:$JAVA_HOME/bin:$JAV ...
- CCF认证考试——折点计数
描述:简单题 #include<iostream> using namespace std; int main() { ], n, count = ; cin >> n; ; ...
- 计算出前N项的数据
#include<iostream> #include<algorithm> #include<numeric> using namespace std; ; in ...
- P1378 油滴扩展
题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放置下一个油滴. ...
- HDU3792---Twin Prime Conjecture（树状数组）
Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- javascript面向对象系列第四篇——OOP中的常见概念
前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...
- Linux中nginx手动安装
本分类下有一个环境一键安装.那这背后发生了什么呢?咱们手动使用源码进行安装. 1.首先保证有一个能联网的centos. 2.百度 ningx 官网 点download http://nginx. ...
- 超简单的php缓存类
<?php class Cache { private $dir = "data/cache/";//定义缓存目录 private $key='c_a_sss'; // 文件 ...
- java 接口测试
学习java 时间也不算太长,大学有点基础,学起来也顺手多了,其实我感觉更是因为学习完python之后,在学习别的语言的时候就简单多了,几乎所有的语言学起来都差不多.前几篇写过的都是python接口测 ...