【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 )

文章目录

  • 一、JavaScript 数组索引
    • 1、数组索引
    • 2、数组索引 - 代码示例
  • 二、JavaScript 遍历数组
    • 1、使用 for 循环遍历数组
    • 2、使用 for 循环遍历数组 - 代码示例





一、JavaScript 数组索引




1、数组索引


在 JavaScript 中 , 数组 的 " 索引 " 又称为 " 下标 " , 从 0 开始计数 , 是 可用于访问 数组元素 的 " 序号 " ;


通过 数组索引 可以 访问 / 获取 / 修改 对应的数组元素 , 语法如下 :

数组名称[索引]

访问数组 元素 时 , 要注意数组的边界 , 如果尝试访问一个不存在的索引 , 会返回 undefined 值 , 并不会报错 ;


下面的 数组 arr , 第一个元素 'apple' 的索引是 0 , 第二个元素 'banana' 的索引是 1 , 第三个元素 'cherry' 的索引是 2 ;

let arr = ['apple', 'banana', 'cherry'];

2、数组索引 - 代码示例


完整代码示例 : 在本示例中 ,

arr 数组 中的 'apple' 元素 的索引是 0 ,
arr 数组 中的 'banana' 元素 的索引是 1 ,
arr 数组 中的 'cherry' 元素 的索引是 2 ;

arr 数组中只有 3 个元素 , 所以 第四个元素 索引 3 是不存在的 , 如果访问该索引的元素 , 会返回 undefined 值 ;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 数组索引let arr = ['apple', 'banana', 'cherry'];console.log(arr[0]); // 输出 : apple  console.log(arr[1]); // 输出 : bananaconsole.log(arr[2]); // 输出 : cherryconsole.log(arr[3]); // 输出 : undefined</script>
</head><body>
</body></html>

执行结果 : 前 3 个输出的是数组中的 0 ~ 2 索引对应的元素 , 访问第 4 个元素获取的值为 undefined ;

在这里插入图片描述





二、JavaScript 遍历数组




1、使用 for 循环遍历数组


JavaScript 中 使用 for 循环遍历数组 是 最常用的方式 ;

循环控制变量 初始化为 0 , 然后每次循环累加 1 , 循环 数组元素个数 次 , 这样就能实现 数组的完整遍历 ;

使用 arr.length 可以获取 arr 数组的长度 ;

代码示例 :

let arr = ['apple', 'banana', 'cherry'];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

2、使用 for 循环遍历数组 - 代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 数组遍历let arr = ['apple', 'banana', 'cherry'];for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}</script>
</head><body>
</body></html>

执行结果 :

在这里插入图片描述

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

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

相关文章

将yolov5s部署到安卓上实战经验总结

最近需要在手机端实现一个目标检测的功能&#xff0c;于是选择了小巧又在目标检测方面表现很好的yolov5s&#xff0c;官网下载yolov5代码&#xff0c;用自己做的数据集进行了训练&#xff0c;然后把模型转换成torchscript格式&#xff0c;这些过程网上都有很多讲解&#xff0c;…

电脑突然死机怎么办?

死机是电脑常见的故障问题&#xff0c;尤其是对于老式电脑来说&#xff0c;一言不合电脑画面就静止了&#xff0c;最后只能强制关机重启。那么你一定想知道是什么原因造成的吧&#xff0c;一般散热不良最容易让电脑死机&#xff0c;还有系统故障&#xff0c;比如不小心误删了系…

手机卫星通信

1. 前言 手机卫星通信&#xff0c;顾名思义&#xff0c;就是手机可以与卫星建立通信连接实现数据交互的技术。手机卫星高速数据连接是目前手机通话短信的下一代技术&#xff0c;也是新一代通信生态中的重要组成部分&#xff0c;即非地面网络&#xff08;Non-Terrestrial Networ…

React 应用实现监控可观测性最佳实践

前言 React 是一个用于构建用户界面的 JavaScript 框架。它采用了虚拟 DOM 和 JSX&#xff0c;提供了一种声明式的、组件化的编程模型&#xff0c;以便更高效地构建用户界面。无论是简单还是复杂的界面&#xff0c;React 都可以胜任。 YApi 是使用 React 编写的高效、易用、功…

2.人机交互-图形化界面的小故事

文章目录 一、图形化界面的小故事二、什么是cmd&#xff1f; 计算机在刚开始出现的时候&#xff0c;因为占地广、造价高、耗电多&#xff0c;一般都是给军队或者政府使用的&#xff0c;而并不是给个人使用的。然后随着计算机不断地发展&#xff0c;体积越来越小&#xff0c;出现…

【计算机网络篇】数据链路层(4.1)可靠传输的相关概念

文章目录 &#x1f354;可靠传输的相关概念⭐分组丢失⭐分组失序⭐分组重复 &#x1f95a;注意 &#x1f354;可靠传输的相关概念 使用差错检测技术&#xff08;例如循环冗余校验CRC&#xff09;&#xff0c;接收方的数据链路层就可以检测出帧在传输过程中是否产生了误码&…

B2902A是德科技B2902A精密型电源

181/2461/8938产品概述&#xff1a; Agilent B2902A 精密源/测量单元 (SMU) 是一款 2 通道、紧凑且经济高效的台式 SMU&#xff0c;能够源和测量电压和电流。它用途广泛&#xff0c;可以轻松、高精度地执行 I/V&#xff08;电流与电压&#xff09;测量。4 象限源和测量功能的集…

linux 内存介绍

大致共有四类&#xff1a;VSS、RSS、PSS、USS &#xff0c;通常情况下&#xff0c;VSS > RSS > PSS > USS 1.VSS(Virtual Set Size)虚拟耗用内存&#xff08;包含共享库占用的内存&#xff09; VSS表示一个进程可访问的全部内存地址空间的大小。这个大小包括了进程已…

单例模式如何保证实例的唯一性

前言 什么是单例模式 指一个类只有一个实例&#xff0c;且该类能自行创建这个实例的一种创建型设计模式。使用目的&#xff1a;确保在整个系统中只能出现类的一个实例&#xff0c;即一个类只有一个对象。对于频繁使用的对象&#xff0c;“忽略”创建时的开销。特点&#xff1a…

Netty对Channel事件的处理以及空轮询Bug的解决

继续上一篇Netty文章&#xff0c;这篇文章主要分析Netty对Channel事件的处理以及空轮询Bug的解决 当Netty中采用循环处理事件和提交的任务时 由于此时我在客户端建立连接&#xff0c;此时服务端没有提交任何任务 此时select方法让Selector进入无休止的阻塞等待 此时selectCnt进…

Day37 贪心 part06

Day37 贪心 part06 738.单调递增的数字 我的思路&#xff1a; 一开始的思路只从后向前遍历调整arraylist&#xff0c;100的案例没过&#xff0c;应该输出99&#xff0c;我输出90&#xff0c;顿时联想到分糖果问题&#xff0c;果断加了从前向后检查调整的遍历&#xff0c;没问…

字符串的函数

头文件 # include <string.h> 五大函数&#xff1a; strlen()、strcpy、strcat()、strcmp()、strstr() 用法&#xff1a; strlen()&#xff1a;计算字符串长度&#xff0c;但不计\0这个字符 #include <string.h> int main() {char arr[] "abcdef"…

骗子查询系统源码

源码简介 小权云黑管理系统 V1.0 功能如下&#xff1a; 1.添加骗子&#xff0c;查询骗子 2.可添加团队后台方便审核用 3.在线反馈留言系统 4.前台提交骗子&#xff0c;后台需要审核才能过 5.后台使用光年UI界面 6.新增导航列表&#xff0c;可给网站添加导航友链 7.可添加云黑类…

Flink系列之:Flink SQL Gateway

Flink系列之&#xff1a;Flink SQL Gateway 一、Flink SQL Gateway二、部署三、启动SQL Gateway四、运行 SQL 查询五、SQL 网关启动选项六、SQL网关配置七、支持的端点 一、Flink SQL Gateway SQL 网关是一项允许多个客户端从远程并发执行 SQL 的服务。它提供了一种简单的方法…

Flink集群主节点JobManager启动分析

1.概述 JobManager 是 Flink 集群的主节点&#xff0c;它包含三大重要的组件&#xff1a; ResourceManager Flink集群的资源管理器&#xff0c;负责slot的管理和申请工作。 Dispatcher 负责接收客户端提交的 JobGraph&#xff0c;随后启动一个Jobmanager&#xff0c;类似 Yarn…

C/C++语言学习路线: 嵌入式开发、底层软件、操作系统方向(持续更新)

初级&#xff1a;用好手上的锤子 1 【感性】认识 C 系编程语言开发调试过程 1.1 视频教程点到为止 1.2 炫技视频看看就行 1.3 编程游戏不玩也罢 有些游戏的主题任务就是编程&#xff0c;游戏和实际应用环境有一定差异&#xff08;工具、操作流程&#xff09;&#xff0c;在…

C# OpenCv Haar、LBP 人脸检测

目录 效果 代码 下载 效果 代码 using OpenCvSharp;namespace OPenCVDemo {class Program{static void Main(string[] args){// Load the cascadesvar haarCascade new CascadeClassifier("haarcascade_frontalface_default.xml");var lbpCascade new Casca…

1学习使用axios

一、axios介绍&#xff1a; axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 Node.js。它提供了一种简单的方法来发送 HTTP 请求&#xff0c;并且具有很多实用的功能&#xff0c;使得网络请求变得更加方便和可靠。 以下是 axios 的一些主要特点和功能&…

【笔记】RDD算子操作(Spark基础知识)

持续更新中&#xff01;&#xff01;&#xff01; 目录 一、RDD的创建 1.从本地创建 &#xff08;1&#xff09;本地文件 &#xff08;2&#xff09;hdfs文件&#xff08;先提前创建目录并上传文件&#xff09; 2.从集合创建&#xff08;通过并行集合&#xff08;列表&am…

学点Java_Day12_JDBC

1 JDBC 面向接口编程 在JDBC里面Java这个公司只是提供了一套接口Connection、Statement、ResultSet&#xff0c;每个数据库厂商实现了这套接口&#xff0c;例如MySql公司实现了&#xff1a;MySql驱动程序里面实现了这套接口&#xff0c;Java程序员只要调用实现了这些方法就可以…