文章目录
- 一、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>
执行结果 :
