【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组

【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]); // 输出 : banana
        console.log(arr[2]); // 输出 : cherry

        console.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>