JavaScript第七讲:数组,及练习题

目录

今天话不多说直接进入正题!

1. 创建数组对象

2. 数组长度

3. 遍历一个数组

4. 连接数组

5. 通过指定分隔符,返回一个数组的字符串表达

6. 分别在最后的位置插入数据和获取数据(获取后删除)

7. 分别在最开始的位置插入数据和获取数据(获取后删除)

8. 对数组的内容进行排序

9. 自定义排序算法

10. 对数组的内容进行反转

11. 获取子数组

12. 删除和插入元素

删除元素

插入元素

替换元素

练习题

源代码

小结


今天话不多说直接进入正题!

1. 创建数组对象

在JavaScript中,你可以通过以下方式创建数组:

// 使用数组字面量  
let array1 = [1, 2, 3, 4, 5];  // 使用Array构造函数  
let array2 = new Array(1, 2, 3, 4, 5);  // 创建一个空数组  
let array3 = [];

2. 数组长度

使用length属性来获取或设置数组的长度:

let array = [1, 2, 3];  
console.log(array.length); // 输出 3  // 设置长度可以添加或删除元素  
array.length = 2; // 现在数组只包含 [1, 2]

3. 遍历一个数组

你可以使用for循环、for...of循环或forEach方法来遍历数组:

let array = [1, 2, 3, 4, 5];  // 使用for循环  
for (let i = 0; i < array.length; i++) {  console.log(array[i]);  
}  // 使用for...of循环  
for (let element of array) {  console.log(element);  
}  // 使用forEach方法  
array.forEach(function(element) {  console.log(element);  
});

4. 连接数组

使用concat方法连接两个或多个数组:

let array1 = [1, 2, 3];  
let array2 = [4, 5, 6];  
let array3 = array1.concat(array2);  
console.log(array3); // 输出 [1, 2, 3, 4, 5, 6]

5. 通过指定分隔符,返回一个数组的字符串表达

使用join方法,通过指定分隔符将数组元素转换为字符串:

let array = ['a', 'b', 'c'];  
let str = array.join(','); // 使用逗号作为分隔符  
console.log(str); // 输出 "a,b,c"

6. 分别在最后的位置插入数据和获取数据(获取后删除)

使用push方法添加元素到数组末尾,使用pop方法移除并返回数组的最后一个元素:

let array = [1, 2, 3];  
array.push(4); // 添加元素 4 到末尾  
console.log(array); // 输出 [1, 2, 3, 4]  let lastElement = array.pop(); // 移除并返回最后一个元素  
console.log(lastElement); // 输出 4  
console.log(array); // 输出 [1, 2, 3]

7. 分别在最开始的位置插入数据和获取数据(获取后删除)

使用unshift方法添加元素到数组开始,使用shift方法移除并返回数组的第一个元素:

let array = [2, 3, 4];  
array.unshift(1); // 添加元素 1 到开始  
console.log(array); // 输出 [1, 2, 3, 4]  let firstElement = array.shift(); // 移除并返回第一个元素  
console.log(firstElement); // 输出 1  
console.log(array); // 输出 [2, 3, 4]

8. 对数组的内容进行排序

使用sort方法对数组进行排序。默认情况下,它会将数组元素转换为字符串,然后按照字符的Unicode码点进行排序:

let array = [5, 1, 4, 2, 3];  
array.sort(); // 默认排序,可能会得到不期望的结果  
console.log(array); // 输出 [1, 2, 3, 4, 5] 或其他,取决于浏览器实现  // 使用自定义比较函数进行排序  
array.sort(function(a, b) {  return a - b; // 升序排序  
});  
console.log(array); // 输出 [1, 2, 3, 4, 5]

9. 自定义排序算法

在JavaScript中,数组的sort()方法允许你传入一个自定义的比较函数,以实现自定义排序。这个比较函数应该接收两个参数,并返回一个负数、零或正数,分别表示第一个参数应该排在第二个参数之前、相等或之后。

let array = [5, 1, 4, 2, 3];  // 自定义升序排序  
array.sort(function(a, b) {  return a - b;  
});  
console.log(array); // 输出 [1, 2, 3, 4, 5]  // 自定义降序排序  
array.sort(function(a, b) {  return b - a;  
});  
console.log(array); // 输出 [5, 4, 3, 2, 1]

10. 对数组的内容进行反转

数组的reverse()方法用于反转数组中的元素顺序。

let array = [1, 2, 3, 4, 5];  
array.reverse();  
console.log(array); // 输出 [5, 4, 3, 2, 1]

11. 获取子数组

数组的slice()方法用于提取数组的一部分浅拷贝到一个新数组对象,并返回这个新数组。原数组不会被改变。

let array = [1, 2, 3, 4, 5];  // 从索引1开始,提取到索引3(不包括索引3的元素)  
let subArray = array.slice(1, 3);  
console.log(subArray); // 输出 [2, 3]  // 如果只提供一个参数,则从该索引开始到数组末尾  
let endArray = array.slice(2);  
console.log(endArray); // 输出 [3, 4, 5]

12. 删除和插入元素

在JavaScript中,数组的splice()方法是一种非常强大的工具,它可以在任何位置添加/删除项目,并返回被删除的项目。

删除元素
let array = [1, 2, 3, 4, 5];  // 从索引1开始,删除2个元素  
let removedItems = array.splice(1, 2);  
console.log(array); // 输出 [1, 4, 5]  
console.log(removedItems); // 输出 [2, 3],这是被删除的元素
插入元素
let array = [1, 4, 5];  // 在索引1的位置插入2和3  
array.splice(1, 0, 2, 3); // 第二个参数为0,表示不删除任何元素  
console.log(array); // 输出 [1, 2, 3, 4, 5]
替换元素
let array = [1, 2, 3, 4, 5];  // 从索引1开始,替换2个元素为6和7  
array.splice(1, 2, 6, 7);  
console.log(array); // 输出 [1, 6, 7, 4, 5]

注意:splice()方法会直接修改原数组。如果你不希望原数组被改变,可以先使用slice()方法复制一份数组,再在新数组上使用splice()

练习题

编写一个JavaScript程序,该程序完成以下任务:

  1. 创建一个包含5个随机整数的数组(范围在1到100之间)。
  2. 使用sort()方法和自定义比较函数对该数组进行降序排序。
  3. 使用slice()方法获取数组的前三个元素,并存储在新的数组中。
  4. 使用splice()方法在原始数组的第二个位置插入一个新元素(值为100)。
  5. 使用reverse()方法反转原始数组。
  6. 输出原始数组、排序后的数组、子数组、插入元素后的数组以及反转后的数组。

源代码

// 1. 创建一个包含5个随机整数的数组(范围在1到100之间)  
let originalArray = [];  
for (let i = 0; i < 5; i++) {  originalArray.push(Math.floor(Math.random() * 100) + 1);  
}  
console.log('原始数组:', originalArray);  // 2. 使用sort()方法和自定义比较函数对该数组进行降序排序  
originalArray.sort(function(a, b) {  return b - a;  
});  
console.log('排序后的数组:', originalArray);  // 3. 使用slice()方法获取数组的前三个元素,并存储在新的数组中  
let subArray = originalArray.slice(0, 3);  
console.log('子数组:', subArray);  // 4. 使用splice()方法在原始数组的第二个位置插入一个新元素(值为100)  
originalArray.splice(1, 0, 100);  
console.log('插入元素后的数组:', originalArray);  // 5. 使用reverse()方法反转原始数组  
originalArray.reverse();  
console.log('反转后的数组:', originalArray);

运行这段代码,你会看到控制台输出了题目要求的各个数组。注意,由于Math.random()的使用,每次运行程序时原始数组的内容都会不同。

小结

今天就到这里了,期待下次相遇!

respect!

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

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

相关文章

fatal error C1859:意外的预编译头错误,只需重新运行编译器就可能修复此问题

解决 菜单栏–生成–清理解决方案–菜单栏–生成–生成解决方案

对象业务的修改元数据接口

如下是官方文档中针对元数据的说明。 After you upload the object, you cannot modify object metadata. The only way to modify object metadata is to make a copy of the object and set the metadata. 对象的元数据仅在上传对象时或者复制对象时支持修改&#xff0c;在某…

一个弹出的虚假安全警告去除

虚假的安全警告 poratus.azurewebsites.net Pornographic spyware detected! Remove viruses with Avira Antivirus 通过 Microsoft Edge GPT-4 (OpenAI) 这个提示可能是一个虚假的安全警告&#xff0c;被称为“恐吓软件”&#xff08;scareware&#xff09;&#xff0c;旨在…

2024年上半年高级信息系统项目管理师考后总结

复习了大概两个月&#xff0c;终于度过了这场考试。又是加班996&#xff0c;又是复习听课写论文做真题&#xff0c;真心累。没办法&#xff0c;年纪大了&#xff0c;不考考证&#xff0c;没法混啊。 所以&#xff0c;建议大家趁年轻&#xff0c;必须必须必须把高级软考的证给拿…

名下企业查询,清晰明了;在线操作,方便快捷

在现代社会&#xff0c;越来越多的人开始涉足创业和投资&#xff0c;拥有自己的企业成为一种时尚。然而&#xff0c;随之而来的是繁琐的企业注册流程和复杂的信息查询。为了解决这个问题&#xff0c;挖数据平台推出了一项名下企业查询接口&#xff0c;提供了一种方便快捷的方式…

pytorch onnx ncnn间的关系

PyTorch、ONNX 和 NCNN 是深度学习领域中的三个重要工具或框架&#xff0c;它们在模型开发、转换和部署过程中扮演着不同但相互关联的角色。以下是它们之间的关系和各自的作用&#xff1a; PyTorch 角色 PyTorch 是一个开源的深度学习框架&#xff0c;由 Facebooks AI Resea…

计算机网络介绍

计算机网络介绍 概述网络概述相关硬件 链路层VLAN概念VLAN 特点VLAN 的划分帧格式端口类型原理 STP概念特点原理 Smart Link概念特点组网 网络层ARP概念原理 IP概念版本IP 地址 IPv4IP 地址数据报格式 IPv6特点IP 地址数据报格式 ICMP概念分类报文格式 VRRP概念原理报文格式 OS…

MySQL创建新用户并设置新密码

创建新用户并设置新密码的步骤在 MySQL 中相对直接。以下是具体步骤&#xff1a; 登录到 MySQL&#xff1a; 打开终端或命令行界面&#xff0c;使用以下命令以 root 用户或其他具有足够权限的用户登录到 MySQL 服务器&#xff1a; mysql -u root -p输入 root 用户的密码。 选择…

echarts中api返回数据的结构是时间和数据是两个数组返回的如何使用

如果ECharts的API返回的数据结构是时间和数据分别作为两个数组返回的&#xff0c;你可以将这两个数组分别赋值给x轴和y轴的数据。 例如&#xff0c;假设API返回了以下两个数组&#xff1a; const timeData [2022-01-01, 2022-01-02, 2022-01-03]; const valueData [10, 20,…

片上电控系统集成技术

一、背景 片上电机控制系统集成技术&#xff08;On-Chip Motor Control System Integration&#xff09;是一种先进的电子工程技术&#xff0c;它主要聚焦于将复杂的电机控制算法和硬件组件整合到单一集成电路&#xff08;IC&#xff09;中&#xff0c;以便于高效、精确地管理…

计算机毕业设计 | 基于Koa+vue的高校宿舍管理系统宿舍可视化系统

项目介绍 项目背景 随着科技的发展&#xff0c;智能化管理越来越重要。大学生在宿舍的时间超过了1/3&#xff0c;因此良好的宿舍管理对学生的生活和学习极为关键。学生宿舍管理系统能够合理安排新生分配宿舍&#xff0c;不浪费公共资源&#xff0c;减轻学校管理压力&#xff…

9.1JavaEE——Spring JDBC

一、JDBCTemplate概述 1、JDBCTemplate作用 针对数据库操作&#xff0c;Spring框架提供了JdbcTemplate类&#xff0c;JdbcTemplate是一个模板类&#xff0c;Spring JDBC中的更高层次的抽象类均在JdbcTemplate模板类的基础上创建。 JdbcTemplate类提供了操作数据库的基本方法&a…

计算机视觉与深度学习实战,Python工具,深度学习的视觉场景识别

一、引言 随着人工智能技术的快速发展,计算机视觉和深度学习已成为当今最热门的研究领域之一。在计算机视觉中,视觉场景识别是一项重要的任务,旨在通过计算机对图像或视频中的场景进行自动分类和理解。Python作为一种强大的编程语言,结合深度学习框架,为计算机视觉领域的研…

关于工作组

什么是局域网&#xff08;内网&#xff09; 我们常说的内网指的就是局域网&#xff0c;局域网&#xff08;Local Area Network&#xff0c;简称LAN&#xff09;是指在相对较小的地理范围内&#xff0c;如一个办公室、学校、住宅区或建筑群内部&#xff0c;通过通信设备&#xf…

STL的pair知识点大全

1&#xff1a;set容器set.equal range(elem) 1.上限是闭区间&#xff0c;下限是开区间&#xff0c;如[beg,end)返回容器中与elem相等的上下限的两个迭代器&#xff0c;pair中。函数返回两个迭代器&#xff0c;而这两个迭代器被封装在pair中。 pair< set<int>::iterat…

如何快速入门使用Vue.js

目录 学习步骤具体案例案例一&#xff1a;Todo List 应用案例二&#xff1a;用户管理系统 学习步骤 基础知识&#xff1a; HTML/CSS/JavaScript&#xff1a;掌握基本的网页结构、样式和交互是必须的。ES6&#xff1a;了解现代JavaScript的特性&#xff0c;如箭头函数、解构赋值…

vue3 diff源码梳理学习笔记

1、只比较同层 2、双端比较 3、判断流程 1、先判断是否是首次渲染&#xff1b; 2、vnode oldvnode 指向同一个对象&#xff1f; 3、oldvnode dom 关联到真实的元素上&#xff0c;依次更新dom上的属性&#xff0c;class style props events; 4、针对简单的文本节点 只需要更新…

上位机图像处理和嵌入式模块部署(f407 mcu中tf卡读写和fatfs挂载)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很早之前&#xff0c;个人对tf卡并不是很重视&#xff0c;觉得它就是一个存储工具而已。后来在移植v3s芯片的时候&#xff0c;才发现很多的soc其实…

如何监控慢 SQL?

引言&#xff1a;在开发和维护数据库驱动的应用程序时&#xff0c;监控慢 SQL 查询是确保系统性能和稳定性的关键一环。慢 SQL 查询可能会导致系统性能下降、资源浪费和用户体验差等问题。因此&#xff0c;及时监控和优化慢 SQL 查询对于保障系统的正常运行和用户满意度至关重要…

k8s 1.28.x 配置nfs

1.安装nfs&#xff0c;在每个节点上安装 yum install -y nfs-utils 2.创建共享目录(主节点上操作) mkdir -p /opt/nfs/k8s 3.编写NFS的共享配置 /opt/nfs/k8s *(rw,no_root_squash) #*代表对所有IP都开放此目录&#xff0c;rw是读写 4.启动nfs systemctl enable nfs-ser…