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中的数组是什么 数组指的是数据的有序列表,每种语言基本上都有 ...
随机推荐
- Android自定义指示器时间轴
指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activit ...
- 装饰模式（Decorator）
装饰模式(Decorator) 顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装 ...
- liunx中图形化桌面环境中的脚本编程之——创建文本菜单
整体是通过建立菜单布局,然后根据菜单上的布局建立函数(就是为这些布局实现功能),最后将函数和布局实现逻辑上的相连: 如何建立菜单布局? 整体上是通过打印字符创建出,因此需要使用echo命令,但是有一些 ...
- 04.redis集群+SSM整合使用
redis集群+SSM整合使用 首先是创建redis-cluster文件夹: 因为redis最少需要6个节点(三主三从),为了更好的理解,我这里创建了两台虚拟机(192.168.0.109 192.1 ...
- 微信JS-SDK选择相册或拍照并上传PHP实现
理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...
- Python爬虫(十三)_案例：使用XPath的爬虫
本篇是使用XPath的案例,更多内容请参考:Python学习指南 案例:使用XPath的爬虫 现在我们用XPath来做一个简单的爬虫,我们尝试爬取某个贴吧里的所有帖子且将该帖子里每个楼层发布的图片下载 ...
- 出现JSONvalue failed .error is Illegal start of token
出现JSONvalue failed .error is Illegal start of token了? 别着急,抽根烟,喝杯水.开工: 1:判断是请求前报的错还是请求后报的错!!这个很重要,我就是 ...
- C++中指向类的指针
事情缘起是因为上班途中刷到了有个微博,那人说答对这个问题的请发简历. 看了就是关于指向C++类的指针的知识,原代码类似下面这样: class NullPointCall { public: void ...
- C language 模拟 win的经典游戏——扫雷
让我们在terminal下愉快的...扫雷 昨天跟奇葩霖聊起"雷区"这个敏感词汇,然后非常荣幸的... 应该轰炸不到我.. . 后来百无聊赖的去玩了把扫雷.然后发现我之前都是乱扫的 ...
- python的unittest測试框架的扩展浅谈
非常多时候測试框架须要依据測试数据来自己主动生成測试用例脚本,比方接口測试,通过不同參数构建组合去请求接口,然后验证返回结果.假设这样能通过配置excel数据来驱动測试.而不用去写一大堆的測试用例脚本 ...