??在很多編程語言中都有數(shù)組,當(dāng)然,在Js中也一樣存在。
數(shù)組的創(chuàng)建
在js中有兩個(gè)創(chuàng)建方
- 之間創(chuàng)建
- 面向?qū)ο髣?chuàng)建
同時(shí)數(shù)組有一維數(shù)組和多維數(shù)組,即數(shù)組里面的元素可以是單個(gè)元素,或者里面也是數(shù)組。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組的創(chuàng)建</title>
<script type="text/javascript">
//面向?qū)ο蟮姆绞絼?chuàng)建
var aRr01 = new Array(1,2,3,'abc');
//直接創(chuàng)建
var aRr02 = [1,2,3,'def'];//推薦使用,性能更高
alert(aRr02.length);//會(huì)出現(xiàn)數(shù)組的長度。4
alert(aRr02[0]);//將會(huì)打印出1。就是數(shù)組中的第零各元素。
</script>
</head>
<body>
</body>
</html>
推薦使用直接創(chuàng)建,效率更高。
數(shù)組的具體操作方法
當(dāng)數(shù)組創(chuàng)建完成后,我們?cè)趺床僮髂兀渲蟹椒ê芏?,需要多加琢磨?/p>
獲取數(shù)組的長度:aList.length;
用下標(biāo)操作數(shù)組的某個(gè)數(shù)據(jù):aList[0];
join() 將數(shù)組成員通過一個(gè)分隔符合并成字符串
push() 和 pop() 從數(shù)組最后增加成員或刪除成員
unshift()和 shift() 從數(shù)組前面增加成員或刪除成員
reverse() 將數(shù)組反轉(zhuǎn)
indexOf() 返回?cái)?shù)組中元素第一次出現(xiàn)的索引值
splice() 在數(shù)組中增加或刪除成員
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組常用方法</title>
<script type="text/javascript">
var aRr02 = [1,2,'a',4,5,6,'abc']
獲取數(shù)組的成員數(shù)量(長度)
alert(aRr02.length);//彈出7
alert(aRr02[3]);//彈出4
/*創(chuàng)建二維數(shù)組,進(jìn)行操作*/
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。先找出整體,在找個(gè)體
/*join() 將數(shù)組成員通過一個(gè)分隔符合并成字符串*/
var aRr = [1,2,3,4];
//用-連接數(shù)組元素并轉(zhuǎn)為字符串
var sTr = aRr.join("-");//用-連接數(shù)組元素并轉(zhuǎn)為字符串,彈出1-2-3-4
var sTr = aRr.join('');//用空串連接
alert(sTr);//彈出1234
/*push() 和 pop() 從數(shù)組最后增加成員或刪除成員*/
/*向數(shù)組最后追加元素*/
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() 從數(shù)組前面增加成員或刪除成員*/
/*刪除第一個(gè)(索引為0的)元素*/
var aRr = [1,2,3,4];
aRr.shift();
alert(aRr);//2,3,4
/*reverse() 將數(shù)組反轉(zhuǎn)*/
//反轉(zhuǎn)
aRr.reverse();
alert(aRr);//4,3,2,1
/*indexOf() 返回?cái)?shù)組中元素第一次出現(xiàn)的索引值*/
//查找字母'b'第一次出現(xiàn)的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
alert(num);//1
/*splice() 在數(shù)組中增加或刪除成員*/
var aRr2 = ['a','b','c','d','a','b','c','d'];
//從第2索引元素開始,刪除1個(gè)元素
aRr2.splice(2,1);//刪除c
alert(aRr2);//a,b,d,a,b,c,d
//從第2索引元素開始,刪除1個(gè)元素,再插入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位開始,刪除四個(gè)元素,在插入4個(gè)元素
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
</head>
<body>
</body>
</html>
數(shù)組的去重
??在很多編程語言中,都會(huì)有去重,都是通過現(xiàn)有的數(shù)據(jù)類型或者函數(shù)來進(jìn)行操作,Js中我們可以自己寫一個(gè)簡(jiǎn)單,但是很有效的去重方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組去重</title>
<script type="text/javascript">
/* 定義一個(gè)數(shù)組 */
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
/*定義個(gè)空數(shù)組,用于存放去重之后的數(shù)組*/
var aRr2 = [];
/*在for循環(huán)的條件中寫上條件,循環(huán)的數(shù)就是下標(biāo)的的值*/
for(var i=0; i<aRr.length; i++){
//判斷元素第一次出現(xiàn)的位置,恰好是當(dāng)前循環(huán)的數(shù)時(shí),就將元素放入新數(shù)組
//不難理解的是:如果數(shù)組里面只有一個(gè)唯一的元素,那么它的索引值肯定循環(huán)所產(chǎn)生的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>
通過標(biāo)簽獲取元素
??在之前的代碼中我們都是通過唯一性的id來獲得,這次我們來通過標(biāo)簽獲得。
這里要記得的是,通過標(biāo)簽獲得元素時(shí),相當(dāng)于得到了一個(gè)選擇集合,就像數(shù)組一樣,我們可以通過下標(biāo)來得到具體的元素。所以這里不能直接修改元素的style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過標(biāo)簽獲取元素</title>
<script type="text/javascript">
window.onload = function(){
//獲取頁面上所有的li
var aLi = document.getElementsByTagName('li');//這里的elements可以理解成為,標(biāo)簽可以是多個(gè),而id只有一個(gè)
//獲取id為list01的ul
// var oList = document.getElementById('list01');
//再獲取這個(gè)ul下的所有l(wèi)i
// var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//12
// alert(aLi.length);//8
// aLi.pop();//錯(cuò)誤用法,aLi是一個(gè)類似數(shù)組的選擇集,沒有數(shù)組通用的一些方法
/*因?yàn)檫@里aLi獲取到的是一個(gè)數(shù)據(jù)集合,就像數(shù)組一樣,我們可以獲取長度,但是不能修改所有屬性
只能一個(gè)個(gè)的修改,當(dāng)然運(yùn)用循環(huán)修改會(huì)更輕松點(diǎn)。*/
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>
在上面的方法中,我們要掌握,數(shù)組的基本操作方法和去重,這個(gè)實(shí)用是,是很有效果的。