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中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...
随机推荐
- 使用docker搭建Jenkins 及slave的配置
安装Jenkins 使用docker docker run -d -p 8080:8080 -p 50000:50000 -v /opt/jenkins_home:/var/jenkins_home ...
- python3.5安装pyHook,解决【TypeError: MouseSwitch() missing 8 required positional arguments: 'msg', 'x', 'y', 'data', 'time', 'hwnd', and 'window_name'】这个错误！
为什么安装 pyHook包:为Windows中的全局鼠标和键盘事件提供回调. Python应用程序为用户输入事件注册事件处理程序,例如鼠标左键,鼠标左键,键盘键等 先要实时获取系统的鼠标位置或者键盘输 ...
- Java开发步骤
3.编辑Java源程序 使用纯文本编辑器,比如记事本notpad.exe:EditPlus.UltraEdit等专业的纯文本编辑器. Word不是纯文本编辑器. 需求:写一个Java程序,在控制台打印 ...
- Libevent 事件循环(1)
// 事件的dispatch int event_base_loop(struct event_base *base, int flags) { //得到采用的事件模型 epoll/epoll/ ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- SPFA【模板】单源最短路径
题目传送 https://www.luogu.org/problem/show?pid=3371没啥解释,SPFA纯模版qaq//Gang #include<iostream> #incl ...
- 分布式监控系统Zabbix3.2监控数据库的连接数
在 分布式监控系统Zabbix3.2跳坑指南 和 分布式监控系统Zabbix3.2给异常添加邮件报警 已经介绍了如何安装以及报警.此篇通过介绍监控数据库的3306端口连接数来了解如何监控其它端口和配置 ...
- Echarts后台封装option对象
该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...
- 数据库服务器---Qps
QPS(Query Per Second)意思为"每秒查询率",是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准.同时也代表一种计算 ...
- windows 终端命令详解
打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗口... 也可以通过cmd /c 命令 和 cmd /k 命令的方式来直接运行命令 注:/c表示执行完命令后关闭cmd ...