前端JavaScript入门-day03

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

目录

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 = 0for(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]//删除2arr.splice(1,1)document.write(arr)</script>
</body>
</html>

网页显示为:                                       

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

18.RocketMQ中消息重复的场景和幂等处理

highlight: arduino-light 消息重复的场景 发送消息异常,重试发送导致消息重复★ 当一条消息已被成功发送到服务端并完成持久化。此时出现网络闪断或者客户端宕机&#xff0c;导致服务端对生产者的确认应答失败。生产者发送消息到mq时发送成功未获取到响应,然后生产者进行消息发…

java.util.concurrent.Executionexception 异常

报错截图&#xff1a; 今天运行时发生了如下报错。自己捣鼓半天也没发现问题出在哪儿&#xff0c;感谢大佬的帮助&#xff0c;记录下来防止再犯。。 caused by org.apache.flink.client.program.programInvocationException: Job failed。程序调用异常。网上找了很多解决方法…

数字图像处理-图像复原与重建

文章目录 一、图像退化/复原过程的模型二、噪声模型2.1噪声的空间和频率特性2.2一些重要的噪声概率密度函数2.2.1高斯噪声2.2.2瑞利噪声2.2.3爱尔兰&#xff08;伽马&#xff09;噪声2.2.4指数噪声2.2.5均匀噪声2.2.6脉冲&#xff08;椒盐&#xff09;噪声 2.3周期噪声 三、只存…

移动WEB开发之rem适配布局

css基础&#xff08;一&#xff09;css基础&#xff08;一&#xff09;_上半场结束&#xff0c;中场已休息&#xff0c;下半场ing的博客-CSDN博客Emmet语法Emmet语法_上半场结束&#xff0c;中场已休息&#xff0c;下半场ing的博客-CSDN博客css基础&#xff08;二&#xff09;c…

什么是AOP?

目录 一、AOP简介 1、AOP简介和作用 2、AOP的概念 二、AOP的基本实现 三、AOP工作流程 1 、AOP工作流程 2、AOP核心概念 四、AOP切入点表达式 1、语法格式 2、通配符 五、AOP通知类型 1、AOP通知分类 2、AOP通知详解 &#xff08;1&#xff09;前置通知 &#xf…

springcloud中间件:sentinel的简单使用

一、简介 Sentinel 是面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性。 避免大批量的瞬时请求都打到服务上&#xff0c;将服务压垮。 Sen…

EasyExcel导出csv文件,用Office Excel打开乱码

1.前言 导出的列里有中文&#xff0c;导出后用Excel打开乱码 2.原因 搜索相关资料&#xff0c;csv和excel的编码不一致&#xff0c;需要在导出csv的时候设置编码GBK 3.验证

【设计模式】工厂模式(简单工厂模式、工厂方法模式、抽象工厂模式)详记

注&#xff1a;本文仅供学习参考&#xff0c;如有错漏还请指正&#xff01; 参考文献/文章地址&#xff1a; https://zh.wikipedia.org/wiki/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%9A%E5%8F%AF%E5%A4%8D%E7%94%A8%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E8%BD%AF%E4%BB%B…

git常见操作汇总

存档&#xff0c;方便本人查询~ 除了add、commit、push、pull外有些操作也是需要掌握的~在复习之前先准备一下需要的项目&#xff1a; mkdir git-demo1 cd git-demo1 git init基础操作 # 在工作区新增一个README.md文件&#xff0c;并写入 # Hello World# 查看哪些原件做了修…

实验篇(7.2) 17. 站对站安全隧道 - FortiGate作为SSL客户端(SSL) ❀ 远程访问

【简介】虽然常用的站到站的连接用的是IPsec VPN&#xff0c;但是在某些特殊情况下&#xff0c;UDP500或4500端口被阻断&#xff0c;IPsec VPN无法连接&#xff0c;那么还有其它办法实现站到站的连接吗&#xff1f;SSL VPN也可以的。 实验要求与环境 OldMei集团深圳总部部署了域…

c#调用c++ dll,Release版本内存访问错误

最近遇到个比较经典的案例&#xff0c;在c#中调用yara进行文件检测&#xff0c;yara是c编写的一个非常强大库&#xff0c;github有个大佬用c#对其进行了封装&#xff0c;使其能在跨平台下&#xff0c;只需编译yara的so或dll就能直接跑。但总是在Release版本下时不时就崩溃&…

全网独家--【图像色彩增强】方法梳理和问题分析

文章目录 图像增强图像色彩增强问题可视化比较 难点色彩空间大&#xff0c;难以准确表征&#xff1f;不同场景差异大&#xff0c;难以自适应&#xff1f;计算量大&#xff0c;但应用场景往往实时性要求高&#xff1f; 方法传统方法深度学习逐像素预测3D LUT模仿ISP 个人思考批判…