javaScript | 练习:给出一个存储学生信息的对象数组,实现对每个对象的遍历,先输出每个对象的属性名,再输出对应的属性值

news2024/11/19 1:35:32

考察的知识点包括:

  1. JavaScript 数组的遍历。
  2. JavaScript 对象的遍历,特别是使用 for...in 循环。
  3. 如何使用方括号[]和点号 . 访问对象的属性和方法。
  4. 控制台输出(console.log)的使用。

控制台输出结果如下:



参考代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 定义一个存储若干学生信息的数组
        let students = [  // 一个数组 里面的元素是一个个的对象
            { name: '张三', age: 16, gender: '男', hometown: '广东省' },
            { name: '李四', age: 17, gender: '男', hometown: '河北省' },
            { name: '王五', age: 18, gender: '男', hometown: '福建省' },
            { name: '马六', age: 19, gender: '男', hometown: '河南省' }
        ]
        // 实现遍历数组中的对象
        // 1.首先外层循环是对数组的遍历 获取每个数组里元素的下标 在这里即获取每个对象的下标
        for (i = 0; i < students.length; i++) {
            // 2.内层 对对象的遍历
            for (let key in students[i]) { // 这里的key呢 实际上就是代表对象的每个属性 如:'name' 'age'
                console.log(key)// 打印对象的属性名
                console.log(students[i][key]) // 获取对象属性的值 相当于 数组对象名['属性名']   
            }
            console.log('_________________________')

        }

    </script>

</body>

</html>

代码解析如下:

  1. 声明并初始化一个名为 students 的数组,数组中包含了四个学生的对象。每个学生对象都有四个属性:name(姓名),age(年龄),gender(性别),和 hometown(家乡)。
  2. 使用一个 for 循环遍历 students 数组。循环变量 i 从 0 开始,直到 students.length(数组长度)为止,每次循环 i 增加 1。
  3. 对于数组中的每个学生对象,再次使用一个 for...in 循环来遍历对象的所有可枚举属性。变量 key 在每次循环中取得当前属性的名字。
  4. 在 for...in 循环内部,首先用 console.log(key); 语句打印出当前属性的名字。由于属性名是动态获取的,所以这段代码可以适用于任意结构的对象,而不仅仅是学生信息对象。
  5. 紧接着,使用 console.log(students[i][key]); 语句打印出当前属性名对应的属性值。这里通过 students[i][key] 访问方式来获取当前对象 students[i] 的 key 属性的值。
  6. 在遍历完一个学生对象的所有属性之后,使用 console.log('----------------'); 打印一条分隔线,以便在输出中区分不同学生的信息。

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

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

相关文章

C++17中auto作为非类型模板参数

非类型模板参数是具有固定类型的模板参数&#xff0c;用作作为模板参数传入的constexpr值的占位符。非类型模板参数可以是以下类型&#xff1a; (1).整型&#xff1b; (2).枚举类型&#xff1b; (3).std::nullptr_t&#xff1b; (4).指向对象的指针或引…

jpg图片格式转换怎么做?教你一种图片格式转换方法

Jpg格式图片怎么快速转换&#xff1f;常见的图片格式有jpg、png等格式&#xff0c;当我们想要将常用的jpg格式图片转换成其他格式的时候&#xff0c;要怎么办呢&#xff1f;很简单通过使用图片转换器&#xff08;https://www.yasuotu.com/geshi&#xff09;&#xff0c;无需下载…

简单接入电商API接口|轻松实现实时采集淘宝、抖音、快手、1688商品,挖掘潜力款

今天给大家带来一款非常实用的电商API接口&#xff0c;这款数据采集接口支持淘宝采集、抖音采集、快手采集、1688采集以及潜力款分析&#xff0c;功能强大&#xff0c;助您在电商领域更上一层楼。 首先&#xff0c;我们来了解一下淘宝采集功能。作为国内最大的电商平台&#xf…

系统分析师论文总结【持续更新】

2024年3月4日&#xff0c;新的软考规则出来&#xff0c;高项改为一年一次&#xff0c;架构师改为一年两次。 下半年考试安排&#xff0c;如下图&#xff08;来源官网&#xff09; 收集整理系统分析师论文&#xff0c;方便备查。 一、2010年论文 1、论软件维护及软件课维护性…

C++ 哈希

目录 1. 哈希概念 2. 哈希冲突 3. 哈希函数 4. 哈希冲突解决 4.1 闭散列 4.2 开散列 4.3 对于哈希表的补充 5. 开散列与闭散列比较 6. 哈希表的模拟实现以及unorder_set和unorder_map的封装 1. 哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间…

代码随想录刷题笔记 DAY 43 | 完全背包基础 | 零钱兑换 II No.518 | 组合总和 IV No.377

文章目录 Day 4401. 完全背包基础<1> 完全背包的区别<2> 案例 02. 零钱兑换 II&#xff08;No. 518&#xff09;<1> 题目<2> 笔记<3> 代码 03. 组合总和 IV&#xff08;No. 377&#xff09;<1> 题目<2> 笔记<3> 代码 Day 44 …

three.js 相机跟着玩家走(第三人称漫游)

<template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div></div></el-main></el-container></div> </template>s <script> // 引入轨道…

实在TARS大模型斩获多项重磅大奖,AI领域实力认可

近日&#xff0c;实在智能TARS&#xff08;塔斯&#xff09;大模型凭借在多个垂直行业场景的优秀落地应用案例&#xff0c;以及AIGC领域的深耕和技术积累&#xff0c;荣获多项重磅大奖。 TARS大模型是是实在智能基于在自然语言处理&#xff08;NLP&#xff09;领域深厚的技术积…

高等数学常用公式

高等数学常用公式 文章目录 内容大纲 内容 大纲 感谢观看 期待关注 有问题的小伙伴请在下方留言&#xff0c;喜欢就点个赞吧

区块链基础知识(下):共识机制 附带图解、超详细教学!看不懂你打死我

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 专栏的前面几篇详细了介绍了区块链的核心基础知识 有兴趣学习的小伙伴可以看看→http://t.csdnimg.cn/CstOy 关于区…

RK3588-PCIe

1. 简介 PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;是一种用于连接主板和外部设备的高速串行接口标准。它是 PCI 技术的后继者&#xff0c;旨在提供更高的带宽和更好的性能。 高速传输&#xff1a; PCIe接口提供了高速的数据传输通道&#xff0…

【wine】WINEDEBUG 分析mame模拟器不能加载roms下面的游戏 可以调整参数,快速启动其中一个游戏kof98

故障现象&#xff0c;MAME启动后&#xff0c;游戏都没有识别 添加日志输出&#xff0c;重新启动wine #!/bin/bashexport WINEPREFIX$(pwd)/.wine export WINESERVER$(pwd)/bin/wineserver export WINELOADER$(pwd)/bin/wine export WINEDEBUG"file,mame,warn,err"…

CCF-C推荐会议 IEEE CLOUD‘24 3月24日截稿!深圳开启全球云计算新纪元!

会议之眼 快讯 IEEE CLOUD(IEEE International Conference on Cloud Computing)即IEEE云计算国际会议将于 2024 年7月7日至13日在中国深圳举行&#xff01;IEEE CLOUD由lEEE Computer Society主办&#xff0c;CCF服务计算专委会、北京大学、IBM Research承办。CLOUD一直是研究人…

Linux---多线程(上)

一、线程概念 线程是比进程更加轻量化的一种执行流 / 线程是在进程内部执行的一种执行流线程是CPU调度的基本单位&#xff0c;进程是承担系统资源的基本实体 在说线程之前我们来回顾一下进程的创建过程&#xff0c;如下图 那么以进程为参考&#xff0c;我们该如何去设计创建一个…

STM32串口:DMA空闲中断实现接收不定长数据(基于HAL库)

STM32串口&#xff1a;DMA空闲中断实现接收不定长数据&#xff08;基于HAL库&#xff09;&#xff1a; 第一步&#xff1a;设置rcc&#xff0c;时钟频率&#xff0c;下载方式 设置system core->RCC如图所示&#xff1a;&#xff08;即High Speed Clock和Low Speed Clock都选…

EasyNVR级联EasyCVR,在EasyCVR播放视频会导致EasyNVR崩溃的原因排查与解决

视频综合管理平台EasyCVR视频监控系统支持多协议接入、兼容多类型设备&#xff0c;平台可以将监控区域内所有部署的监控设备进行统一接入与集中汇聚管理&#xff0c;实现对监控区域的实时视频监控、录像与存储、设备管理、云台控制、语音对讲、级联共享等&#xff0c;在监控中心…

跨境账号养号怎么做?Facebook、亚马逊运营必看

之前我们讨论过很多关于代理器的问题。它们的工作原理是什么?在不同的软件中要使用那些代理服务器?这些代理服务器之间的区别是什么?什么是反检测浏览器等等。 除了这些问题&#xff0c;相信很多人也会关心在使用不同平台的时代理器的选择问题。比如&#xff0c;为什么最好…

深入理解React中的useState:函数组件状态管理的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

别再盲目推广!用Xinstall第三方统计,精准衡量广告ROI

在移动互联网时代&#xff0c;App推广已经成为各大广告主和开发者的必修课。然而&#xff0c;面对复杂的推广环境和多变的用户需求&#xff0c;如何提升推广效率、洞悉推广效果、衡量广告ROI&#xff0c;一直是困扰着广大广告主和开发者的难题。今天&#xff0c;我们就来聊聊一…

ChatGPT怎么用 ChatGPT小白能掌握的技巧原理

ChatGPT(Chat Generative Pre-training Transformer) 是一个 AI 模型,属于自然语言处理( Natural Language Processing , NLP ) 领域,NLP 是人工智能的一个分支。所谓自然语言,就是人们日常生活中接触和使用的英语、汉语、德语等等。自然语言处理是指,让计算机来理解并…