Js--数组(三)

1.什么是数组?

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


2.为什么要数组?

思考:如果我想保存一个班里所有同学的姓名怎么办?

 场景:如果有多个数据可以用数组保存起来,然后放到一个变量中,管理非常方便


3.数组的基本使用

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

  • 4. 遍历数组(重点) 

小案例:数组求和

 需求:求数组 arr = [10,20,40,60,80]里面所有元素的和以及平均值

<!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>let arr = [10,20,40,60,80]let sum = 0for(let i = 0;i<arr.length;i++ ){sum+=arr[i]}let result = sum / arr.lengthconsole.log(`数组的平均值是:${result}`)</script>
</body>
</html>


4.数组的增删改查操作(重点,与java差别有点大,类似java中的集合)

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

语法:

  •  操作数组-新增

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

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

 操作数组-删除

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

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

数组. splice() 方法 删除指定元素 

总结

5.数组排序 

6.数组练习案例

案例1:根据数据生成柱形图

需求: 用户输入四个季度的数据,可以生成柱形图
分析:
①:需要输入4次,所以可以把4个数据放到一个数组里面
Ø 利用循环,弹出4次框,同时存到数组里面
②:遍历改数组,根据数据生成4个柱形图,渲染打印到页面中
Ø 柱形图就是div盒子,设置宽度固定,高度是用户输入的数据
Ø div里面包含显示的数字和 第n季度

<!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>/* 清除内外边距 */* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><script>// 1. 四次弹框效果// 声明一个新的数组let arr = []for (let i = 1; i <= 4; i++) {// let num = prompt(`请输入第${i}季度的数据:`)// arr.push(num)arr.push(prompt(`请输入第${i}季度的数据:`))// push记得加小括号,不是等号赋值的形式}// console.log(arr)  ['123','135','345','234']// 盒子开头document.write(` <div class="box">`)// 盒子中间 利用循环的形式  跟数组有关系for (let i = 0; i < arr.length; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>          `)}// 盒子结尾document.write(` </div>`)</script>
</body></html>

 案例2:冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重
复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]

<!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>// 使用冒泡排序对数组进行重新排序let arr = [10,45,14,16,24,78,45,12,34]for(let i =0;i<arr.length-1;i++){for(let j = 0;j<arr.length-i-1;j++){//当后面这个比前面这个大时,则交换位置if(arr[j] > arr[j+1]){let temp = arr[j]arr[j] = arr[j+1]arr[j+1] = temp}}}console.log(arr)//js提供的排序的函数let arrSort = [14,10,15,14,12,75,24]//默认是自然排序(升序)arrSort.sort();console.log(arrSort)//控制升降序let controlSort = [10,9,7,15,12,75,14,16]// 升序// controlSort.sort(function(a,b){//   return a-b// })// 降序acontrolSort.sort(function(a,b){return b-a})console.log(controlSort)</script>
</body>
</html>

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

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

相关文章

Live800:客户服务中的AI辅助培训与员工成长

随着科技的发展&#xff0c;人工智能&#xff08;AI&#xff09;技术已经广泛应用于各个行业&#xff0c;其中包括客户服务领域。以下是关于如何运用AI技术辅助客服人员进行培训和学习&#xff0c;提高员工的专业素质和服务能力的详细探讨。 一、AI在客户服务中的应用 AI技术在…

安卓版本与鸿蒙将不再兼容,鸿蒙工程师究竟有多抢手?

年薪最高160万&#xff01; 鸿蒙工程师究竟有多抢手&#xff1f; 套壳安卓”的质疑言犹在耳&#xff0c;如今华为正在计划将鸿蒙OS与安卓完全脱离。 此前&#xff0c;鸿蒙OS为了迅速扩大用户规模&#xff0c;采取了兼容安卓的策略。而如今&#xff0c;已有数亿设备搭载的鸿蒙…

短视频发展电商,哪个平台更占优势,新手如何选择?

我是电商珠珠 众所周知&#xff0c;自19年抖音开始发展短视频时&#xff0c;短短两年的时间&#xff0c;就将电商圈拉高了一个度。 20年是抖音发展的鼎盛时期&#xff0c;也是很多新手容易财富自由的时期&#xff0c;平台的各项红利都纷纷向商家靠拢。 如今已经发展了四年的…

Ubuntu22.04开机左上角下划线闪烁不开机

按下CtrlAltF2&#xff0c;打开TTY系统&#xff0c;然后通过用户名和密码登录&#xff0c;随后使用 sudo apt --fix-broken install 根据提示排除错误信息&#xff0c;然后使用apt安装lightdm安装就行。 tips:当使用EasyConnect的时候&#xff0c;你可能参考了下面这篇文章知…

中国京津冀国际光伏展

中国京津冀国际光伏展是一个为光伏行业搭建交流合作平台的国际展览会。该展览会主要展示光伏发电技术、光伏产品、光伏材料、光伏设备等相关领域的最新产品和技术。展会吸引了来自国内外光伏行业的企业、专家和观众参与&#xff0c;为他们提供了一个了解行业最新动态、展示自身…

Kafka之集群搭建

1. 为什么要使用kafka集群 单机服务下&#xff0c;Kafka已经具备了非常高的性能。TPS能够达到百万级别。但是&#xff0c;在实际工作中使用时&#xff0c;单机搭建的Kafka会有很大的局限性。 ​ 消息太多&#xff0c;需要分开保存。Kafka是面向海量消息设计的&#xff0c;一个T…

Linux 简述

文章目录 1. 背景2. Linux 环境搭建2.1 环境搭建方式2.2 使用云服务器2.3 使用终端软件连接到 Linux 3. Linux 常用命令3.1 ls3.2 cd3.3 pwd3.4 touch3.5 cat3.6 echo3.7 vim3.8 mkdir3.9 rm3.10 mv3.11 cp3.12 grep3.13 ps3.14 netstat 4. 搭建 Java 部署环境4.1 jdk4.2 tomca…

发表《Optics Express》玻色量子联合天津大学实现5比特全光量子随机数发生器

2023年11月&#xff0c;北京玻色量子科技有限公司&#xff08;以下简称“玻色量子”&#xff09;联合天津大学在学术期刊《Optics Express》上发表了以“5-bit all-optical quantum random number generator based on a time-multiplexed optical parametric oscillator”&…

使用 gitee+sphinx+readthedocs 搭建个人博客

给大家安利如何快速搭建个人博客网站&#xff01; 前言 这是我本地运行的一个使用sphinx构建的博客服务&#xff0c;这些文章&#xff0c;都是用markdown写的。 一直有个想法&#xff0c;就是把自己写的这些文件&#xff0c;搞成一个博客网站&#xff0c;放到网上&#xff0c…

Qt中QGraphicsView总体架构学习

前沿 前段时间学习了下如何在QGraphicsView架构中绘制刻度尺&#xff0c;主要是与OnPainter中进行比较的&#xff0c;那么今天就来详细讲解下我对QGraphicsView框架的认知吧~ 最近一段时间想学习下&#xff0c;如果我有不正确的&#xff0c;欢迎留言探讨哟~ QGraphicsView架…

kubeSphere DevOps自定义容器环境JDK11

kubeSphere DevOps自定义容器环境JDK11 &#x1f342;前言&#x1f342;增加JDK11容器环境&#x1f341;检查是否成功 &#x1f342;不生效的原因排查&#x1f341;按步骤执行如下命令 &#x1f342;前言 kubeSphere 版本v3.1.1 遇到问题:kubeSphere默认支持容器只有JDK8,目前…

自监督深度学习技术

一、定义 自监督学习&#xff08;SSL&#xff09;是机器学习的一种范式&#xff0c;用于处理未标记数据以获取有用的表示&#xff0c;以帮助下游学习任务。SSL方法最显著的特点是它们不需要人类标注的标签&#xff0c;这意味着它的训练完全基于由未标记的数据样本组成的数据集…

【架构】API接口安全防护救命的11招

前言 如何保证接口的安全性? 根据多年的工作经验,给大家介绍一下保证接口安全的一些小技巧,希望对你会有所帮助。 1 参数校验 保证接口安全的第一步,也是最重要的一步,需要对接口的请求参数做校验。 如果我们把接口请求参数的校验做好了,真的可以拦截大部分的无效请求…

深度学习|交叉熵

文章目录 什么是交叉熵如何构造信息量的函数关于 C 1 C_1 C1​参数的选择关于 C 2 C_2 C2​参数的选择 一个系统的熵如何比较两个系统的熵交叉熵在神经网络中的应用参考 什么是交叉熵 熵是用来衡量一个系统的混乱程度&#xff0c;混乱程度也其实代表着整个系统内部的不确定性。…

在微信公众号上怎么实现拼团功能

拼团魅力&#xff1a;微信公众号上的拼团功能如何助力营销 一、引言 在这个数字化时代&#xff0c;微信公众号成为了企业与消费者互动的重要平台。而拼团功能作为微信营销的一大利器&#xff0c;为企业带来了巨大的商业价值。那么&#xff0c;如何在微信公众号上实现拼团功能&…

极盾故事|某车企敏感数据风险监测平台,揭开48个高风险账号的神秘面纱

极盾科技助力某汽车科技公司&#xff0c;构建敏感数据实时风险监测平台&#xff0c;通过用户行为和实体分析系统&#xff08;UEBA&#xff09;&#xff0c;打通数据和安全桥梁&#xff0c;实现敏感数据流动风险行为监控&#xff0c;半年内共计检测78万条内部员工的应用日志&…

AlexNet论文精读

1:该论文解决了什么问题&#xff1f; 图像分类问题 2&#xff1a;该论文的创新点&#xff1f; 使用了大的深的卷积神经网络进行图像分类&#xff1b;采用了两块GPU进行分布式训练&#xff1b;采用了Relu进行训练加速&#xff1b;采用局部归一化提高模型泛化能力&#xff1b;…

docker 容器添加指定网络地址

docker 容器添加指定网络地址 在搭建halo博客时&#xff0c;准备让 halo、mysql8.1、nginx 三个容器在同一个网段中&#xff0c;并指定IP。 实现docker内部容器之间网络互通。 查看容器网络信息命令 docker inspect 容器名各容器部署成功后网络效果如下&#xff1a; nginx …

Qt/C++摄像头采集/二维码解析/同时采集多路/图片传输/分辨率帧率可调/自动重连

一、前言 本地摄像头的采集可以有多种方式&#xff0c;一般本地摄像头会通过USB的方式连接&#xff0c;在嵌入式上可能大部分是CMOS之类的软带的接口&#xff0c;这些都统称本地摄像头&#xff0c;和网络摄像头最大区别就是一个是通过网络来通信&#xff0c;一个是直接本地通信…

Camunda Rest API

客户端像调用本地方法一样调用引擎中的接口。 https://docs.camunda.org/manual/7.17/reference/rest/ 一&#xff1a;pom.xml <dependency><groupId>org.camunda.community.rest</groupId><artifactId>camunda-platform-7-rest-client-spring-boot-…