JavaScript遍历方式总结

news2025/2/28 6:23:29

目录

一、数组遍历方法

1.1for循环

1.2for...of循环

1.3forEach

1.4map方法

1.5filter方法

1.6reduce方法

1.7some方法

1.8every方法

二、对象遍历方法

2.1for...in方法

2.2values、keys方法

2.3entries方法

一、数组遍历方法

1.1for循环

最普通的循环:

data = [1,2,3,4,5]
for(let i = 0; i < data.length; i++){
    console.log(data[i]);
}
  • 通过指定:“起始条件”、“终止条件”、“迭代步长”来循环

可以遍历用的对象为:“数组”、“字符串”、“类数组对象

1.2for...of循环

直接遍历数组元素的值,避免索引访问

const data = [1,2,3,4,5]
for (const item of data){
    console.log(item);
}

可以遍历用的对象为:“数组”、“字符串”、“Set”、“Map”、“Generator函数生成器

1.3forEach

data.forEach(item,index,list)

  1. item:当前元素
  2. index:当前元素索引
  3. list:整个遍历对象

对数组的每个元素进行一次函数操作,没有返回值,主要遍历并执行某些操作

const data = [1,2,3,4,5]
data.forEach((item) => {
    console.log(item)
})

可以遍历的对象为:“数组

1.4map方法

创建一个新数组,新数组中的元素是旧数组中每个元素进行函数操作后的返回值

  • 不会改变原数组,会创建一个新数组
const data = [1,2,3,4,5]
const arr = data.map((item) => {
    return item * 2
})
console.log(arr)

可以遍历的对象为:“数组” 

1.5filter方法

创建一个新数组,新数组中的元素为旧数组中符合条件的元素。

  • 不会改变原数组,会创建一个新数组
const data = [1,2,3,4,5]
const arr = data.filter((item) => {
    return item % 2 == 0
})
console.log(arr)

可以遍历的对象为:“数组” 

1.6reduce方法

对数组中的每个元素进行累积计算(求和、乘积),将每个元素依次传入回调函数,并将上次计算结果作为下一次的参数

reduce((total,current,index,list),init)

  • total:初始值,在每次迭代中存储上次计算的结果
  • current:当前元素
  • index:当前元素索引
  • list:整个数组对象
  • init:初始值,给定该值后数组将从第一个元素开始累积,total初始化为init。若不给定该值,total默认为元素第一个值,并且从第二个元素开始迭代。

可以遍历的对象为:“数组” 

1.7some方法

判断数组中是否有某个元素满足条件,只要有一个满足就返回True,否则返回False

const data = [1,2,3,4,5]
const flag = data.some((item) => item > 6)
console.log(flag) //false

1.8every方法

判断数组中是否全部元素满足条件,只要有一个不满足就返回False,否则返回True

const data = [1,2,3,4,5]
const flag = data.every((item) => item > 0)
console.log(flag) //true

二、对象遍历方法

2.1for...in方法

遍历对象自身可枚举属性以及原型链继承的可枚举属性

  • 遍历属性的顺序是不确定的,会因为不同环境或对象结构而有所不同
  • 需要结合hasOwnproperty方法判断是否为对象自身属性

在这里有个坑,在打印时不能使用data.key只能用data[key]

因为data.key查找对象时,是根据属性名查找不是变量的值查找,因此会去查找data中名为“key”的属性

const data = {
    name:'John',
    age:30
}
for (const key in data){
    console.log(key,data[key])    //name John, age 30
}

for (const key in data){
    console.log(key,data.key)    //name undefined age undefined
}

可以遍历的对象为:“数组”(不推荐) 、“对象

2.2values、keys方法

Object.keys(obj)返回obj对象的键组成的一个迭代器

Object.values(obj)返回obj对象的值组成的一个迭代器

const data = {
    name:'John',
    age:30
}
Object.keys(data).forEach(key => console.log(key)) // ['name', 'age']
Object.values(data).forEach(key => console.log(key)) // ['John', 30]

可以遍历的对象为:“数组” 、“对象”、“Map”、“Set”(只有values可以)

2.3entries方法

Object.entries(obj)返回对象的“键、值”对

const data = {
    name:'John',
    age:30
}
Object.entries(data).forEach(([key,value]) => console.log(key,value)) //name John age 30

可以遍历的对象为:“数组” 、“对象”、“Map

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

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

相关文章

Python毕业设计选题:基于Python的社区爱心养老管理系统设计与实现_django

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 身体健康界面 公共书籍界面 借阅信息界面 归还…

Spring Boot整合WebSocket

目录 ?引言 1.WebSocket 基础知识 ?1.1 什么是 WebSocket&#xff1f; ?1.2 WebSocket 的应用场景 ?2.Spring Boot WebSocket 整合步骤 2.1 创建 Spring Boot 项目 2.2 添加 Maven 依赖 2.3 配置 WebSocket 2.4 创建 WebSocket 控制器 2.5 创建前端页面 引言 在…

Pycharm使用matplotlib出现的问题(1、不能弹出图表 2、图表标题中文不显示)

Pycharm使用matplotlib出现的问题 问题1&#xff1a;Pycharm调试时出现&#xff1a;AttributeError: module backend_interagg has no attribute FigureCanvas. Did you mean: FigureCanvasAgg? 排查原因&#xff1a;可能是由于matplotlib后端设置不正确或与运行环境不兼容引…

【PromptCoder】使用 package.json 生成 cursorrules

【PromptCoder】使用 package.json 生成 cursorrules 在当今快节奏的开发世界中&#xff0c;效率和准确性至关重要。开发者们不断寻找能够优化工作流程、帮助他们更快编写高质量代码的工具。Cursor 作为一款 AI 驱动的代码编辑器&#xff0c;正在彻底改变我们的编程方式。但如…

给博客添加基于百度地图的足迹页面

使用百度地图 api 做的足迹页面一段时间了&#xff0c;经过一番改造&#xff0c;目前已基本能够满足自己需求。 一、添加百度地图 添加百度地图基本思路就是6点&#xff1a; 申请百度AK适当位置添加百度地图容器引入百度地图 api创建地图实例设置地图中心点初始化地图 这里…

【构建工具】Gradle Kotlin DSL中的大小写陷阱:BuildConfigField

在Android开发当中&#xff0c;BuildConfig是一个非常有用的功能&#xff0c;它允许我们在构建过程中定义常量&#xff0c;并在运行时使用它们。But&#xff01;&#xff01;当我们从传统的Groovy DSL迁移到Kotlin DSL时或者被Android Studio坑的时候&#xff0c;有一些细微的差…

4个小时开发DeepSeek+baiduNaotu一键生成思维导图

一、引言 最近发现AI生成思维导图的解决方案普遍存在两个断层&#xff1a;用户需手动复制模型输出的JSON数据到脑图软件&#xff0c;且缺乏实时可视化反馈。基于日常使用的BaiduNaotu框架&#xff08;其轻量级架构与简洁的UI设计已满足基础需求&#xff09;&#xff0c;我决定…

(21)从strerror到strtok:解码C语言字符函数的“生存指南2”

❤个人主页&#xff1a;折枝寄北的博客 ❤专栏位置&#xff1a;简单入手C语言专栏 目录 前言1. 错误信息报告1.1 strerror 2. 字符操作2.1 字符分类函数2.2 字符转换函数 3. 内存操作函数3.1 memcpy3.2 memmove3.2memset3.3 memcmp 感谢您的阅读 前言 当你写下strcpy(dest, s…

SpringBoot集成easy-captcha图片验证码框架

SpringBoot集成easy-captcha图片验证码框架 此项目已经很久未维护&#xff0c;如有更好的选择&#xff0c;建议使用更好的选择!!! 一、引言 验证码&#xff08;CAPTCHA&#xff09;是现代应用中防止机器人攻击、保护接口安全的核心手段之一。然而&#xff0c;从零开发验证码…

货车一键启动无钥匙进入手机远程启动的正确使用方法

一、移动管家货车无钥匙进入系统的使用方法 基本原理&#xff1a;无钥匙进入系统通常采用RFID无线射频技术和车辆身份识别码识别系统。车钥匙需要随身携带&#xff0c;当车钥匙靠近货车时&#xff0c;它会自动与货车的解码器匹配。开门操作&#xff1a;当靠近货车后&#xff0…

【实战 ES】实战 Elasticsearch:快速上手与深度实践-1.2.2倒排索引原理与分词器(Analyzer)

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 1.2.2倒排索引原理与分词器&#xff08;Analyzer&#xff09;1. 倒排索引&#xff1a;搜索引擎的基石1.1 正排索引 vs 倒排索引示例数据对比&#xff1a; 1.2 倒排索引核心结…

和鲸科技携手四川气象,以 AI 的力量赋能四川气象一体化平台建设

气象领域与农业、能源、交通、环境科学等国计民生关键领域紧密相连&#xff0c;发挥着不可替代的重要作用。人工智能技术的迅猛发展&#xff0c;为气象领域突破困境带来了新的契机。AI 技术能够深度挖掘气象大数据中蕴含的复杂信息&#xff0c;助力人类更精准地把握自然规律&am…

linux下java Files.copy 提示文件名过长

linux下java Files.copy 提示文件名过长问题排查 系统运行时执行文件拷贝的功能的时候出现了 文件名称过长的报错提示 查询过资料后整理出了每个操作系统支持最大的文件名称长度 每个操作系统现在的文件长度不一样 Linux的 /usr/include/linux/limits.h 中做出了说明 这些限制…

Metal学习笔记八:纹理

到目前为止&#xff0c;您已经学习了如何使用片段函数和着色器为模型添加颜色和细节。另一种选择是使用图像纹理&#xff0c;您将在本章中学习如何作。更具体地说&#xff0c;您将了解&#xff1a; • UV 坐标&#xff1a;如何展开网格&#xff0c;以便可以对其应用纹理。 • 纹…

Idea 和 Pycharm 快捷键

一、快捷键 二、Pycharm 中怎么切换分支 参考如下 如果在界面右下角 没有看到当前所在的分支&#xff0c;如 “Git:master” 3. 有了 4.

fody引用c++的dll合并后提示找不到

fody引用c的dll合并后提示找不到 解决方案&#xff1a; 在 FodyWeavers.xml 文件中添加配置 CreateTemporaryAssemblies‘true’ 官方文档&#xff1a;https://github.com/Fody/Costura <Weavers xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:noN…

初识flutter1

为什么使用flutter, 说直白一点,就是移动UI框架, 个人认为优势是: 1.一套代码adnroid 和ios 可以使用, 代码好维护 2.原生用户界面 3.开源、免费的 开发工具&#xff1a; 1.下载 java 包, 根据自己的电脑配置选择 官网下载: https://www.oracle.com/java/technologies/download…

12字符函数

一、函数strchr与strrchr 注意&#xff1a; 这两个函数的功能&#xff0c;都是在指定的字符串 s 中&#xff0c;试图找到字符 c。strchr() 从左往右找&#xff0c;strrchr() 从右往左找。字符串结束标记 ‘\0’ 被认为是字符串的一部分。 图解&#xff1a; 示例代码&#xff…

QT6开发高性能企业视频会议-8 使用VSCode+Copilot AI开发

Github Copilot是Github和OpenAI推出的AI编程辅助工具&#xff0c;之前版本的Github Copilot只有简单的代码自动补全&#xff0c;根据注释生成一些代码等辅助功能。 近期Copilot有了一次大的升级&#xff0c;加入了Agent模式&#xff0c;可以实现自然语言对话讨论和最重要的&a…

矩阵的奇异值(SVD)分解和线性变换

矩阵的奇异值&#xff08;SVD&#xff09;分解和线性变换 SVD定义 奇异值分解&#xff08;Singular Value Decomposition&#xff0c;简称 SVD&#xff09;是一种重要的线性代数工具&#xff0c;能够将任意矩阵 ( A ∈ R m n \mathbf{A} \in \mathbb{R}^{m \times n} A∈Rmn…