javaScript数组(16个案例+代码+效果图)

已于 2024-10-06 18:49:17 修改
阅读量1.2k 收藏 25
点赞数 18
分类专栏： js知识梳理 文章标签： javascript css html html5 vscode 前端
于 2024-10-06 18:32:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142730189
版权

目录

1.数组的概念

2.创建数组

1.通过数组字面量创建数组

1.代码

2.效果

2.通过new Array()创建数组

1.代码

2.效果

3.数组的基本操作

1.获取数组的长度

案例:获取数组的长度

1.代码

2.效果

2.修改数组的长度

1.代码

2.效果

4.访问数组

案例:访问数组

1.代码

2.效果

5.遍历数组

1.for循环遍历数组

案例:通过for循环遍历数组

1.代码

2.效果

2.通过while遍历数组

案例:通过while遍历数组

1.代码

2.效果

3.通过do..while遍历数组

案例:通过do..while遍历数组

1.代码

2.效果

4.通过for in 遍历数组

案例:通过for in 遍历数组

1.代码

2.效果

5.通过for  of 遍历数组

案例:通过for...of循环遍历数组

1.代码

2.效果

6.通过foreach遍历数组

案例:通过foreach遍历数组

1.代码

2.效果

7.通过foreach+箭头函数遍历数组

1.代码

2.效果

6.为数组添加元素

案例：为数组添加一个元素

2.效果

7.修改数组中的元素

案例:修改数组中的元素

1.代码

2.效果

8.删除数组中的元素

案例:删除数组中的元素

1.代码

2.效果

9.二维数组

案例:二维数组的遍历

1.代码

2.效果

1.数组的概念

        数组是一种线性数据结构，它允许存储和管理多个值（元素）于单个变量名之下。在JavaScript中，数组可以包含任意类型的数据，并且长度是可变的。

注:javaScript中的数组里面存取的东西可以相同类型的数据类型，也可以是不同的数据类型。

//创建一个课程名字数组

var myClassNameArray = ["语文","数学","英语","高数","java","spring","javaScript"]

javascript中的数组有索引，内容，大致抽象为下图

2.创建数组

1.通过数组字面量创建数组

//创建一个空数组

var myFirstNullArray=[] 

//创建一个含数据的数组

var myTwoArray = ["语文","数学","英语","高数","java","spring","javaScript"]

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初步认识数组</title>

</head>

<body>

    <script>
        //创建一个空数组

        var myFirstNullArray = []
        console.log(myFirstNullArray);

        //创建一个含数据的数组

        var myTwoArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        console.log(myTwoArray);
    </script>
</body>

</html>

2.效果

2.通过new Array()创建数组

//通过new Array()创建空数组

var createArrayByNewArray =  new Array();

//通过new Array() 创建一个长度为3的数组

var createArrayLengthBynewArray = new Array(3);

//通过new Array() 创建包含数据的数组

var createArrayContainInfoByNewArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"])

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过new Array创建数组</title>

</head>

<body>

    <script>
        //通过new Array()创建空数组

        var createArrayByNewArray = new Array();
        document.write("createArrayByNewArray"+createArrayByNewArray);
        document.write("<br>");

        //通过new Array() 创建一个长度为3的数组

        var createArrayLengthBynewArray = new Array(3);
        document.write("createArrayLengthBynewArray"+createArrayLengthBynewArray);
        document.write("<br>");

        //通过new Array() 创建包含数据的数组

        var createArrayContainInfoByNewArray = new Array(["语文", "数学", "英语", "高数", "java", "spring", "javaScript"])
        document.write("createArrayContainInfoByNewArray"+createArrayContainInfoByNewArray);
    </script>
</body>

</html>

2.效果

3.数组的基本操作

1.获取数组的长度

通过array.length 获取数组的长度

var myArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"]);

console.log("数组的长度为："+myArray.length)

案例:获取数组的长度

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取数组的长度</title>
</head>
<body>
    
    <script>
        //获取数组的长度

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        console.log(myArray.length);

    </script>
</body>
</html>

2.效果

2.修改数组的长度

为array.length修改数组的值

var myArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"]);

console.log("数组的长度为："+myArray.length)

myArray.length=10;

console.log("数组的长度为："+myArray.length)

console.log("数组的内容为："+myArray)

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改数组的长度</title>
</head>

<body>
    <script>
        var myArray = new Array(["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]);

        console.log("数组的长度为：" + myArray.length)

        myArray.length = 10;



        console.log("数组的长度为：" + myArray.length)

        console.log("数组的内容为：" + myArray)
    </script>

</body>

</html>

2.效果

4.访问数组

注:通过数组的索引访问数组中的元素，索引不能超过数组的最大长度

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"];

        //访问数组中的元素

        console.log(myArray[0]);

        console.log(myArray[1]);

        console.log(myArray[5]);

        console.log(myArray[3]);

案例:访问数组

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问数组</title>
</head>
<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"];

        //访问数组中的元素

        console.log(myArray[0]);
        console.log(myArray[1]);
        console.log(myArray[5]);
        console.log(myArray[3]);


    </script>
</body>
</html>

2.效果

看右边控制台输出

5.遍历数组

1.for循环遍历数组

for (var i = 0; i < myArray.length; i++) {

            document.write("这是第" + i + "的内容:" + myArray[i] + "<br>");

}

案例:通过for循环遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过for循环遍历数组</title>
</head>

<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        /**
         * for循环遍历数组
         */
        document.write("通过for循环遍历数组");
        for (var i = 0; i < myArray.length; i++) {
            document.write("<br>");
            document.write("这是第" + i + "的内容:" + myArray[i] + "<br>");
            document.write("<br>");

        }
    </script>

</body>

</html>

2.效果

2.通过while遍历数组

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        //通过while循环遍历数组

        document.write("通过while循环遍历数组");

        var j = 0;

        while (j < myArray.length) {

            document.write("<br>");

            document.write("这是第" + j + "的内容:" + myArray[j]);

            j++;

        }

案例:通过while遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过while循环遍历数组</title>
</head>

<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        //通过while循环遍历数组
        document.write("通过while循环遍历数组");
        var j = 0;
        while (j < myArray.length) {
            document.write("<br>");
            document.write("这是第" + j + "的内容:" + myArray[j]);

            j++;

        }
    </script>

</body>

</html>

2.效果

3.通过do..while遍历数组

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        /**

         * do...while循环遍历数组

         */

        document.write("通过do...while循环遍历数组");

        var k = 0;

        do {

            document.write("<br>");

            document.write("这是第" + k + "的内容:" + myArray[k]);

         

            k++;

        } while (k < myArray.length);

案例:通过do..while遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过doWhile遍历数组</title>
</head>
<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        /**
         * do...while循环遍历数组
         */
        document.write("通过do...while循环遍历数组");
        var k = 0;
        do {
            document.write("<br>");
            document.write("这是第" + k + "的内容:" + myArray[k]);
          
            k++;

        } while (k < myArray.length);
    </script>

    
</body>
</html>

2.效果

4.通过for in 遍历数组

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("<hr>");

        document.write("通过for...in循环遍历数组");

        for (var item in myArray) {

            document.write("<br>");

            document.write("这是第" + item + "的内容:" + myArray[item]);

        }

        document.write("<hr>");

案例:通过for in 遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过for in 遍历数组</title>

</head>

<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        document.write("<hr>");
        document.write("通过for...in循环遍历数组");
        for (var item in myArray) {
            document.write("<br>");
            document.write("这是第" + item + "的内容:" + myArray[item]);

        }
        document.write("<hr>");
    </script>
</body>

</html>

2.效果

5.通过for  of 遍历数组

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        document.write("<hr>");
        document.write("通过for...of循环遍历数组");
        for (var item of myArray) {

            document.write("这是第" + item + "的内容:" + item);
            document.write("<br>");
        }
        document.write("<hr>"); 

案例:通过for...of循环遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过for...of循环遍历数组</title>
</head>

<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        document.write("<hr>");
        document.write("通过for...of循环遍历数组");
        for (var item of myArray) {

            document.write("这是第" + item + "的内容:" + item);
            document.write("<br>");
        }
        document.write("<hr>"); 
    </script>
</body>

</html>

2.效果

6.通过foreach遍历数组

案例:通过foreach遍历数组

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过foreach遍历函数</title>
</head>
<body>
    <script>
        //通过foreach遍历函数

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("<hr>");
        document.write("通过forEach循环遍历数组");

        myArray.forEach(function (item, index) {
            document.write("<br>");
            document.write("这是第" + index + "的内容:" + item);

        })


    </script>
    
</body>
</html>
2.效果

7.通过foreach+箭头函数遍历数组

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        //通过foreach遍历数组
        document.write("通过foreach+箭头函数遍历数组");

        myArray.forEach(item => {

            document.write("<br>");

            document.write("这是第" + item + "的内容:" + item);

        })
 

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过foreach+箭头函数遍历数组</title>
</head>
<body>
    
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        //通过foreach遍历数组
        document.write("通过foreach+箭头函数遍历数组");

        myArray.forEach(item => {

            document.write("<br>");

            document.write("这是第" + item + "的内容:" + item);

        })

    </script>
    
</body>
</html>

2.效果

6.为数组添加元素

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        document.write(myArray);
        document.write("<br>");
        //通过push向数组中添加一个元素

        myArray.push("javaEE");

        document.write("通过push向数组中添加一个元素");

        document.write("<br>");

        document.write(myArray);

案例：为数组添加一个元素

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为数组添加一个元素</title>
</head>
<body>
    
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
        document.write(myArray);
        document.write("<br>");
        //通过push向数组中添加一个元素

        myArray.push("javaEE");

        document.write("通过push向数组中添加一个元素");

        document.write("<br>");

        document.write(myArray);

    </script>
</body>
</html>

2.效果

7.修改数组中的元素

.通过索引去修改元素 数组[索引]

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("修改前的数组为："+myArray);

        document.write("<hr>");

        //修改数组中的元素

        myArray[0] = "语文改";

        myArray[1] = "数学改";

        myArray[2] = "英语改";

        myArray[3] = "高数改";

        myArray[4] = "java改";

        myArray[5] = "spring改";

       

        document.write("修改后的数组为："+myArray);

案例:修改数组中的元素

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改数组中的元素</title>
</head>
<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("修改前的数组为："+myArray);
        document.write("<hr>");
        //修改数组中的元素

        myArray[0] = "语文改";

        myArray[1] = "数学改";

        myArray[2] = "英语改";

        myArray[3] = "高数改";

        myArray[4] = "java改";
        myArray[5] = "spring改";

       
        document.write("修改后的数组为："+myArray);

    </script>
    
</body>
</html>

2.效果

8.删除数组中的元素

注:splice(从索引位置开始,删除几个元素)

        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("删除数组中的元素前："+myArray);
        document.write("<br>");
        //删除数组中的元素

        myArray.splice(2,1);

       
        document.write("删除数组中的元素后："+myArray);

案例:删除数组中的元素

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除数组中的元素</title>
</head>
<body>
    <script>
        var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]

        document.write("删除数组中的元素前："+myArray);
        document.write("<br>");
        //删除数组中的元素

        myArray.splice(2,1);

       
        document.write("删除数组中的元素后："+myArray);

    </script>
    
</body>
</html>

2.效果

9.二维数组

数组的数组

案例:二维数组的遍历

注：这里只使用嵌套for循环遍历，除了这个还可通过

for in 嵌套，

while嵌套，

do....while嵌套，

foreach嵌套遍历，

for of 嵌套遍历，

foreach+箭头函数嵌套遍历，

等

有兴趣自己可以试一下，我这里便不在做案例了

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维数组的遍历</title>
</head>
<body>
    <script>
        //二维数组的遍历

        var myArray = [
            ["语文", "数学", "英语"],
            ["高数", "java", "spring"],
            ["javaScript", "html", "css"]
        ];

        //通过for循环遍历二维数组

        for(var i = 0; i < myArray.length; i++){

            for(var j = 0; j < myArray[i].length; j){
                document.write("<br>");
                document.write("这是第" + i + "行，第" + j + "列的内容：" + myArray[i][j]);
            }
        }
    </script>
    
</body>
</html>

2.效果

惜.己
关注
专栏目录
JavaScript基础篇——数组案例合集
m0_47182519的博客
11-08 542
出场四次洒出
JavaScript基础案例+代码
qq_48687155的博客
08-17 1119
前端基础Javascript练习题
4个错误使用JavaScript数组方法的案例
Fundebug博客
09-06 2336
译者按： 做一个有追求的工程师，代码不是随便写的！ 原文: Here’s how you can make better use of JavaScript arrays 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java线上b...
JavaScript数组案例
余月初贰的博客
06-21 724
例题1.将数组[12,34,2,5,76]中数字内容求和2.将数组[4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]中的0项去掉，将不为0的值存入一个新的数组3.求[12,34,2,5,76]数组中最大值4.往数组[10,2]里面添加数据至数组的长度为5,但不要出现重复数据5.[1,3,5,2,1,4,3,1,2,5,3,1,2,1]对该数组去除重复数据部分解析1.第一题 浏览器显示效果2.第二题 浏览器显示效果 3.第三题 浏览器显示效果 4.第五题 浏览器显示效果.
JS数组例子
05-04
Javascript数组例子，JS数组例子
js中数组的例子
无
06-29 576
js中数组的例子 //C# 面向对象编程 //Student s=new Student(); //创建了一个数组对象 var ar=new Array(); var ar2=new Array(5); var ar3=new Array("苹果","香蕉","栗子","芒果"); var ar4=["苹果","香蕉","栗子","芒果"]; //方法一 for(va
原生javascript实现图片轮播效果代码
12-03
在这个案例中，主要依赖于JavaScript的定时器（setTimeout）和透明度控制（fadeIn/fadeOut）来创建平滑的过渡效果。HTML和CSS部分负责布局和样式，这部分内容在此不再赘述。 **关键函数解析** 1. **id(name)**: 这...
JavaScript实现的多个图片广告交替显示效果代码
10-23
最后，以上内容总结了JavaScript实现多个图片广告交替显示效果代码的主要知识点，涉及数组操作、定时器使用和DOM元素操作等关键点，并且建议在实际开发中进行适当的扩展和兼容性测试，以满足不同项目的具体需求。
当当网上书店案例代码+css+js+images
10-28
当当网上书店案例代码是一个综合性的项目，涵盖了前端开发中的多个关键知识点，主要涉及CSS、JavaScript和图片处理。下面将详细解析这些知识点。 首先，**购物车案例** 是电商网站的核心功能之一，它涉及到数据存储...
JavaScript数组对象及其方法详解
zhangawei123的博客
10-28 1143
本文章讲解JavaScript中的数组对象以及其相关方法。包括了数组的遍历，数组内容的增删改，数组元素的擦护照检索，数组的排序，数组的迭代等方法。内容比较齐全，希望可以帮助大家。
总结javascript数组的14个常用方法(带实例)
生命不息 奋斗不止
10-10 1017
1)concat： 功能：用于连接两个或多个数组 参数：可以是具体的值，也可以是数组对象，可以是任意多个。 返回值：返回一个新数组。该数组是通过把所有参数添加到原数组中而生成的。如果参数是数组对象，添加的是数组中的元素。 原数组是否改变：不会改变原数组，返回被连接数组的一个副本。 var a=[11,12,13,14]; var b=[21,22,23,24];
JavaScript Array 数组对象实例集合
最新发布
梁辰兴的博客
03-10 625
源码DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 梁辰兴实例 < body > < p id = " demo " > 单击按钮删除数组的最后一个元素。
js数组小案例
qq_39232387的博客
12-16 359
1.求数组最大值 var arr = [2,45,33,87]; var max = arr[0]; for (var i = 1; i < arr.length; i++) { if(arr[i] > max) { max = arr[i] } } console.log(max) 2.求数组所有数的和以及平均值 var arr = [2,45,33,87]; var sum = 0; var average = 0; for (var i = 0; i < arr.lengt
JS基础：数组及案例
weixin_49555741的博客
04-26 1062
1. 数组概念 一个变量只能存储一个值，多个变量可用使用数组（arry）存储 数组是一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素 数组是一种数据存储在单个变量名下的方式 2. 创建数组 JS中创建数组有两种方式： 用 new 创建 用数组字面量创建（常用） 2.1 用 new 创建 var arr =new Array(); 注意 A要大写 到创建对象时会使用到 2.2 用 数组字面 [ ] 创建 var arr = []; //创建一个空的 arr .
js（四）——ECMAScript基础之数组
C-A-L-D
02-03 214
数组的定义 数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 通过数组字面量创建数组 // 创建一个空数组 var arr1 = []; // 创建一个包含3个数值的数组，多个数组项以逗号隔开 var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组 var arr3 = ['a', 'c']; ​ // 可以通过数组的len...
javascript中数组案例
一只苟延残喘的卑微蝼蚁
01-03 930
以下是源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中数组案例</title> <link rel="stylesheet" type="text/css" href="inputAndDiv...
JavaScript案例：数组
Python小哥的博客
02-14 341
1. 数组显示到页面中 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul id="ulScore"></ul> <script> var scoreList = [600,650,700,7...
JavaScript实现新浪图片轮播效果
这个代码片段展示了如何使用纯JavaScript实现一个基本的图片轮播效果，没有依赖任何外部库，对于学习JavaScript和网页动态效果的开发者来说是一个很好的实践案例。通过调整和扩展这个代码，可以适应不同的网页设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值