数组及操作方法

2018-09-17 本文已影响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>