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

目录

1.for循环

1.1for循环基本使用

1.2for和while的区别

1.3.退出循环

1.4.循环嵌套

2.数组

2.1.数组的基本使用

2.2.操作数组

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

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

 2.2.3.数据添加新的数据

2.2.4.删除数组中的数据


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>

结果如图:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值