JavaScript遍历数组,附5个案例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript遍历数组,附5个案例相关的知识,希望对你有一定的参考价值。


先给大家分享一些JavaScript的相关资料:

  •  ​​认识javascript到初体验​​
  • ​​JavaScript 注释以及输入输出语句​​
  • ​​JavaScript变量的使用、语法扩展、命名规范​​
  • ​​JavaScript数据类型简介以及简单的数据类型​​
  • ​​JavaScript获取变量数据类型​​
  • ​​JavaScript 运算符&算数运算符​​
  • ​​JavaScript递增和递减运算符​​
  • ​​JavaScript:比较运算符和逻辑运算符​​
  • ​​JavaScript:赋值运算符以及运算符优先级​​
  • ​​JavaScript 流程控制-实际案例学习if语句​​
  • ​​JavaScript三元表达式&分支流程控制 switch​​
  • ​​JavaScript的for循环学不明白看这篇​​
  • ​​案例方式学习JavaScript双重for循环​​

一、数组的索引

索引 (下标) :用来访问数组元素的序号(数组下标从 0 开始)。

var  arr = [小白,小黑,大黄,瑞奇];

数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。

这里的访问就是获取得到的意思:

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

课堂练习: 数组练习

定义一个数组,里面存放星期一、星期二…… 直到星期日(共7天),在控制台输出:星期日,请同学们自己动手完成。

二、遍历数组

问:数组中的每一项我们怎么取出来?

答:可以通过“数组名[索引号]”的方式一项项的取出来。

var arr = [red,green, blue];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

问:怎么把数组里面的元素全部取出来?

规律:从代码中我们可以发现,从数组中取出每一个元素时,代码是重复的,有所不一样的是索引值在递增

答案就是 循环

遍历: 就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。

我们可以通过 for 循环索引遍历数组中的每一项

var arr = [red,green, blue];
for(var i = 0; i < arr.length; i++)
console.log(arrStus[i]);

2.1 数组的长度

使用“数组名.length”可以访问数组元素的数量(数组长度)。

var arrStus = [1,2,3];
alert(arrStus.length); // 3

注意:

此处数组的长度是数组元素的个数 ,不要和数组的索引号混淆。

当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。

课堂案例 1: 遍历数组

请将 [“关羽”,“张飞”,“马超”,“赵云”,“黄忠”,“刘备”,“姜维”]; 数组里的元素依次打印到控制台。

var arr = ["关羽","张飞","马超","赵云","黄忠","刘备","姜维"]; 
// 遍历 从第一个到最后一个
for(var i = 0; i < arr.length; i++ )
console.log( arr[i] );

JavaScript遍历数组,附5个案例_前端

课堂案例 2:数组求和及平均值

求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。

案例分析:

  • 声明一个求和变量 sum。
  • 遍历这个数组,把里面每个数组元素加到 sum 里面。
  • 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++)
sum += arr[i];

average = sum / arr.length;
console.log(这组数的和是: + sum);
console.log(这组数的平均值是: + average);

课堂案例 3: 数组最大值

求数组[2,6,1,77,52,25,7]中的最大值。

案例分析:

  • 声明一个保存最大元素的变量 max。
  • 默认最大值可以取数组中的第一个元素。
  • 遍历这个数组,把里面每个数组元素和 max 相比较。
  • 如果这个数组元素大于max 就把这个数组元素存到 max 里面,否则继续下一轮比较。
  • 最后输出这个 max。
var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(var i = 0;i< arrNum.length; i++)
// 如果数组里当前循环的元素大于 maxNum,则保存这个元素和下标
if(arrNum[i] > maxNum)
maxNum = arrNum[i]; // 保存数值到变量 maxNum

课堂案例 4: 数组转换为字符串

要求:将数组 [red, green, blue, pink] 里面的元素转换为字符串

输出: redgreenbluepink

案例分析:

  • 思路:就是把里面的元素相加就好了,但是注意保证是字符相加。
  • 需要一个新变量 str 用于存放转换完的字符串。
  • 遍历原来的数组,分别把里面数据取出来,加到字符串变量 str 里面。
var arr = [red, green, blue, pink];
var str = ;
for (var i = 0; i < arr.length; i++)
str += arr[i];

console.log(str);

课堂案例 5: 数组转换为分割字符串

要求:将数组 [red, green, blue, pink] 转换为字符串,并且用 | 或其他符号分割

输出: red|green|blue|pink

案例分析:

  • 需要一个新变量用于存放转换完的字符串 str。
  • 遍历原来的数组,分别把里面数据取出来,加到字符串里面。
  • 同时在后面多加一个分隔符。
var arr = [red, green, blue, pink];
var str = ;
var separator = |
for (var i = 0; i < arr.length; i++)
str += arr[i] + separator;

console.log(str);


 

 

以上是关于JavaScript遍历数组,附5个案例的主要内容,如果未能解决你的问题,请参考以下文章

02-遍历数组的方法

数组的遍历

JavaScript-循环数组 案例与练习

JavaScript的一些基础语法和常用方法(附代码)

张飞与李逵的人物比较

js基本知识4