当前位置: 首页>编程语言>正文

【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】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 ),【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 )_前端,第1张


二、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>

执行结果 :

【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 ),【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 )_数组_02,第2张



https://www.xamrdz.com/lan/5ae1939428.html

相关文章: