3.JavaScript 基础(for循环，数组)

最新推荐文章于 2024-07-29 11:53:27 发布

风无雨

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量954

点赞数

分类专栏： # JS基础文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/wusandaofwy/article/details/126089501

版权

JS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.for循环

1.1for循环基本使用

// 语法

// for (起始条件; 退出条件; 变换量) {

// 循环语句

// }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 语法
        // for (起始条件; 退出条件; 变换量) {
        //     循环语句
        // }
        // for (let i = 1; i <= 10; i++) {
        //     console.log('月薪过万');
        //     document.write(`月薪过万<br>`)
        // }
        // 输出1-100岁
        //    for (let i = 1; i <= 100; i++) {

        //     document.write(`我今年${i}岁了<hr>`)
        // }
        // 求1-100所有偶数的和
        // let sum = 0
        // for (let i = 1; i <= 100; i++) {
        //     if (i % 2 === 0) sum = sum + i
        // }
        // document.write(sum)

        // 页面打印五个小星星
        for (let i = 0; i < 5; i++) {
           document.write('🎇')
        }
       
    </script>
</body>

</html>

1.2for和while的区别

// for循环:明确了循环的次数时推荐使用for循环

// while循环:当不明确循环的次数时推荐使用while循环

1.3.退出循环

// continue :结束本次循环,继续下次循环

// break:跳出循环,结束循环

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // continue :结束本次循环,继续下次循环
        // break:跳出循环,结束循环

        for (let i = 1; i < 6; i++) {
            if (i === 2) {
                continue//退出本次循环,继续下次循环
            }
            if (i === 4) {
                break  //直接跳出循环并且结束循环
            }
            document.write(i)

        }
    </script>
</body>

</html>

1.4.循环嵌套

一个循环里再套一个循环，一般用在for循环里

// 外面循环执行一次,里面循环执行全部

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            height: 50px;
            width: 80px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;background-color:#6db86b ;
        }
    </style>
</head>

<body>
    <script>
        // 打印五行五列小星星
        // for (let i = 0; i < 5; i++) {
        //     for (let j = 0; j < 5; j++) {
        //         document.write('🎇')
        //     }
        //     document.write('<br>')
        // }

        // 打印倒三角星星
        // for (let i = 1; i <= 5; i++) {
        //     for (let j = 1; j <= i; j++) {
        //         document.write("🚀")
        //     }
        //     document.write("<br>")

        // }

        // 打印九九乘法表
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<div>${j}&times;${i}=${i * j}</div>`)

            }
            document.write("<br>")
        }
    </script>

</body>

</html>

2.数组

2.1.数组的基本使用

// 数组 Array 是一种按顺序保存顺序的数据类型

  // 声明
//方法一  字面量方法
        const names1 = ['王五', '李强', '陈龙']
//方法二
        const names2 = new Array('王五', '李强', '陈龙')
        console.log(names1);
        console.log(names2);

// 取值数组名[下标] 下标从零开始

// 数组长度数组名.length

遍历数组:

        // let num = [100, 123, 231, 54, 65, 7567]
        // for (let i = 0; i < num.length; i++) {
        //     document.write(num[i]);
        // }

     // 需求：求数组 [2,6,1,77,52,25,7] 中的最大值
        let num = [6, 25, 7, 23, 89, 13]
        // 声明最大值的变量
        let max = num[0]
        // 声明最小值的变量
        let min = num[0]
        // max和min的初始为第一个数,要和第二个数相比较所以for循环中i以1开始
        for (let i = 1; i < num.length; i++) {
            if (max < num[i]) {
                max = num[i]
            }
            if (min > num[i]) {
                min = num[i]
            }
        }
        document.write(`<hr>最大值为${max}<br>最小值为${min}`)

2.2.操作数组

// 操作数据 : 增删改查

2.2.1.查询数组数据数组名[下标]

        console.log(score[3]);

2.2.2.重新赋值数组[下标]=新值

        score[0] = '齐天大圣'

2.2.3.数据添加新的数据

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

        //  push添加元素到数组末位,并返回该数组新长度
        console.log(score[5]);//此时无内容 undefined
        let x = score.push('牛魔王')//添加元素到数组末位
        console.log(score[5]);//此时有内容
        console.log(x);
        // unshift()添加元素到数组首位,并返回该数组新长度
        score.unshift('天蓬元帅', '弼马温')

2.2.4.删除数组中的数据

数组.pop() 方法从数组中删除最后一个元素，并返回该元素的值

数组.shift() 方法从数组中删除第一个元素，并返回该元素的值

数组. splice() 方法删除指定元素 splice(起始位置,删除几个元素)

 // pop() 删除最后一个元素 返回值是删除的元素
        console.log(score);
        const res = score.pop();
        console.log(res);
        console.log(score);
        
        //  shift  删除第一个元素 返回值是删除的元素
        score.shift()
        console.log(score);
        // splice(起始位置,删除几个元素)指定删除元素
        // 起始位置为下标,从0开始
        score.splice(3, 1)
        console.log(score);

总代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 操作数据 : 增删改查
        const score = ['孙悟空', '花果山', '500', '八九玄功', '五指山']
        // 1.查询数组数据 数组名[下标]
        console.log(score[3]);

        // 2.重新赋值 数组[下标]=新值
        score[0] = '齐天大圣'
        console.log(score[0]);

        // 3.数据添加新的数据 
        //  push添加元素到数组末位,并返回该数组新长度
        console.log(score[5]);//此时无内容 undefined
        let x = score.push('牛魔王')//添加元素到数组末位
        console.log(score[5]);//此时有内容
        console.log(x);
        // unshift()添加元素到数组首位,并返回该数组新长度
        score.unshift('天蓬元帅', '弼马温')

        // 4.删除数组中的数据
        // pop() 删除最后一个元素 返回值是删除的元素
        console.log(score);
        const res = score.pop();
        console.log(res);
        console.log(score);
        
        //  shift  删除第一个元素 返回值是删除的元素
        score.shift()
        console.log(score);
        // splice(起始位置,删除几个元素)指定删除元素
        // 起始位置为下标,从0开始
        score.splice(3, 1)
        console.log(score);


    </script>
</body>

</html>

结果如图: