JS基础 -- 数组 (对象 / 数组 / 类数组 / 对象数组)的遍历

一、数组:

数组是复杂数据类型,用于存储一组有序的数据。

1、创建数组:

① 使用 new 关键字:

let arr = new Array() // 创建一个长度为0的空数组
let arrLength = new Array(5) // 创建一个长度为5的空数组

② 字面量形式:

let arr = [] // 创建一个长度为0的空数组

2、给数组中添加数据:

① 创建的数组的时候,直接初始化数据:

let arrEle = ['1', 2, true]

② 通过索引添加数据:

let arr = []
arr[0] = 1
arr[arr.length] = 2

二、遍历:

1、数组:

for循环

let arr=[1,2,3,4,5,6]
for(let i =0;i <arr.length;i++) {console.log('正向遍历',arr[i])
}
for(let i =arr.length-1;i >=0;i--) {console.log('反向遍历',arr[i])
}

forEach :与for循环相比,更适用于遍历次数未知的情况。

没有返回值,不会改变原始数组

let arr=[1,2,3,4,5,6]
arr.forEach((item,index,originArr)=>{console.log('元素,索引 ---》',item,index)console.log('原始数组',originArr)
})

map:有返回值,返回的是新数组,不会改变原始数组

let arr=[1,2,3,4,5,6]
let a = arr.map((item,index,originArr)=>{console.log('元素,索引 ---》',item,index)console.log('原始数组',originArr)// 默认返回的是 undefinedreturn 'haha'+item
})
console.log('得到的新数组a',a)

for- of:用来遍历可迭代对象

let arr = ['张三','李四','王五','赵六','钱七','孙八','周九','吴十']
for(let value of arr) {console.log('元素-->', value) // 张三...
}

2、类数组:

当我们想要获取多个DOM节点,并对每一个DOM节点都进行操作时,就需要使用类数组的遍历。

for循环:比较耗性能,一般不用

② slice和call将类数组转化为数组

[ ]表示数组的实例,[ ].slice表示将数组整个进行返回,call表示将作用域提升到

document.getElementsByClassName(“modify__quarter-date”)
这个类数组中。

③ ES6中的...(扩展运算符)

for- of:用来遍历可迭代对象

3、对象:

for- in

for-in 会遍历数组里的原型链中的属性,需要使用 Object.hasOwn 或者 hasOwnProperty 来检测属性是否来自原型链。

let obj = {name:'张三',age: 52,address: '家庭住址'
}
for(let key in obj) { // key表示对象的键名console.log(obj[key]) // 得到对象的键值
}

Object.keys():得到一个以对象的索引组成的数组

let obj = {name:'张三',age: 52,address: '家庭住址'
}
console.log(Object.keys(obj)) // ['name', 'age', 'address']

Object.values():得到一个以对象的值组成的数组

let obj = {name:'张三',age: 52,address: '家庭住址'
}
console.log(Object.values(obj)) // ['张三', 52, '家庭住址']

Object.getOwnPropertyNames():得到一个以对象的索引组成的数组(包括原型上的属性)

let obj = {name:'张三',age: 52,address: '家庭住址'
}
console.log(Object.keys(obj)) // ['name', 'age', 'address']

4、对象数组:

for循环

class Person {constructor(name,age) {this.name=namethis.age=age}
}
let arr=[new Person('张三',20),new Person('李四',40),new Person('王五',60),
]
for(let i =0;i <arr.length;i++) {let age = arr[i].ageif (age>50) {console.log('年龄大于50的人',arr[i])}
}

forEach :与for循环相比,更适用于遍历次数未知的情况。

没有返回值,不会改变原始数组

class Person {constructor(name,age) {this.name=namethis.age=age}
}
let arr=[new Person('张三',20),new Person('李四',40),new Person('王五',60),
]
arr.forEach((item,index,originArr)=>{console.log('元素,索引 ---》',item,index)console.log('原始数组',originArr)
})

map:有返回值,返回的是新数组,不会改变原始数组

class Person {constructor(name,age) {this.name=namethis.age=age}
}
let arr=[new Person('张三',20),new Person('李四',40),new Person('王五',60),
]
let a = arr.map((item,index,originArr)=>{console.log('元素,索引 ---》',item,index)console.log('原始数组',originArr)// 默认返回的是 undefinedreturn 'haha'+item.name
})
console.log('得到的新数组a',a)

for- of:用来遍历可迭代对象

class Person {constructor(name,age) {this.name=namethis.age=age}
}
let arr=[new Person('张三',20),new Person('李四',40),new Person('王五',60),
]
for(let value of arr) {console.log('元素--》',value)
}

5、性能:for循环 > for...of > forEach > for...in > map

三、数组中的方法:

这部分还在更新,以下数据不正确

1、slice和splice:数组中截取数据。

slice

  • 不影响原数组。
  • 包含开始索引、不包含结束索引。
  • slice(1, -2) // 表示从索引1开始截取,从倒数第二个元素结束截取。

splice

  • 影响原数组。
  • splice(1, 2) // 表示从索引1开始截取,截取2个元素。
  • splice(1, 1, “替换的第1个元素”, “替换的第2个元素”, “替换的第3个元素”) // 表示替换索引1的元素
  • splice(1, 0, “新增的第1个元素”, “新增的第2个元素”, “新增的第3个元素”) // 表示在索引1后面新增元素
    在这里插入图片描述
    在这里插入图片描述

2、call和apply:

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

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

相关文章

【期末复习】一、操作系统概论

题型 选择题 论述题 综合分析题(计算,证明) 算法分析题(根据程序代码分析) 1.方面 操作系统在计算机系统中主要涉及硬件、软件和数据这三个重要方面。 2.操作系统发展历史 手工操作阶段(1940s) 联机批处理系统阶段(1950s) 脱机批处理系统阶段(1950s) 多道…

基于STM32F103的USART的原理及应用(一)(实现手机BLE和MCU进行通信)

一&#xff0c;查阅数据手册&#xff0c;找到对应的IO口和外设总线并配置好外设源文件 想了解USART的具体原理的小伙伴请进传送门&#xff1a;&#xff08;总结&#xff09;STM32中USART原理及应用&#xff08;PC、BLE、ESP8266通信实现&#xff09;-CSDN博客 二&#xff0c;打…

如何在Java开发中选择适合的高性能工具库?

如何在Java开发中选择适合的高性能工具库&#xff1f; 在 Java 开发中选择适合的高性能工具库需要综合考虑多个因素&#xff0c;以下是详细的步骤和要点&#xff1a; 一、明确项目需求 功能需求 首先要确定项目需要的功能。例如&#xff0c;如果主要是进行 JSON 数据处理&a…

2025 小模型技术:驱动低代码与物联网融合发展新引擎

在科技的前沿赛道上&#xff0c;我们满怀期待地迈向 2025 年。这一年&#xff0c;小模型技术宛如一颗璀璨的新星&#xff0c;将在低代码与物联网的浩瀚星空中闪耀出独特光芒&#xff0c;成为引领二者融合发展的强劲引擎&#xff0c;为各行业的数字化变革带来澎湃动力与无限可能…

业务模型与UI设计

业务数据模型的设计、UI设计这应该是程序设计中不可缺少的部分。做程序设计的前提应该先把这两块设计好&#xff0c;那么&#xff0c;来一个实际案例&#xff0c;看看这2块的内容。 汽车保养记录业务模型与UI设计&#xff1a; 一、【车辆清单】 记录车辆相关的数据&#xff0…

微服务保护—Sentinel快速入门+微服务整合 示例: 黑马商城

1.微服务保护 微服务保护是确保微服务架构可靠、稳定和安全的策略与技术。 在可靠性上&#xff0c;限流是控制进入微服务的请求数量&#xff0c;防止流量过大导致服务崩溃。比如电商促销时对商品详情服务进行流量限制。熔断是当被调用的微服务故障过多或响应过慢时&#xff0c;…

unity学习4:git和SVN的使用差别

目录 1 svn 1.1 操作逻辑 1.2 对应工具 1.3 SVN避免冲突的好习惯 2 git 2.1 git的基础操作逻辑 2.1.1 commit时&#xff0c;提交文件之外的其他文件需要pull 2.1.2 commit时&#xff0c;发现要提交的本地文件和服务器的文件冲突了 2.1.3 pull 时 2.2 对应工具 2.3 …

Docker新手:在tencent云上实现Python服务打包到容器

1 使用docker的原因 一致性和可移植性&#xff1a;Docker 容器可以在任何支持 Docker 的环境中运行&#xff0c;无论是开发者的笔记本电脑、测试服务器还是生产环境。这确保了应用在不同环境中的行为一致&#xff0c;减少了“在我的机器上可以运行”的问题。 隔离性&#xff…

阻抗(Impedance)、容抗(Capacitive Reactance)、感抗(Inductive Reactance)

阻抗&#xff08;Impedance&#xff09;、容抗&#xff08;Capacitive Reactance&#xff09;、感抗&#xff08;Inductive Reactance&#xff09; 都是交流电路中描述电流和电压之间关系的参数&#xff0c;但它们的含义、单位和作用不同。下面是它们的定义和区别&#xff1a; …

Ruby 数据类型

Ruby 数据类型 Ruby&#xff0c;作为一种动态、开放源代码的编程语言&#xff0c;以其简洁明了的语法和强大的功能而闻名。在Ruby中&#xff0c;数据类型是编程的核心组成部分&#xff0c;它们决定了变量可以存储的信息种类以及可以对这些信息执行的操作。Ruby是一种类型安全的…

入门网络安全工程师要学习哪些内容【2025年寒假最新学习计划】

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 大家都知道网络安全行业很火&#xff0c;这个行业因为国家政策趋势正在大力发展&#xff0c;大有可为!但很多人对网络安全工程师还是不了解&#xff0c;不知道网…

【2024年-5月-14日-开源社区openEuler实践记录】深度剖析 Cantian-Connector-Mysql:开源连接方案新势力

引言 在数据驱动的时代&#xff0c;数据库连接组件是众多应用程序与数据存储之间的关键桥梁。Cantian-Connector-Mysql 作为一款开源项目&#xff0c;正逐渐受到开发者群体的关注&#xff0c;下面我们将从技术亮点、应用场景、部署实操以及代码示例等维度对它展开全面解读。 …

智联视频超融合平台:电力行业的智能守护者

文章目录 一、远程实时监控与设备状态监测二、提高应急响应能力三、实现无人值守与减员增效四、保障电力设施安全与防范外部破坏五、提升电网运行管理效率与决策科学性六、助力电力企业数字化转型与智能化发展七、智联视频超融合平台 在当今数字化浪潮下&#xff0c;视频联网平…

vue面试题|[2025-1-3]

1.v-if和v-show的区别&#xff1f; 都是可以控制元素的显示和隐藏 1.v-show是控制元素的display值来让元素显示和隐藏&#xff1b;v-if显示&#xff08;隐藏&#xff09;时会把整个DOM元素添加&#xff08;删除&#xff09; 2.v-show只是简单的css切换&#xff1b;v-if有一个局…

大型模型运行过程概述

整体过程 大模型&#xff0c;如大型语言模型&#xff08;LLM&#xff09;&#xff0c;其生命周期主要分为两个阶段&#xff1a;训练和推理。这两个过程有着不同的目标、资源需求和技术挑战。 大模型的训练是一个复杂且资源密集的过程&#xff0c;它首先需要收集和准备大量的高…

PostgreSQL 表达式

PostgreSQL中的表达式是一种强大的工具&#xff0c;用于在数据库查询中处理和计算数据。它们由一个或多个值、运算符和PostgreSQL函数组合而成&#xff0c;类似于公式&#xff0c;并用于求值【1†source】。 在PostgreSQL中&#xff0c;表达式可以分为不同类型&#xff0c;如布…

带虚继承的类对象模型

文章目录 1、代码2、 单个虚继承3、vbptr是什么4、虚继承的多继承 1、代码 #include<iostream> using namespace std;class Base { public:int ma; };class Derive1 :virtual public Base { public:int mb; };class Derive2 :public Base { public:int mc; };class Deri…

责任链模式应用

牢记于心 职责单一: 责任链模式可以将每个验证逻辑封装到一个独立的处理器中&#xff0c;每个处理器负责单一的验证职责&#xff0c;符合单一职责原则。 可扩展性: 增加新的验证逻辑时&#xff0c;只需添加新的处理器&#xff0c;而不需要修改现有的代码。 清晰的流程: 将所…

信号的产生、处理

一、信号的概念 信号是linux系统提供的一种&#xff0c;向指定进程发送特定事件的方式。收到信号的进程&#xff0c;要对信号做识别和处理。信号的产生是异步的&#xff0c;进程在工作过程中随时可能收到信号。 信号的种类分为以下这么多种&#xff08;用指令kill -l查看&…

如何在 Windows 10/11 上录制带有音频的屏幕 [3 种简单方法]

无论您是在上在线课程还是参加在线会议&#xff0c;您都可能需要在 Windows 10/11 上录制带有音频的屏幕。互联网上提供了多种可选方法。在这里&#xff0c;本博客收集了 3 种最简单的方法来指导您如何在 Windows 10/11 上使用音频进行屏幕录制。请继续阅读以探索&#xff01; …