web进阶之二十一：数组及其操作方法
2018-09-18 本文已影响10人
甚得朕心
在很多编程语言中都有数组，当然，在Js中也一样存在。
数组的创建
在js中有两个创建方
- 之间创建
- 面向对象创建
同时数组有一维数组和多维数组，即数组里面的元素可以是单个元素，或者里面也是数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的创建</title>
<script type="text/javascript">
//面向对象的方式创建
var aRr01 = new Array(1,2,3,'abc');
//直接创建
var aRr02 = [1,2,3,'def'];//推荐使用，性能更高
alert(aRr02.length);//会出现数组的长度。4
alert(aRr02[0]);//将会打印出1。就是数组中的第零各元素。
</script>
</head>
<body>
</body>
</html>
推荐使用直接创建，效率更高。
数组的具体操作方法
当数组创建完成后，我们怎么操作呢，其中方法很多，需要多加琢磨。
-
获取数组的长度：aList.length;
-
用下标操作数组的某个数据：aList[0];
-
join() 将数组成员通过一个分隔符合并成字符串
-
push() 和 pop() 从数组最后增加成员或删除成员
-
unshift()和 shift() 从数组前面增加成员或删除成员
-
reverse() 将数组反转
-
indexOf() 返回数组中元素第一次出现的索引值
-
splice() 在数组中增加或删除成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
<script type="text/javascript">
var aRr02 = [1,2,'a',4,5,6,'abc']
获取数组的成员数量（长度）
alert(aRr02.length);//弹出7
alert(aRr02[3]);//弹出4
/*创建二维数组，进行操作*/
var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
alert(aRr03.length);//弹出3
alert(aRr03[1].length);//弹出3
alert(aRr03[1][2]);//弹出c。先找出整体，在找个体
/*join() 将数组成员通过一个分隔符合并成字符串*/
var aRr = [1,2,3,4];
//用-连接数组元素并转为字符串
var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4
var sTr = aRr.join('');//用空串连接
alert(sTr);//弹出1234
/*push() 和 pop() 从数组最后增加成员或删除成员*/
/*向数组最后追加元素*/
var aRr = [1,2,3,4];
aRr.push(5);
alert(aRr);//1,2,3,4,5
//删除末尾元素
aRr.pop();
alert(aRr);//弹出1,2,3
//向最前面插入元素0
// aRr.unshift(0);
// alert(aRr);//0,1,2,3,4
/*unshift()和 shift() 从数组前面增加成员或删除成员*/
/*删除第一个（索引为0的）元素*/
var aRr = [1,2,3,4];
aRr.shift();
alert(aRr);//2,3,4
/*reverse() 将数组反转*/
//反转
aRr.reverse();
alert(aRr);//4,3,2,1
/*indexOf() 返回数组中元素第一次出现的索引值*/
//查找字母'b'第一次出现的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
alert(num);//1
/*splice() 在数组中增加或删除成员*/
var aRr2 = ['a','b','c','d','a','b','c','d'];
//从第2索引元素开始，删除1个元素
aRr2.splice(2,1);//删除c
alert(aRr2);//a,b,d,a,b,c,d
//从第2索引元素开始，删除1个元素，再插入e
aRr2.splice(2,1,'e');//把c替换成e
alert(aRr2);//a,b,e,d,a,b,c,d
/*也可以理解为替换*/
//删除后面的abcd，为4位，改为fghi
aRr2.splice(4,4,'f','g','h','i');//从第4位开始，删除四个元素，在插入4个元素
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
</head>
<body>
</body>
</html>
数组的去重
在很多编程语言中，都会有去重，都是通过现有的数据类型或者函数来进行操作，Js中我们可以自己写一个简单，但是很有效的去重方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组去重</title>
<script type="text/javascript">
/* 定义一个数组 */
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
/*定义个空数组，用于存放去重之后的数组*/
var aRr2 = [];
/*在for循环的条件中写上条件，循环的数就是下标的的值*/
for(var i=0; i<aRr.length; i++){
//判断元素第一次出现的位置，恰好是当前循环的数时，就将元素放入新数组
//不难理解的是：如果数组里面只有一个唯一的元素，那么它的索引值肯定循环所产生的i是一样的。
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
</script>
</head>
<body>
</body>
</html>
通过标签获取元素
在之前的代码中我们都是通过唯一性的id来获得，这次我们来通过标签获得。
这里要记得的是，通过标签获得元素时，相当于得到了一个选择集合，就像数组一样，我们可以通过下标来得到具体的元素。所以这里不能直接修改元素的style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function(){
//获取页面上所有的li
var aLi = document.getElementsByTagName('li');//这里的elements可以理解成为，标签可以是多个，而id只有一个
//获取id为list01的ul
// var oList = document.getElementById('list01');
//再获取这个ul下的所有li
// var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//12
// alert(aLi.length);//8
// aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法
/*因为这里aLi获取到的是一个数据集合，就像数组一样，我们可以获取长度，但是不能修改所有属性
只能一个个的修改，当然运用循环修改会更轻松点。*/
aLi[0].style.backgroundColor = 'gold';
aLi[1].style.backgroundColor = 'gold';
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list02">
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>
在上面的方法中，我们要掌握，数组的基本操作方法和去重，这个实用是，是很有效果的。
