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

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量954 收藏
点赞数
分类专栏： # JS基础 文章标签： javascript 前端 servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wusandaofwy/article/details/126089501
版权

目录

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
    评论
专栏目录
JavaScript中利用for循环遍历数组
10-20
然而，根据描述和提供的代码示例，这里强烈推荐使用`for`循环来遍历数组，而不是`for...in`循环。 首先，让我们来看看`for`循环遍历数组的基本语法： ```javascript var arr = [3, 5, 2, 6]; for (var i = 0; i ...
利用javascript数组长度循环数组内所有元素
10-26
3. **遍历数组**：除了`for`循环，还可以使用`for...of`循环、`forEach()`方法、`map()`方法等来遍历数组。例如： ```javascript for (let item of arr) { console.log(item); } arr.forEach(function(element...
JavaScript-for循环-数组
m0_60502378的博客
10-02 805
数组方法 for循环
JavaScript for... of 循环
zsx0728的博客
05-09 6362
文章目录JavaScript for...of 循环for...of 与数组for...of 与字符串for...of 与 Setfor...of 与 Map用户定义的迭代器for...of 与生成器for...of Vs for...in参考文档     在本教程中，您将借助示例了解 JavaScript for…of 循环。     在 JavaScript 中，我们可以通过三种方式使用for循环。 JavaScript for 循环 JavaScript for…in 循环 JavaScript f
Js基础(for循环语句 数组)
Hw111520的博客
07-31 2276
Js基础(for循环语句 数组 )
JavaScript中for循环数组的方法
QUX轻博客
09-08 1336
1.常规循环：通过自定义下标，依次循环出数组的值 let a = [1,2,3,4,5,6,7]; // 普通循环 for(var i = 0;i<a.l...
【JavaScript保姆级教程】for循环与for循环遍历数组
m0_62599305的博客
11-02 2999
JavaScript是一门强大的编程语言，它允许开发者有效地控制程序的流程。在JavaScript中，有多种循环结构可供选择，其中for循环是最常用的之一。本教程将深入探讨for循环的基本概念，提供示例代码，并展示如何使用for循环来遍历数组。同时，我们还将介绍如何在for循环中嵌套使用while循环。无论你是初学者还是有经验的开发者，都会从这篇教程中受益匪浅。For循环是一种常见的迭代结构，它允许我们重复执行一段代码多次。它通常由三个关键部分组成：初始化、条件和迭代。
javascript for循环实现数组反转
qq_54250695的博客
06-17 1050
javascript for循环实现数组反转
JavaScript使用for循环遍历数组
m0_59878114的博客
07-21 1880
<script> //定义一个数组 letarr=['马超','赵云','张飞','关羽','黄忠'] //遍历数组 for(leti=0;i<arr.length;i++){ //在页面上运行 document.write(`${arr[i]}`) } </script> ...
JavaScript数据结构【数组---for...of循环迭代】
Flying____fish的博客
12-11 920
继for循环，和forEach方法迭代数组后，要想迭代数组的值还可以用for...of循环// for...of循环示例}/*输出：123*/可以看到：使用for...of循环迭代整个数组还是比较方便，方便取到值并且使用，示例所示并非仅可以迭代数组，更多可参见直接多给个参数？不行，key的位置只能容得下一个参数，装不下其他参数了；有问题自然是有对应解决措施方法返回一个包含数组中每个索引键的对象}/*输出：012*/
3.JavaScript基础语法.zip
01-29
这个名为"3.JavaScript基础语法.zip"的压缩包很可能包含了一堂关于JS基础的视频教程，帮助初学者理解这门语言的核心概念。在深入探讨JavaScript的基础语法之前，我们先来了解一下JavaScript的基本定位和应用范围。 ...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1333
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 869
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 255
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 211
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 354
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
javascript数组for循环
07-30
在JavaScript中，使用for循环遍历数组是一种常见的方法。可以通过循环变量逐一访问数组元素。下面是一个示例代码： const arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 这段代码中，我们定义了一个数组arr，然后使用for循环遍历数组中的每个元素，并通过console.log打印出来。循环变量i从0开始，每次循环递增1，直到i小于数组长度为止。在循环体内，通过arr[i]可以获取到当前循环的数组元素。这样就可以依次访问数组中的每个元素了。[1] 除了上述常规的for循环，还可以使用其他的for循环形式来遍历数组。例如，可以使用forEach方法来遍历数组，它提供了更简洁的语法： const arr = [1, 2, 3, 4, 5]; arr.forEach(function(element) { console.log(element); }); 这段代码中，我们调用了数组的forEach方法，传入一个回调函数作为参数。回调函数中的element参数表示当前遍历的数组元素，通过console.log(element)可以打印出每个元素。forEach方法会自动遍历数组中的每个元素，并依次执行回调函数。[2] 另外，还可以使用for...of循环来遍历数组，它提供了更简洁的语法： const arr = [1, 2, 3, 4, 5]; for (let element of arr) { console.log(element); } 这段代码中，我们使用for...of循环遍历数组arr，每次循环将当前元素赋值给变量element，然后通过console.log(element)打印出来。for...of循环会自动遍历数组中的每个元素，并依次执行循环体。[3] 总结起来，JavaScript中可以使用for循环、forEach方法或for...of循环来遍历数组，根据实际需求选择合适的方式即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值