首页 > 技术文章 > JavaScript-06 数组

mengwenbiao 2020-08-16 13:38 原文

一、数组

  数组:保存一组数据

二、定义数组的语法

  1. var 数组名=[]; 仅仅定义了一个数组。

  2. var 数组名=new Array(长度);定了数组,并且设置了长度;

  3. var 数组名=[值1,值2,……,值n];//定义了数组,有初始值,还有数组长度。

三、JavaScript数组的特点

  1.数组元素的数据类型可以不同。

  2.数组的长度可以随时改。

四、获取数组的长度: 数组名.length;

实例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>数组对象</title>
    </head>

    <body>
    </body>

    <script type="text/javascript">
        //定义数组
        var arr = ["张名川", '二愣子', "二嘎子", "瓜娃子", "宝批龙"];

        // 数组的 长度:数组名.length;
        var len = arr.length;
        //         alert(len);
        //获取数组中的元素值:数组名[下标]
        // 注意:下标是从0 开始 
        var mz = arr[0];
        // alert( arr[0]);

        //遍历数组中的元素:for , for in

        for(var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        //注意:item  是下标
        for(var item in arr) {
            console.log(arr[item]);
        }

        /*JavaScript 数组的特点
         * 1.数组元素的 数据类型可以不相同
         * 2.数组的长度可以随时改  
         * 
         * */
        var temp = [12, 3.14159, "9527", "狗剩", true, {
            s: "xx"
        }];
        document.write(temp);
        document.write("<br>");
        temp[10] = "新增元素";
        document.write(temp);

        var l = temp.length;
        alert(l);
        alert(temp[15]);
    </script>
</html>

五、数组的常用方法

  1.join()。把数组的所有元素拼接为一个字符串。以指定的分割符来分割元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个长度为3的数组
        // 数组下标从0开始
        var arr=new Array(3);
        arr[0]="123";
        arr[1]="456";
        arr[2]="789";
        document.write(arr.join());
        // 输出结果 123,456,789
    </script>
</html>

  2.sort()。对数组的元素进行排序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        var arr1 = ["ab","fba","sc2","d3","vhf5"];
        // 对数组的元素进行排序
        document.write(arr.sort());
        document.write("<br>");
        // 按abcd..排序,且按照第一个字符排序
        document.write(arr1.sort());
        // 输出 1,2,3,4,5,7,8,9
        //     ab,d3,fba,sc2,vhf5
    </script>
</html>

  3.concat()。连接两个或更多的数组,并返回结果。并没有修改数组,只是返回一个新的数组。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        var arr1 = ["ab","fba","sc2","d3","vhf5"];
        // 连接两个或更多的数组,并返回结果。并没有修改数组,只是返回一个新的数组
        var temp = arr.concat(arr1);
        document.write(temp);
        // 输出结果:1,9,2,3,7,5,4,8,ab,fba,sc2,d3,vhf5

    </script>
</html>

  4.slice(开始下标位置,结束下标位置)。截取数组,,返回截取的数组,原数组 不变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        // 返回数组下标为1到4的字符,[1,4),包括1,不包括4.
        document.write(arr.slice(1,4));
        // 输出结果:9,2,3

    </script>
</html>

  5. toString()。将数组对象转换成字符串。

    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        document.write(arr.toString());
        // 输出结果:1,9,2,3,7,5,4,8
    </script>

  6. reverse()。颠倒数组中元素的顺序。

    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        // 颠倒数组中元素的顺序。
        document.write(arr.reverse());
        // 输出结果:8,4,5,7,3,2,9,1
    </script>

  7. splice()。删除元素,并向数组添加新的元素。

    7.1数组名.splice(开始下标,长度)===>删除元素,并返回删除的元素。

    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        // 删除数组从0开,长度为2。对于上面的数组来说就是删除1和9
        document.write(arr.splice(0,2)); // 返回1,9
        document.write("<br>");
        document.write(arr);// 2,3,7,5,4,8
        // 输出结果:1,9
        //            2,3,7,5,4,8
    </script>

    7.2数组名.splice(开始下标,长度,新元素)===>替换

    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        // 数组名.splice(开始下标,长度,新元素)===>替换
        // 删除数组从0开,长度为2。对于上面的数组来说就是删除1和9,并替换
        document.write(arr.splice(0,2,8,8)); // 返回1,9,并用8,8替换1,9
        document.write("<br>");
        document.write(arr);// 返回新的数组8,8,2,3,7,5,4,8
        // 输出结果:1,9
        //            8,8,2,3,7,5,4,8
    </script>

    7.3数组名.splice(开始下标,0,新元素)===插入

    <script type="text/javascript">
        // 定义一个数组
        var arr = [1,9,2,3,7,5,4,8];
        // 数组名.splice(开始下标,0,新元素)===插入
        // 在下标为1之前插入一个10的元素
        arr.splice(1,0,10); 
        document.write(arr);
        // 输出结果:1,10,9,2,3,7,5,4,8
    </script>

  8. push()。向数组的末尾添加一个或更多的元素,并返回新长度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组,长度为8
        var arr = [1,9,2,3,7,5,4,8];
        // 向数组的末尾添加一个或更多的元素,并返回新长度。
        document.write(arr.push(20)); // 返回arr.leng,长度变为9;
        document.write("<br>");
        document.write(arr);
        // 1,9,2,3,7,5,4,8,20
    </script>
</html>

  9. pop()。删除数组末尾元素并返回数组的最后一个元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组,长度为8
        var arr = [1,9,2,3,7,5,4,10];
        //删除数组末尾元素并返回数组的最后一个元素。
        document.write(arr.pop()); //删除10,并返回10
        document.write("<br>");
        document.write(arr);// 1,9,2,3,7,5,4
    </script>
</html>

  10. unshift()。向数组的开头添加一个或更多的元素,并返回新的长度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组,长度为8
        var arr = [1,9,2,3,7,5,4,8];
        // 向数组的开头添加一个或更多的元素,并返回新的长度。。
        document.write(arr.unshift(10)); // 返回arr.leng,长度变为9;
        document.write("<br>");
        document.write(arr);// 10,1,9,2,3,7,5,4,8
    </script>
</html>

  11. shift()。删除并返回数组的第一个元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定义一个数组,长度为8
        var arr = [1,9,2,3,7,5,4,8];
        // 删除并返回数组的第一个元素。
        document.write(arr.shift()); // 返回1
        document.write("<br>");
        document.write(arr);// 9,2,3,7,5,4,8
    </script>
</html>

 

 

推荐阅读