js遍历数组和对象的常用方法

遍历数组的常用方法

  1. for循环遍历:使用最广泛的方法,通过下标访问每一个数组元素。

    const arr = [1, 2, 3, 4, 5];
    for(let i=0; i<arr.length; i++) {console.log(arr[i]);
    }
    

  2. forEach遍历:数组的forEach()方法可以遍历每个元素,对每个元素做一些操作。

    const arr = [1, 2, 3, 4, 5];
    arr.forEach(function(item, index, array) {console.log(item, index);
    });
    

  3. map遍历:数组的map()方法可以遍历每个元素,并返回一个新的数组。

    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.map(function(item, index, array) {return item * 2;
    });
    console.log(newArr);
    

  4. for…of遍历:ES6引入的for…of循环可以遍历所有可迭代的对象,包括数组、字符串、Set、Map等。

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

遍历对象的常用方法

  1. for...in遍历:使用for...in循环可以遍历对象的所有可枚举属性。

    const obj = {name: '张三', age: 18, sex: '男'};
    for(const key in obj) {console.log(key + ': ' + obj[key]);
    }
    

  2. Object.keys()遍历:Object.keys()方法返回一个包含对象的所有属性名的数组,然后可以通过遍历数组来访问对象的属性。

    const obj = {name: '张三', age: 18, sex: '男'};
    const keys = Object.keys(obj);
    for(let i=0; i<keys.length; i++) {console.log(keys[i] + ': ' + obj[keys[i]]);
    }
    

  3. Object.values()遍历:Object.values()方法返回一个包含对象的所有属性值的数组,然后可以通过遍历数组来访问对象的属性值。

    const obj = {name: '张三', age: 18, sex: '男'};
    const values = Object.values(obj);
    for(let i=0; i<values.length; i++) {console.log(values[i]);
    }
    

  4. Object.entries()遍历:Object.entries()方法返回一个包含对象的所有属性和属性值的数组,其中每个元素是一个包含两个元素的数组,第一个元素是属性名,第二个元素是属性值。

    const obj = {name: '张三', age: 18, sex: '男'};
    const entries = Object.entries(obj);
    for(let i=0; i<entries.length; i++) {console.log(entries[i][0] + ': ' + entries[i][1]);
    }
    

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

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

相关文章

微信小程序设计之主体文件app-wxss/less

一、新建一个项目 首先&#xff0c;下载微信小程序开发工具&#xff0c;具体下载方式可以参考文章《微信小程序开发者工具下载》。 然后&#xff0c;注册小程序账号&#xff0c;具体注册方法&#xff0c;可以参考文章《微信小程序个人账号申请和配置详细教程》。 在得到了测…

注解配置SpringMVC

文章目录 目的1、创建初始化类&#xff0c;代替web.xml2、创建SpringConfig配置类&#xff0c;代替spring的配置文件3、创建WebConfig配置类&#xff0c;代替SpringMVC的配置文件4、测试功能 目的 使用配置类和注解代替web.xml和SpringMVC配置文件的功能 1、创建初始化类&…

STM32F4X之中断二

一、外部中断 外部中断&#xff1a;外部中断的中断是相对于外部中断控制器&#xff08;EXTI&#xff09;来说&#xff0c;如下图所示&#xff1a; EXTI掌管着23根中断线&#xff0c;具体分布图下&#xff1a; 16根连接GPIO口&#xff0c;如下图&#xff1a; 所有的0口连接到中…

ORACLE表空间说明及操作

ORACLE 表空间作用 数据存储&#xff1a;表空间是数据库中存储数据的逻辑结构。它提供了用于存储表、索引、视图、存储过程等数据库对象的空间。通过划分数据和索引等对象的存储&#xff0c;可以更好地管理和组织数据库的物理存储结构。性能管理和优化&#xff1a;通过将不同类…

餐饮外卖小程序商城的作用是什么

随着互联网及线上餐饮的发展趋势&#xff0c;行业洗牌正在加速&#xff0c;并且对餐饮连锁门店提出更高要求&#xff0c;餐饮数字化转型加快&#xff0c;积极发展线上经营是不少餐饮商家的首选。这其中&#xff0c;餐饮外卖商城成为很多餐饮品牌的线上经营品牌&#xff0c;也是…

内核进程初始化和创建

task_struct 1.进程的状态 分时技术进行多进程调度 重点&#xff1a;进程的创建是如何的&#xff1f; linux在初始化的过程中那个会进行0号进程的创建&#xff0c;fork sched_init(); 做了什么 内核态 不可抢占 用户态 可以抢占 move_to_user_mode(); 把内核状态切换到…

JackSon工具类

JackSon工具类 一、简介 Jackson 是当前用的比较广泛的&#xff0c;用来序列化和反序列化 json 的 Java 的开源框架。 Jackson 的核心模块由三部分组成&#xff1a; jackson-core&#xff0c;核心包&#xff0c;提供基于"流模式"解析的相关 API&#xff0c;它包括…

VR全景应用广泛体现在哪里?有何优势?

VR全景作为一种新型营销方式&#xff0c;正在逐渐走进人们的视线&#xff0c;它区别于以往单一角度的照片和视频&#xff0c;VR全景制作显得更加直观、更加真实、更加生动。VR全景通过VR技术将所拍摄的图片变成720度可观看的场景模式&#xff0c;把产品的特色以及魅力整体呈现展…

封装axios的两种方式

作为前端工程师&#xff0c;经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性&#xff0c;有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。 1. 将请求方式作为调用参数传递进来 首先导入了axios, AxiosIn…

对长度为n的顺序表L,编写一个时间复杂度为O(n),空间复杂度为O(1)的算法,该算法删除线性表中的所有值为x的数据元素

对长度为n的顺序表L&#xff0c;编写一个时间复杂度为O(n)&#xff0c;空间复杂度为O(1)的算法&#xff0c;该算法删除线性表中的所有值为x的数据元素 算法思路&#xff1a; 用count标记遇到x的次数&#xff0c;每次遇到x&#xff0c;count 遇到非x的元素&#xff0c;把它前移…

vue3后台管理系统之顶部tabbar组件搭建

1.1静态页面搭建 <template><div class"tabbar"><div class"tabbar_left"><!-- 面包屑 --><Breadcrumb /></div><div class"tabbar_right"><!-- 设置 --><Setting /></div></di…

自动驾驶的未来展望和挑战

自动驾驶技术是一项引人瞩目的创新&#xff0c;将在未来交通领域产生深远影响。然而&#xff0c;随着技术的不断演进&#xff0c;自动驾驶也面临着一系列挑战和障碍。本文将探讨自动驾驶的未来发展方向、技术面临的挑战&#xff0c;以及自动驾驶对社会和环境的潜在影响。 自动驾…

封装一个vue3 Toast组件,支持组件和api调用

先来看一段代码 components/toast/index.vue <template><div v-if"isShow" class"toast">{{msg}}</div> </template><script setup> import { ref, watch } from vue const props defineProps({show: {type: Boolean,def…

docker搭建个人镜像仓库

docker搭建个人镜像仓库 安装registry mkdir docker-registry cd docker-registry mkdir registry mkdr auth vim docker-compose.ymldocker-compose.yml的内容如下&#xff1a; version: 3 services:registry:image: registrycontainer_name: registryvolumes:- ./registry…

GPT带我学-设计模式-10观察者模式

1 请你介绍一下观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种设计模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象&#xff08;被观察者&#xff09;的状态发生改变时&#xff0c;所有依赖于它的对象&#xff08;观察者&…

Canvas的缓冲区

Canvas的缓冲区 canvas的绘制缓冲区和显示缓冲区理解为两个容器&#xff0c;它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据&#xff0c;而显示缓冲区是绘制缓冲区最终的存储位置。 绘制缓冲区&#xff08;Drawing Buffer&#xff09;: 它是在 canvas 元…

JVM 类的加载子系统

文章目录 类的加载过程加载阶段链接阶段初始化 类的加载器测试代码中获取对应的加载器获取加载器加载的路径不同类对应的加载器自定义加载器自定义加载器的方式 获取类的加载器的方式双亲委派机制双亲委派机制的好处 Java 的 SPI 机制1. 接口定义2. 具体实现3. 配置 META-INF/s…

Redis中设置Hash数据类型的过期时间

1 方案 可以先对key进行赋值&#xff0c;然后对key设置一个过期时间。 &#xff08;1&#xff09;依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.7.3</version></dependency>…

Kubernetes (K8S)概述

目录 1、K8S 是什么&#xff1f; 1.1 作用 1.2 由来 1.3 含义 1.4 官网 2、为什么要用 K8S? 2.1 K8S 解决了裸跑Docker 的若干痛点 2.2 K8S主要功能如下 2.3 K8S 的特性 3、Kubernetes 集群架构与组件 3.1 核心组件 3.1.1 Master 组件 3.1.2 控制器主要包括 3.1…

Spring Cloud Gateway 路由构建器的源码分析

Spring Cloud Gateway 路由构建器的源码分析 文章目录 1. 路由构建器的入口2. 创建路由规则3. 设置路由规则和属性4. 路由过滤器的设置5. 构建和获取路由规则&#xff1a;6. 实例化路由构建器&#xff1a;8. 路由构建器的源码分析8.1 RouteLocator接口8.2 RouteLocatorBuilder…