遍历数组和对象的方法都有哪些?

news/2024/11/30 6:24:23/文章来源:https://www.cnblogs.com/ai888/p/18577964

在前端开发中,遍历数组和对象的方法有很多,以下是常用的几种,并分别针对数组和对象进行说明:

数组遍历:

  • for 循环: 最基本的循环方式,可以完全控制循环的起始、结束和步长。
const arr = [1, 2, 3, 4, 5];for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
  • for...in 循环: 遍历数组的索引(键名)。 不推荐用于数组遍历, 因为:
    • 遍历顺序不保证与数组索引顺序一致。
    • 会遍历到继承的属性。
    • 效率低于 for 循环和 for...of 循环。
const arr = [1, 2, 3, 4, 5];for (const index in arr) {console.log(index, arr[index]); // index 是字符串类型的索引
}
  • for...of 循环: ES6 引入,遍历数组的元素值。推荐用于遍历数组。
const arr = [1, 2, 3, 4, 5];for (const value of arr) {console.log(value);
}
  • forEach() 方法: 遍历数组的每个元素,并对每个元素执行回调函数。
const arr = [1, 2, 3, 4, 5];arr.forEach((value, index) => {console.log(index, value);
});
  • map() 方法: 遍历数组的每个元素,并对每个元素执行回调函数,返回一个新数组,新数组包含回调函数的返回值。 常用于对数组元素进行转换。
const arr = [1, 2, 3, 4, 5];const doubled = arr.map(value => value * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

对象遍历:

  • for...in 循环: 遍历对象的键名(属性名)。 这是遍历对象属性的常用方法。
const obj = { a: 1, b: 2, c: 3 };for (const key in obj) {console.log(key, obj[key]);
}
  • Object.keys(): 返回一个包含对象自身所有可枚举属性名的数组。可以结合 for...of 或其他数组遍历方法使用。
const obj = { a: 1, b: 2, c: 3 };const keys = Object.keys(obj);
for (const key of keys) {console.log(key, obj[key]);
}
  • Object.values(): 返回一个包含对象自身所有可枚举属性值的数组。
const obj = { a: 1, b: 2, c: 3 };const values = Object.values(obj);
console.log(values); // [1, 2, 3]
  • Object.entries(): 返回一个包含对象自身所有可枚举属性的键值对数组。
const obj = { a: 1, b: 2, c: 3 };const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]for (const [key, value] of entries) {console.log(key, value);
}

选择哪种方法取决于你的具体需求。 对于数组,for...offorEach 通常是首选。 对于对象,for...inObject.keys()Object.values()Object.entries() 提供了不同的遍历方式,可以根据需要选择。

希望以上信息对您有所帮助!

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

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

相关文章

语言能打败数值回归吗?基于语言的多模态轨迹预测

语言能打败数值回归吗?基于语言的多模态轨迹预测语言模型在语境理解和生成表现方面表现出了令人印象深刻的能力。受语言基础模型最近成功的启发,提出了LMTraj(基于语言的多模态轨迹预测器),它将轨迹预测任务转化为一种问答问题。与将轨迹坐标序列视为连续信号的传统数值回…

通过变化先验和条件扩散模型实现基于参考的超分辨率

通过变化先验和条件扩散模型实现基于参考的超分辨率 基于参考的超分辨率(RefSR)有可能在遥感图像的空间和时间分辨率之间架起桥梁。然而,现有的RefSR方法受到内容重建的忠实性和大尺度因子下纹理转移有效性的限制。条件扩散模型为生成逼真的高分辨率图像开辟了新的机会,但在…

小米10ultra 同样亮度 ISO不同导致的分辨率不同

头灯补光 IMG_20241130_023716.jpg 4800w iso320 IMG_20241130_023724.jpg 4800w iso50

黑苹果macOS系统/恢复版基础安装教程

因分为两种安装方式,本文主要介绍两种安装方式:U盘安装,以及在 Windows 下使用镜像恢复软件安装的方式。本文的操作方法支持 Windows 和 macOS 分别使用不同硬盘的安装方法。如果要安装成单个硬盘多系统的方式,注意你的分区结构。两种方法列举如下(OpenCore同样适用): …

linux装机(装系统)

1. 开机(重启)-- 解释: <F11>:进入装机选择 <DEL>:biso设置2.按F11 进入装机选择(U盘装机或PXE网络装机)例如:U盘启动 选择 ( UEFI USB XXXXXXX ) 2.直接下一步 3.难点(设置磁盘)选择设置磁盘 选择手动分区 通过加减去控制分区(如果有原先分配的…

C++ 学习笔记(2):String、递归、排序

背景 记个笔记,这几天跟着这个教程到第五章了,顺带把递归和排序也看了(沙比学校天天整些屁事都没什么空折腾)。 String 字符串就直接用 GPT 生成了,这里就当文档记。(感觉没啥好说的)字符串的输入和输出输入字符串:使用 cin 输入字符串,注意会自动去除末尾的换行符。 …

小米10ultra ISO12233 超广角IMX350 不同亮度下比较 分辨率

自动模式 只有屋顶的灯 IMG_20241130_005539.HEIC ISO1045 自动模式 头灯补光 IMG_20241130_005547.HEIC ISO55 专业模式 固定ISO100 IMG_20241130_005603.jpg 只有屋顶的灯 专业模式 固定ISO100 头灯补光

centos7的root密码重置

1. 重启操作系统,出现以下界面时,按键盘e键继续。 2.出现如下界面时,往下翻,找到 linux XXX (其实是设置系统启动内核参数)添加“rw single init=/bin/bash”,添加后按“Ctrl + x”继续。 3.出现如下界面时,输入“passwd”,按照密码复杂程度进行重置root密码。 4.密…

Solidity学习笔记-2

16.函数重载 16_01.重载函数重载(overloading):即函数名字相同,但输入的参数类型不同的函数可以同时存在;(被视为是不同的函数) Solidity不允许修饰器modifier重载; 重载的函数经过编译之后,由于不同的参数类型,都变成了不同的函数选择器(selector,29节有介绍);示…

gitlab分支保护

作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任。 目录1.开发者无法推送代码到master分支案例1.1 查看jasonyin2020角色1.2 查看jasonyin2020有权限的相关项目1.3 使用jasonyin2020用户拉取meta-data项目所有分支到本地1.4 使用jasonyin2020用户推送数据到dev…

Python绘制南北极地图

import matplotlib.pyplot as plt import numpy as np import cartopy.crs as ccrs import cartopy.feature as cfeature import matplotlib.path as mpathdef plot_polar_map(dmeridian: float = 30.0, # 经度网格线间隔dparallel: float = 15.0): # 纬度网格线间隔"&q…

开源 - Ideal库 - Excel帮助类,TableHelper实现(二)

本文实现对象集合与DataTable的转换,包括按列名数组、列名-类型键值对、类创建表格的方法,并对类进行类型校验和反射获取属性信息,单元测试代码已上传至代码库。书接上回,我们今天开始实现对象集合与DataTable的相互转换。01、接口设计 上文中已经详细讲解了整体设计思路以…