web進(jìn)階之二十一:數(shù)組及其操作方法

??在很多編程語言中都有數(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í)用是,是很有效果的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 城里下著大雨 殺手一步步逼近 鄰居接二連三全都死在槍口之下 她們像瘋了一樣開著卡車尋找活口的人 我像極了釜山行里面...
    莓子果醬閱讀 309評(píng)論 0 0
  • 面具這個(gè)東西咋來的?應(yīng)該沒有這個(gè)詞語,才能讓人不裝,裝的太累,太苦,超過苦咖啡! 我受不了苦,服務(wù)員為我斟...
    同樂小學(xué)幼兒園平視教育閱讀 340評(píng)論 0 1
  • 我走向你 走向春天、梨兒樹、高高的棕櫚 走向幻想的小屋和飛翔的鳥語 當(dāng)我驕傲的心開始疲倦 我的愛山巒般時(shí)伏時(shí)起 你...
    失業(yè)獵手閱讀 561評(píng)論 1 3
  • 很多朋友會(huì)抱怨為什么電腦會(huì)越用越卡 ,除了電腦本身配置以外,絕大多數(shù)還是因?yàn)闆]有定期 清理電腦垃圾 下面分享幾個(gè)簡(jiǎn)...
    MSFT方閱讀 1,181評(píng)論 2 20

友情鏈接更多精彩內(nèi)容