当前位置： 首页 > article >正文

js常用的数组遍历方式

article 2025/10/1 10:36:00

以下是一个完整的示例，将包含图片、文字和数字的数组渲染到 HTML 页面，使用 ​多种遍历方式​ 实现不同的渲染效果：

1. 准备数据（数组）

const items = [{ id: 1, name: "苹果", price: 5.99, image: "https://via.placeholder.com/100?text=Apple" },{ id: 2, name: "香蕉", price: 3.49, image: "https://via.placeholder.com/100?text=Banana" },{ id: 3, name: "橙子", price: 4.99, image: "https://via.placeholder.com/100?text=Orange" }
];

2. HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>数组渲染示例</title><style>.item { border: 1px solid #ddd; padding: 10px; margin: 10px; display: inline-block; text-align: center;}.item img { width: 100px; height: 100px; }</style>
</head>
<body><h2>1. forEach 渲染</h2><div id="forEach-container"></div><h2>2. map + join 渲染</h2><div id="map-container"></div><h2>3. for...of 渲染</h2><div id="forOf-container"></div><script src="script.js"></script>
</body>
</html>

3. JavaScript 渲染逻辑（script.js）

// 数据
const items = [{ id: 1, name: "苹果", price: 5.99, image: "https://via.placeholder.com/100?text=Apple" },{ id: 2, name: "香蕉", price: 3.49, image: "https://via.placeholder.com/100?text=Banana" },{ id: 3, name: "橙子", price: 4.99, image: "https://via.placeholder.com/100?text=Orange" }
];// 1. forEach 方式
const forEachContainer = document.getElementById('forEach-container');
items.forEach(item => {const div = document.createElement('div');div.className = 'item';div.innerHTML = `<img src="${item.image}" alt="${item.name}"><h3>${item.name}</h3><p>价格: ¥${item.price.toFixed(2)}</p>`;forEachContainer.appendChild(div);
});// 2. map + join 方式
const mapContainer = document.getElementById('map-container');
const htmlString = items.map(item => `<div class="item"><img src="${item.image}" alt="${item.name}"><h3>${item.name}</h3><p>价格: ¥${item.price.toFixed(2)}</p></div>
`).join('');
mapContainer.innerHTML = htmlString;// 3. for...of 方式
const forOfContainer = document.getElementById('forOf-container');
for (const item of items) {const div = document.createElement('div');div.className = 'item';div.innerHTML = `<img src="${item.image}" alt="${item.name}"><h3>${item.name}</h3><p>价格: ¥${item.price.toFixed(2)}</p>`;forOfContainer.appendChild(div);
}

4. 效果说明

  1. ​**forEach**​

    • 动态创建 DOM 元素并追加到容器中。
    • 适合需要逐个处理元素的场景。

  2. ​**map + join**​

    • 生成 HTML 字符串后一次性插入。
    • ​性能更好​（减少 DOM 操作次数）。

  3. ​**for...of**​

    • 语法简洁，类似 forEach，但可以配合 break 或 continue 控制流程。

渲染效果（图片未加载）

相关文章：

js常用的数组遍历方式

以下是一个完整的示例&#xff0c;将包含图片、文字和数字的数组渲染到 HTML 页面&#xff0c;使用 ​多种遍历方式​ 实现不同的渲染效果&#xff1a; 1. 准备数据&#xff08;数组&#xff09; const items [{ id: 1, name: "苹果", price: 5.99, image: "h…...

编程日记 2025/9/19 23:26:00

【网络编程】五、三次握手 四次挥手

文章目录 Ⅰ. 三次握手Ⅱ. 建立连接后的通信Ⅲ. 四次挥手 Ⅰ. 三次握手 ​ 1、首先双方都是处于未通信的状态&#xff0c;也就是关闭状态 CLOSE。 ​ 2、因为服务端是为了服务客户端的&#xff0c;所以它会提前调用 listen() 函数进行对客户端请求的监听。 ​ 3、接着客户端就…...

编程日记 2025/9/18 20:24:16

【类拷贝文件的运用】

常用示例 当我们面临将文本文件分成最大大小块的时&#xff0c;我们可能会尝试编写如下代码: public class TestSplit {private static final long maxFileSizeBytes 10 * 1024 * 1024; // 默认10MBpublic void split(Path inputFile, Path outputDir) throws IOException {…...

编程日记 2025/9/20 3:22:37

从 AGI 到具身智能体：解构 AI 核心概念与演化路径全景20250509

&#x1f916; 从 AGI 到具身智能体&#xff1a;解构 AI 核心概念与演化路径全景 作者&#xff1a;AI 应用实践者 在过去的几年中&#xff0c;AI 领域飞速发展&#xff0c;从简单的文本生成模型演进为今天具备复杂推理、感知能力的“智能体”系统。本文将从核心概念出发&#x…...

编程日记 2025/9/18 20:13:11

Docker Compose 的历史和发展

这张图表展示了Docker Compose从V1到V2的演变过程&#xff0c;并解释了不同版本的Compose文件格式及其支持情况。以下是对图表的详细讲解&#xff1a; Compose V1 No longer supported: Compose V1已经不再支持。Compose file format 3.x: 使用了版本3.x的Compose文件格式。 …...

编程日记 2025/9/19 21:28:27

ARMV8 RK3399 u-boot TPL启动流程分析 --crt0.S

上一篇介绍到start.S 最后一个指令是跳转到_main, 接下来分析 __main 都做了什么 arch/arm/lib/crt0.S __main 注释写的很详细&#xff0c;主要分为5步 1. 准备board_init_f的运行环境 2. 跳转到board_init_f 3. 设置broad_init_f 申请的stack 和 GD 4. 完整u-boot 执行re…...

编程日记 2025/9/22 23:41:55

从 JIT 即时编译一直讲到CGI|FastGGI|WSGI|ASGI四种协议的实现细节

背景 我一度理解错了这个东西&#xff0c;之前没有AI的时候&#xff0c;也没深究过&#xff0c;还觉得PHP8支持了常驻内存的运行的错误理解&#xff0c;时至今日再来看这个就很清晰了。 另外&#xff0c;早几年对以上4个协议&#xff0c;我也没搞懂&#xff0c;时至今日&…...

编程日记 2025/9/18 18:40:39

Vue.js 页面切换空白与刷新 404 问题深度解析

在使用 Vue.js 开发单页应用 (SPA) 的过程中&#xff0c;开发者经常会遇到两个常见问题&#xff1a;页面切换时出现短暂的空白屏幕&#xff0c;以及刷新页面时返回 404 错误。这两个问题不仅影响用户体验&#xff0c;还可能阻碍项目的正常上线。本文将深入探讨这两个问题的成因…...

编程日记 2025/9/14 5:58:47

CSS3 遮罩

在网页设计中&#xff0c;我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3 遮罩&#xff08;mask&#xff09;允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解 CSS3 遮罩的功能和应用。 什么是 CSS3 遮罩&#xff1f; CSS3 遮罩是一种…...

编程日记 2025/9/19 10:19:12

ResNet残差神经网络的模型结构定义（pytorch实现）

ResNet残差神经网络的模型结构定义&#xff08;pytorch实现&#xff09; ResNet‑34 ResNet‑34的实现思路。核心在于&#xff1a; 定义残差块&#xff08;BasicBlock&#xff09;用 _make_layer 方法堆叠多个残差块按照 ResNet‑34 的通道和层数配置来搭建网络 import torch…...

编程日记 2025/9/19 21:47:36

uniapp｜商品列表加入购物车实现抛物线动画效果、上下左右抛入、多端兼容(H5、APP、微信小程序)

以uniapp框架为基础，详细解析商品列表加入购物车抛物线动画的实现方案。通过动态获取商品点击位置与购物车坐标，结合CSS过渡动画模拟抛物线轨迹，实现从商品图到购物车图标的动态效果。 目录 核心实现原理坐标动态计算抛物线轨迹模拟​动画元素控制代码实现详解模板层设计脚本…...

编程日记 2025/9/19 20:04:59

谈AI/OT 的融合

过去的十几年间&#xff0c;工业界讨论最多的话题之一就是IT/OT 融合&#xff0c;现在&#xff0c;我们不仅要实现IT/OT 的融合&#xff0c;更要面向AI/OT 的融合。看起来不太靠谱&#xff0c;却留给我们无限的想象空间。OT 领域的专家们不要再当“九斤老太”&#xff0c;指责这…...

编程日记 2025/9/19 11:51:27

USB传输模式

USB有四种传输模式: 控制传输, 中断传输, 同步传输, 批量传输 1. 中断传输 中断传输一般用于小批量, 非连续的传输. 对实时性要求较高. 常见的使用此传输模式的设备有: 鼠标, 键盘等. 要注意的是, 这里的 “中断” 和我们常见的中断概念有差异. Linux中的中断是设备主动发起的…...

编程日记 2025/9/19 21:45:34

Tomcat的`context.xml`配置详解！

全文目录&#xff1a; 开篇语前言一、context.xml 文件的基本结构二、常见的 context.xml 配置项1. **数据源&#xff08;DataSource&#xff09;配置**示例&#xff1a; 2. **日志配置**示例&#xff1a; 3. **设置环境变量&#xff08;Environment Variables&#xff09;**示…...

编程日记 2025/7/9 7:56:50

MapReduce 的工作原理

MapReduce 是一种分布式计算框架&#xff0c;用于处理和生成大规模数据集。它将任务分为两个主要阶段&#xff1a;Map 阶段和 Reduce 阶段。开发人员可以使用存储在 HDFS 中的数据&#xff0c;编写 Hadoop 的 MapReduce 任务&#xff0c;从而实现并行处理1。 MapReduce 的工作…...

编程日记 2025/9/21 14:57:39

.NET10 - 尝试一下Open Api的一些新特性

1.简单介绍 .NET9中Open Api有了很大的变化&#xff0c;在默认的Asp.NET Core Web Api项目中&#xff0c;已经移除了Swashbuckle.AspNetCore package&#xff0c;同时progrom中也变更为 builder.Servers.AddOpenApi() builder.Services.MapOpenApi() 2025年微软将发布…...

编程日记 2025/9/20 8:56:11

RabbitMQ 工作模式

RabbitMQ 一共有 7 中工作模式&#xff0c;可以先去官网上了解一下&#xff08;一下截图均来自官网&#xff09;&#xff1a;RabbitMQ 官网 Simple P&#xff1a;生产者&#xff0c;要发送消息的程序&#xff1b;C&#xff1a;消费者&#xff0c;消息的接受者&#xff1b;hell…...

编程日记 2025/9/19 10:20:35

基于C++的多线程网络爬虫设计与实现（CURL + 线程池）

在当今大数据时代&#xff0c;网络爬虫作为数据采集的重要工具&#xff0c;其性能直接决定了数据获取的效率。传统的单线程爬虫在面对海量网页时往往力不从心&#xff0c;而多线程技术可以充分利用现代多核CPU的计算能力&#xff0c;显著提升爬取效率。本文将详细介绍如何使用C…...

编程日记 2025/9/20 10:43:56

Android11.0 framework第三方无源码APP读写断电后数据丢失问题解决

1.前言 在11.0中rom定制化开发中，在某些产品开发中，在某些情况下在App用FileOutputStream读写完毕后，突然断电 会出现写完的数据丢失的问题，接下来就需要分析下关于使用FileOutputStream读写数据的相关流程，来实现相关 功能 2.framework第三方无源码APP读写断电后数据丢…...

编程日记 2025/6/5 1:57:38

国产大模型「五强争霸」：决战AGI，谁主沉浮？

引言 中国AI大模型市场正经历一场史无前例的洗牌&#xff01;曾经“百模混战”的局面已落幕&#xff0c;字节、阿里、阶跃星辰、智谱和DeepSeek五大巨头强势崛起&#xff0c;形成“基模五强”新格局。这场竞争不仅是技术实力的较量&#xff0c;更是资源、人才与生态的全面博弈。…...

编程日记 2025/7/16 17:47:53

【Python 基础语法】

Python 基础语法是编程的基石&#xff0c;以下从核心要素到实用技巧进行系统梳理&#xff1a; 一、代码结构规范 缩进规则 使用4个空格缩进&#xff08;PEP 8标准&#xff09;缩进定义代码块&#xff08;如函数、循环、条件语句&#xff09; def greet(name):if name: # 正确缩…...

编程日记 2025/7/15 5:05:06

【日撸 Java 三百行】Day 11（顺序表（一））

目录 Day 11&#xff1a;顺序表&#xff08;一&#xff09; 一、关于顺序表 二、关于面向对象 三、代码模块分析 1. 顺序表的属性 2. 顺序表的方法 四、代码及测试 拓展&#xff1a; 小结 Day 11&#xff1a;顺序表&#xff08;一&#xff09; Task&#xff1a; 在《数…...

编程日记 2025/9/28 15:41:27

path环境变量满了如何处理，分割 PATH 到 Path1 和 Path2

要正确设置 Path1 的值&#xff0c;你需要将现有的 PATH 环境变量 中的部分路径复制到 Path1 和 Path2 中。以下是详细步骤&#xff1a; 步骤 1&#xff1a;获取当前 PATH 的值 打开环境变量窗口&#xff1a; 按 Win R&#xff0c;输入 sysdm.cpl&#xff0c;点击 确定。在 系…...

编程日记 2025/9/29 0:18:13

软考 系统架构设计师系列知识点之杂项集萃（55）

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;54&#xff09; 第89题 某软件公司欲开发一个Windows平台上的公告板系统。在明确用户需求后&#xff0c;该公司的架构师决定采用Command模式实现该系统的界面显示部分&#xff0c;并设计UML类图如…...

编程日记 2025/9/20 10:46:34

保持Word中插入图片的清晰度

大家有没有遇到这个问题&#xff0c;原本绘制的高清晰度图片&#xff0c;插入word后就变模糊了。先说原因&#xff0c;word默认启动了自动压缩图片功能&#xff0c;分享一下如何关闭这项功能&#xff0c;保持Word中插入图片的清晰度。 ①在Word文档中&#xff0c;点击左上角的…...

编程日记 2025/9/19 10:21:00

Web应用开发指南

一、引言 随着互联网的迅猛发展&#xff0c;Web应用已深度融入日常生活的各个方面。为满足用户对性能、交互与可维护性的日益增长的需求&#xff0c;开发者需要一整套高效、系统化的解决方案。在此背景下&#xff0c;前端框架应运而生。不同于仅提供UI组件的工具库&#xff0c…...

编程日记 2025/9/25 22:49:41

贝叶斯算法

贝叶斯算法是一类基于贝叶斯定理的机器学习算法&#xff0c;它们在分类任务中表现出色&#xff0c;尤其在处理具有不确定性和 probabilistic 关系的数据时具有独特优势。本文将深入探讨贝叶斯算法的核心原理、主要类型以及实际应用案例&#xff0c;带你领略贝叶斯算法在概率推理…...

编程日记 2025/8/19 23:00:09

Linux复习笔记（三） 网络服务配置（web)

遇到的问题&#xff0c;都有解决方案&#xff0c;希望我的博客能为你提供一点帮助。 二、网络服务配置 2.3 web服务配置 2.3.1通信基础&#xff1a;HTTP协议与C/S架构&#xff08;了解&#xff09; ​​HTTP协议的核心作用​​ Web服务基于HTTP/HTTPS协议实现客户端&#xff…...

编程日记 2025/9/19 10:20:43

springboot旅游小程序-计算机毕业设计源码76696

目 录 摘要 1 绪论 1.1研究背景与意义 1.2研究现状 1.3论文结构与章节安排 2 基于微信小程序旅游网站系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统…...

编程日记 2025/9/19 11:53:08

uniapp自定义导航栏搭配插槽

<uni-nav-bar dark :fixed"true" shadow background-color"#007AFF" left-icon"left" left-text"返回" clickLeft"back"><view class"nav-bar-title">{{ navBarTitle }}</view><block v-slo…...

编程日记 2025/9/19 10:19:27