前端JavaScript入门-day03

news2024/11/17 11:53:12

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

1、循环-for

1. for 循环-基本使用

1. for循环语法

2. 退出循环 

2. for 循环嵌套 

2、数组 

1 数组是什么

2 数组的基本使用 

1. 声明语法

2. 取值语法 

3. 一些术语: 

4. 遍历数组(重点): 

3 操作数组

操作数组-新增 

arr.push()

arr.unshift

操作数组-删除

arr. pop()

数组. shift()

数组. splice()


1、循环-for

1. for 循环-基本使用

1. for循环语法

作用:重复执行代码
好处:把声明起始值、循环条件、变化值写到一起,让人一目了然 , 它是最常使用的循环形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(let i = 1;i<=3;i++)
        {
            document.write('加油<br>')
        }
    </script>
   
</body>
</html>

网页显示为:                      

2. 退出循环 

continue 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个for循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用

了解:
1. while(true) 来构造“无限”循环,需要使用break退出循环。
2. for(;;) 也可以来构造“无限”循环,同样需要使用break退出循环。

2. for 循环嵌套 

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

<!-- 九九乘法表 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span
        {
            display: inline-block;
            width: 100px;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            /* 圆角 */
            border-radius: 5px;
            /* 阴影 */
            box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
            background-color: rgba(255, 192, 203, .1);
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        for(let i=1;i<=9;i++)
        {
            for(let j =1;j<=i;j++)
            {
                document.write(`<span>${j}X${i}=${i*j}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

网页显示为:

2、数组 

1 数组是什么

数组:(Array)是一种可以按顺序保存数据的数据类型

2 数组的基本使用 

1. 声明语法

数组是按顺序保存,所以每个数据都有自己的编号
计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
在数组中,数据的编号也叫索引或下标
数组可以存储任意类型的数据 

2. 取值语法 

通过下标取数据
取出来是什么类型的,就根据这种类型特点来访问 

3. 一些术语: 

元素:数组中保存的每个数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得

4. 遍历数组(重点): 

用循环把数组中每个元素都访问到,一般会用for循环遍历

<!-- 需求:求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析:
①:声明一个求和变量 sum。
②:遍历这个数组,把里面每个数组元素加到 sum 里面。
③:用求和变量 sum 除以数组的长度就可以得到数组的平均值。 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[2,6,1,7,4]
        let sum = 0
        for(let i = 0;i<arr.length;i++)
        {
            sum += arr[i]
        }
        document.write(`数组的和为${sum}<br>`)
        document.write(`数组的平均值为${sum/arr.length}`)
    </script>
</body>
</html>

网页显示为:                        

3 操作数组

数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法:

操作数组-新增 

arr.push()

将一个或多个元素添加到数组的末尾,并返回该数组的新长度 (重点)

arr.unshift

将一个或多个元素添加到数组的 开头,并返回该数组的新长度 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=['123','456']
        //新增
        document.write(arr.push('789'))
        document.write('<br>')
        document.write(arr)
    </script>
</body>
</html>

网页显示为:                     

操作数组-删除

arr. pop()

从数组中删除最后一个元素,并返回该元素的值

语法:

例如:

数组. shift()

从数组中删除第一个元素,并返回该元素的值 

语法:


例如: 

数组. splice()

删除指定元素

语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[1,2,3,4,5,6,7]
        //删除2
        arr.splice(1,1)
        document.write(arr)
    </script>
</body>
</html>

网页显示为:                                       

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/687695.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

易点易动设备管理平台:为制药厂提升设备管理效率保驾护航

在高度竞争的制药行业中&#xff0c;设备管理对企业的生产效率和产品质量起着至关重要的作用。如何在保证设备安全、高效运行的同时&#xff0c;降低成本和提高设备利用率呢&#xff1f;易点易动设备管理平台为您提供了完美的解决方案。本文将详细阐述易点易动设备管理平台如何…

Linux搭建sqli-labs(sql注入实战)

目录 一、安装phpstudy 二、更改配置文件 三、加载数据库 一、安装phpstudy 需要php、mysql、httpd环境&#xff0c;phpstudy可以做到快速部署。 cd /opt yum install -y wget wget -O install.sh https://notdocker.xp.cn/install.sh && sudo bash install.sh wget…

Podman安装nacos使用(默认最新版)

一,命令熟悉 --name : 命名容器的名称. -d:表示在后台运行容器. -p:指定端口映射。如: 左边的8848是宿主机的端口,右边的8848是nacos容器内部的端口。 docker.io/nacos/nacos-server:表示根据docker.io/nacos/nacos-server镜像运行容器。 --restart=always 表示启…

【MySQL】看完这篇不信你学不会如何使用数据处理函数

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集&#xff01; &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指…

JDK的生成keytool证书

JDK的生成keytool证书 首先安装jdk环境 地址: https://www.oracle.com/downloads/ 点击页面下方的java 选择Java (JDK) for Developers 选择你的环境安装包&#xff0c;我的电脑是windows64位&#xff0c;选择x64 MSI Installer 下载完成后安装 进入jdk根路径执行命令 keytoo…

PaddleOCR #使用PaddleOCR进行光学字符识别 - OCR模型对比

PaddleOCR 在其工具包中提供了多种模型&#xff0c;并且非常易于应用。根据准确性和速度比较模型始终是一个好习惯。在本节中&#xff0c;我们将比较 PaddleOCR 提供的四种模型&#xff0c;即 SRN、PP-OCRv2、PP-OCRv3 和 NRTR。比较将在 COCO-text 数据集上进行&#xff0c;该…

【每日编程Day30】最难的问题 因子个数

目录 一、选择题 二、编程题 1、最难的问题 2、因子个数 一、选择题 &#xff08;1&#xff09;当包装类与基本数据类型比较&#xff0c;包装类会自动茶香变为基本数据类型再比较&#xff1b; &#xff08;2&#xff09;包装数据类直接赋值&#xff0c;默认调用其对用的val…

项目经理提高影响力的6大原则

在很多临时组建的项目团队中&#xff0c;项目经理往往处于权、责、利不匹配的尴尬状态&#xff0c;即有责无权。项目经理既需要对项目目标的实现负责&#xff0c;又没有相匹配的权利。 在这种情况下&#xff0c;项目经理不能通过权利进行团队管理&#xff0c;只能通过个人影响力…

cmd 108个常用命令,看看你知道多少

背景 一、CMD是什么 在不同的操作系统环境下&#xff0c;命令提示符各不相同&#xff0c;在Windows环境下&#xff0c;命令行程序为cmd.exe&#xff0c;是一个32 位的命令行程序。 cmd是指命令提示符&#xff0c;是在操作系统中&#xff0c;提示进行命令输入的一种工作提示符…

SpringBoot处理实际开发中常见的七种全局异常详解(全面详细+Gitee源码)

前言&#xff1a;在日常的开发工作中&#xff0c;项目在运行过程中多多少少是避免不了报错的&#xff0c;对于报错信息肯定不可以把全部信息都抛给客户端去显示&#xff0c;这里就需要我们对常见的七种异常情况统一进行处理&#xff0c;让整个项目更加优雅。 目录 一、基本介绍…

别迷茫!电子与通信相关专业,详细就业方向!

一、通信领域 1、算法工程师 算法工程师对我们来说&#xff0c;有两种可选择的方向&#xff0c;一种是通信算法工程师&#xff0c;一种是信号处理算法工程师。 通信算法工程师&#xff1a;需要对通信目标、干扰、杂波和信道模拟进行算法研究与数学仿真。了解4G和5G的相关技术。…

【Logback技术专题】「入门到精通系列教程」深入探索Logback日志框架的原理分析和开发实战技术指南(中篇)

深入探索Logback日志框架的原理分析和开发实战技术指南&#xff08;下篇&#xff09; Logback日志框架slf4j和logback的关系slf4jSlf4j的核心代码getLogger方法LoggerFactory的bind()方法 slf4j logback配置 log4j和logback的关系Logback的配置文件配置文件读取顺序 Logback配置…

告别StringUtil:使用Java 全新String API优化你的代码

前言 Java 编程语言的每一次重要更新&#xff0c;都引入了许多新功能和改进。 并且在String 类中引入了一些新的方法&#xff0c;能够更好地满足开发的需求&#xff0c;提高编程效率。 repeat(int count)&#xff1a;返回一个新的字符串&#xff0c;该字符串是由原字符串重复指…

MySQL数据库基础 16

第十六章 变量、流程控制与游标 1. 变量1.1 系统变量1.1.1 系统变量分类1.1.2 查看系统变量 1.2 用户变量1.2.1 用户变量分类1.2.2 会话用户变量1.2.3 局部变量1.2.4 对比会话用户变量与局部变量 2. 定义条件与处理程序2.1 案例分析2.2 定义条件2.3 定义处理程序2.4 案例解决 3…

灵魂组件Lifecycle的生命周期机制详解

作者&#xff1a;苏火火 前言 在早期 Andorid 架构中&#xff0c;生命周期的事件监听和状态查询&#xff0c;我们需要自定义一套提供侦测功能的 Activity/Fragment 基类及回调接口&#xff0c;在 Activity/Fragment 的生命周期方法中实现依赖组件的操作&#xff0c;在外部进行…

【并发编程】多线程安全问题,如何避免死锁

文章目录 概念进程线程对比 代码使用进程线程 线程创建方式线程的生命周期和状态停止线程方法介绍sleep() / wait()为什么 wait() 不被定义在 Thread 中&#xff1f;sleep() 定义在 Thread 中&#xff1f;run()/start() 为什么使用多线程&#xff1f;线程安全问题线程死锁如何避…

可孚医疗:「最懂互联网」的医疗器械企业是如何炼成的?

如果说钉钉在过去的标签是软件&#xff0c;是低代码。那么在医疗这个赛道里&#xff0c;这些标签已经不足以成为钉钉价值的侧写&#xff0c;除了固有标签之外&#xff0c;在可孚医疗的场景里&#xff0c;钉钉可以连接&#xff0c;可以成为智能BI&#xff0c;也更可以做到内外部…

(旧版) 家居购项目 1.分页导航 2.购物车 3.订单生成 4.权限验证 5.事务管理 6.上传图片

文章目录 &#x1f400;Java后端经典三层架构&#x1f407;MVC模型&#x1f407;开发环境搭建&#x1f407;会员注册&#x1f333;前端验证用户注册信息&#x1f333;思路分析&#x1f349;创建表&#x1f349;创建实体类&#x1f349;DAO&#x1f34c;MemberDAOImpl &#x1f…

kali磁盘空间不足,软连接解决apt下载问题

知识点&#xff1a; ①在Linux系统下(其他操作系统也有类似的规定)&#xff0c;磁盘的分区大致可以分为三类&#xff0c;分别为主分区、扩展分区和逻辑分区等等。 ②主分区可以有1-4个&#xff0c;扩展分区可以有0-1个&#xff0c;逻辑分区编号从5开始。 ③主分区可以直接进行格…

数据库信息速递 DataStax与谷歌合作将向NoSQL AstraDB引入向量搜索技术

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…