极客笔记JavaScript 使用遍历数组对象
JavaScript不提供任何特定的内置函数来遍历数组元素/对象。您可以通过for循环或通过元素索引直接遍历数组。数组包含多个相同类型的元素，可以使用for循环来遍历。
在本章中，我们将讨论遍历数组的所有方法：
简单的数组遍历
在这个示例中，我们将直接从数组索引中简单地遍历数组。
<script>
// declare and initialize an array
var message = ["Have", " a", " good", " day"];
//traverse the array elements
document.write("array[0] = " + message[0]);
document.write("<br> array[1] = " + message[1]);
document.write("<br> array[2] = " + message[2]);
document.write("<br> array[3] = " + message[3]);
</script>
输出
保存代码并在浏览器上运行。数组将遍历并打印数组元素。
array[0] = Have
array[1] = a
array[2] = good
array[3] = day
截图
遍历并显示数组元素
这个示例将直接使用数组索引遍历数组并显示数组字符串。
<script>
// declare and initialize an array
var message = ["Have", " a", " good", " day"];
//traverse the array elements
document.write(message[0]);
document.write(message[1]);
document.write(message[2]);
document.write(message[3]);
</script>
输出
保存代码并在浏览器上运行。数组将遍历并打印数组元素。
Have a good day
屏幕截图
此外，JavaScript还提供了其他多种遍历数组的方法。在这里，我们讨论最常用和简单的方法。
使用for循环遍历数组
当数组很长或变量较多时，上述方法效率不高。因此，我们必须尝试其他方法来遍历数组以节省时间和精力。
为了解决这个问题，引入了循环的概念，它通过提供一小段代码来遍历数组。我们将使用不同的循环来遍历数组元素并在网页上显示它们。你可以使用while循环、do-while循环、for循环或for each循环来遍历数组。它与其他编程语言如C、C++和Java类似。
示例1
下面是使用for循环遍历数组并打印数组的字符串元素的示例。
<script>
// declare and initialize an array
var message = ["Die", " with", " memories,", " not", " dreams"];
//traverse the array and print the elements
for(var i=0; i< message.length; i++){
document.write(message[i]);
}
</script>
输出
保存代码并在浏览器上运行。数组将遍历并打印数组元素。
Die with memories, not dreams
屏幕截图
查看上述JavaScript代码的网页截图：
示例2
下面是使用for循环遍历数组并打印出该数组中的整数元素的示例。
<script>
// declare and initialize an array with integer values
var integerArray = [34, 67, 12, 89, 45, 79];
//traverse the array using for loop
for(var i=0; i< integerArray.length; i++) {
//display the array elements
document.write(integerArray[i] + "<br>");
}
</script>
输出
保存代码并在浏览器中运行。数组将遍历并打印数组元素。
34
67
12
89
45
79
截图
查看上述JavaScript代码的网页截图：
示例3：使用while循环遍历
在这个示例中，我们将使用 while循环 来遍历一个数组，并显示数组中的元素。
<script>
// declare and initialize an array with integer values
var integerArray = [34, 67, 12, 89, 45, 79];
var i=0;
document.write("Elements in array: <br>");
//traverse the array using while loop
while( i< integerArray.length) {
//display the array elements
document.write(integerArray[i] + "<br>");
i++;
}
</script>
输出
保存代码并在浏览器上运行。数组将遍历并打印数组元素。
Elements in array:
34
67
12
89
45
79
截图
查看上面JavaScript代码的网页截图：
使用forEach()方法遍历数组
除了基本的循环（for循环、while循环和do-while循环），JavaScript还有一个循环，或者你也可以称它为一个数组方法，名为forEach()。与基本的循环不同，它会针对数组中的每个元素调用一次函数。
语法
它的语法也不同，看一下forEach()方法的语法：
arr.forEach(functionName);
示例
这个示例将展示forEach()方法如何与数组元素一起工作。首先，数组与forEach()方法连接，将调用用户定义的函数。然后，该函数将遍历所有数组元素并在网页上显示它们。请参考下面的代码：
<script>
// declare an array and provide value in it
var message = ["It", " is", " very", " beautiful", " day"];
var index = 0;
//call the user-defined function with array
message.forEach(traverseArray);
//definition of user-defined function
function traverseArray(ele, index)
{
//display the array elements using index
document.write(ele);
}
</script>
输出
保存代码并在浏览器上执行，以便在网页上显示所有数组元素的打印结果。请查看以下响应：
It is very beautiful day
截图
请参考上述JavaScript代码的网页截图：
使用every()方法遍历数组
该方法与基本循环和forEach()方法不同。它基本上用于遍历数组，同时满足程序员指定的条件。every()方法是一个 JavaScript函数 ，用于测试数组的所有元素是否满足指定条件。
如果所有元素都满足条件并通过测试（以函数形式提供），则返回 true 。否则，返回 false 。
语法
以下是every()方法的语法：
arr.every(condition);
示例1
在这个示例中，我们将遍历整个数组并检查给定的值是否满足条件> 18来验证是否都是成年人。请看下面的代码：
<script>
//define an array with elements
var age = [22, 28, 36, 26, 34, 31];
//put a condition to check all the values are greater then 18
const adult = x => x > 18;
if (age.every(adult)) {
//display the message if all array values are > 18
document.write('All are adults');
}
else {
//display the message if any one of them is less than 18
document.write('Atleast one is not adult');
}
</script>
输出
将代码保存并在浏览器中执行，如果数组中的所有值都大于18岁，将显示响应“ 全部都是成年人 ”。否则，将显示响应“ 至少有一个未成年。 ”参见下面的响应：
Atleast one is not adult
屏幕截图
查看上述JavaScript代码的网页截图：
示例2
在这个示例中，我们将遍历整个数组，检查数组中所有给定的值是否为偶数。为此，我们将设置一个条件检查（even = x => x%2 0）。如果全部都是偶数，则返回true；否则返回false。请参见下面的代码：
<script>
//define an array with elements
var age = [12, 47, 16, 26, 34, 59];
//put a condition to check all the values are greater than 18
const adult = x => x > 18;
if (age.every(adult)) {
//display the message if all array values are > 18
document.write('All are adults');
}
else {
//display the message if any one of them is less than 18
document.write('Atleast one is not adult');
}
</script>
输出
保存代码并在浏览器上执行，如果数组中的所有值都大于18，则会显示响应” 所有都是偶数 “。否则，它将显示” 至少有一个不是偶数 “。请查看下面的响应：
Atleast of them is not an even number
屏幕截图
请参见上述JavaScript代码的网页截图：
使用map方法遍历数组
map是JavaScript编程语言提供的一种方法，它将一个函数应用于数组的每个元素，然后返回一个新的数组。通过这种方式，它遍历整个数组。
在遍历数组时，您还可以使用map()函数对数组元素执行操作。基本上，它遍历整个数组并与数组的每个元素执行一些操作。
语法
下面是JavaScript的map()方法的语法：
arr.map(condition);
它返回一个新创建的数组。
看下面的示例，展示了map()函数的使用方式：
示例1
在这个示例中，我们将使用JavaScript的map()函数遍历整个数组，并对数组元素执行Math.sqrt()操作。看看如何使用JavaScript的方法完成：
代码如下：
<h3> Perfrom sqrt on each element of array using map() </h3>
<script>
//initialize an array with value
var numbers1= [4, 16, 36, 64, 100, 144, 196, 256, 324, 400];
//call the user-defined function using map
var numbers2 = numbers1.map(myFunction);
//display the array elements before and after performing sqrt operation
document.write("Inital array elements: " + numbers1);
document.write("<br> <br>");
document.write("Array after sqrt: " + numbers2);
//function definition where perform sqrt on each element of array
function myFunction(value, index, array) {
return Math.sqrt(value);
}
</script>
输出
保存代码并在浏览器上执行它，这将显示在执行 sqrt 操作之前和之后的所有数组元素。在这里，map()函数将帮助遍历数组中的每个元素。
请参见上述JavaScript代码的网页截图：
示例2
您还可以使用map()执行简单的算术操作。请参看以下示例代码:
<h3> Perfrom addition on each element of array using map() </h3>
<script>
//initialize an array with value
var numberArray = [5, 9, 8, 2, 6];
//call the user-defined function using map
var numbers2 = numberArray.map(myFunction);
//display the array elements before and after performing operation
document.write("Inital array elements: " + numberArray);
document.write("<br><br>");
document.write("<b> Add 10 to each element of the array </b><br>");
document.write("Newly created array: " + numbers2);
//function definition where perform simple addition on each element of array
function myFunction(ele, index, array) {
return ele + 10;
}
</script>
输出
查看以上代码的网页输出。它将返回将所有数组元素加上10的结果。
