美文网首页
数组及操作方法

数组及操作方法

作者: 暴走的金坤酸奶味 | 来源:发表于2018-09-17 20:33 被阅读0次

    数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。

    定义数组的方法

    //对象的实例创建
    var aList = new Array(1,2,3);
    //直接量创建
    var aList2 = [1,2,3,'asd'];

    操作数组中数据的方法

    1、获取数组的长度:aList.length;

    var aList = [1,2,3,4];
    alert(aList.length); // 弹出4

    2、用下标操作数组的某个数据:aList[0];

    var aList = [1,2,3,4];
    alert(aList[0]); // 弹出1

    3、join() 将数组成员通过一个分隔符合并成字符串

    var aList = [1,2,3,4];
    alert(aList.join('-')); // 弹出 1-2-3-4

    4、push() 和 pop() 从数组最后增加成员或删除成员

    var aList = [1,2,3,4];
    aList.push(5);
    alert(aList); //弹出1,2,3,4,5
    aList.pop();
    alert(aList); // 弹出1,2,3,4

    5、unshift()和 shift() 从数组前面增加成员或删除成员

    var aList = [1,2,3,4];
    aList.unshift(5);
    alert(aList); //弹出5,1,2,3,4
    aList.shift();
    alert(aList); // 弹出1,2,3,4

    6、reverse() 将数组反转

    var aList = [1,2,3,4];
    aList.reverse();
    alert(aList); // 弹出4,3,2,1

    7、indexOf() 返回数组中元素第一次出现的索引值

    var aList = [1,2,3,4,1,3,4];
    alert(aList.indexOf(1));

    8、splice() 在数组中增加或删除成员

    var aList = [1,2,3,4];
    aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
    alert(aList); //弹出 1,2,7,8,9,4

    多维数组

    多维数组指的是数组的成员也是数组的数组

    var aList = [[1,2,3],['a','b','c']];
    alert(aList[0][1]); //弹出2;

    获取元素的第二种方法

    document.getElementsByTagName(''),获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的dom元素

    <!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');
    
                //获取id为list01的ul
                var oList = document.getElementById('list01');
                //再获取这个ul下的所有li
                var aLi = oList.getElementsByTagName('li');
                alert(aLi.length);//8
                // aLi.pop();//错误用法,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>
    

    相关文章

      网友评论

          本文标题:数组及操作方法

          本文链接:https://www.haomeiwen.com/subject/rqydnftx.html