当前位置： 首页 > article >正文

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

article 2024/10/6 21:52:19

目录

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.效果


http://www.kler.cn/news/335116.html

相关文章：

  • 安装配置pytorch（cuda、、cudnn、torch、torchvision对应版本）
  • 大数据利器Hadoop：从基础到实战，一篇文章掌握大数据处理精髓！
  • 已解决：org.springframework.web.HttpMediaTypeNotAcceptableException
  • 免费!推荐10个可商用模特图片素材网站!
  • 实现Xshell与虚拟机中Linux服务器的连接（附常见错误解决）
  • vite学习教程06、vite.config.js配置
  • 54.二叉树的最大深度
  • 全栈开发从未如此轻松：Bolt.new 让 AI 助力编程体验
  • 药物识别与分类系统源码分享
  • c#代码介绍23种设计模式_19状态者模式
  • 【WPF开发】超级详细的“文件选择”（附带示例工程）
  • 华为手机连接蓝牙音响后播放声音小的问题分析
  • RCE+[伪协议综合]
  • 图像转3D视差视频：DepthFlow
  • Linux Cent7 已安装MySQL5.7.X，再安装MYSQL8.4.2
  • 视频加字幕免费软件哪个好用？详细介绍6款字幕编辑软件的优缺点！码住！
  • 网络威胁情报技术的进步
  • Watchdog Timers(WDT)
  • 【鼠鼠学AI代码合集#7】概率
  • Ubuntu换源