JavaScript 数组迭代方法介绍用法实例

2021年3月12日13:08:59 发表评论 834 次浏览

数组迭代方法对数组的每个元素执行一些操作。有一些不同的例子数组迭代方法如下。

Array.forEach()函数：的array.forEach()函数对数组的每个元素调用一次提供的函数(回调函数)。提供的函数是用户定义的, 它可以对数组执行任何类型的操作。

语法如下：

array.forEach(function callback(value, index, array){
}[ThisArgument]);

参数：此函数接受上述和以下描述的三个参数：

值：这是函数正在处理的当前值。
指数：项索引是函数正在处理的当前元素的索引。
数组：调用.forEach()函数的数组。

例子：本示例在数组上使用forEach方法来迭代数组的每个元素并在换行中打印数组的每个元素。

<!DOCTYPE html>
< html >
      
< head >
     < title >
         JavaScript Array.forEach() function
     </ title >
</ head >
  
< body style = "text-align:center;" > 
  
     < h1 style = "color:green;" > 
         lsbin 
     </ h1 >
  
     < h2 >Array.forEach() method</ h2 >
      
     < p >
         array.forEach() method Calls a function
         once for every array element.
     </ p >
      
     < p id = "GFG" ></ p >
      
     < script >
         var emptytxt = "";
         var No = [23, 212, 9, 628, 22314];
         No.forEach(itrtFunction);
          
         document.getElementById("GFG").innerHTML = emptytxt;
          
         function itrtFunction(value, index, array) {
             emptytxt = emptytxt + value + "< br >"; 
         }
     </ script >
</ body >
  
</ html >

输出如下：

Array.some()函数：array.some()函数检查数组的至少一个元素是否满足参数函数检查的条件。

语法如下：

array.some(arg_function(value, index, array), thisArg);

参数：此函数接受上述和以下描述的三个参数：

值：这是函数正在处理的当前值。
指数：项索引是函数正在处理的当前元素的索引。
数组：调用.some()函数的数组。

例子：此示例检查数组的所有值, 如果某个值大于50, 则返回true；如果数组的所有元素小于18, 则返回false。

<!DOCTYPE html>
< html >
      
< head >
     < title >
         JavaScript Array.some() function
     </ title >
</ head >
  
< body style = "text-align:center;" > 
  
     < h1 style = "color:green;" > 
         lsbin 
     </ h1 >
  
     < h2 >Array.some() method</ h2 >
      
     < p >
         some() method checks some array elements 
         validity according to the test condition.
     </ p >
      
     < p id = "GFG" ></ p >
      
     < script >
         var numArray = [41, 2, 14, 29, 49];
         var someOver50 = numArray.some(myFunction);
          
         document.getElementById("GFG").innerHTML
             = "Some values over 50 is " + someOver50;
          
         function myFunction(value, index, array) {
             return value > 50;
         }
     </ script >
</ body >
  
</ html >

输出如下：

如果array的任何一个值大于50：

如果array的所有值都小于50：

Array.map()函数：的array.map()函数通过在父数组中的每个项目上调用特定函数来创建数组, 并且它不会更改数组的值或元素。

语法如下：

array.map(function(value, index, array){
}[ThisArgument]);

参数：此函数接受上述和以下描述的三个参数：

值：这是函数正在处理的当前值。
指数：项索引是函数正在处理的当前元素的索引。
数组：调用.mao()函数的数组。

例子：本示例对数组的每个元素执行求和运算并显示输出。它不会更改原始数组的值。

<!DOCTYPE html>
< html >
  
< head >
     < title >
         JavaScript Array.map() function
     </ title >
</ head >
  
< body style = "text-align:center;" > 
  
     < h1 style = "color:green;" > 
         lsbin 
     </ h1 >
  
     < h2 >Array.map() method</ h2 >
      
     < p >
         creates an array from calling a specific 
         function on each item in the parent array.
     </ p >
      
     < p id = "GFG" ></ p >
      
     < script >
         var numArray = [1, 2, 3, 4];
         var numArray2 = numArray.map(multiplyFunction);
          
         document.getElementById("GFG").innerHTML = numArray2;
          
         function multiplyFunction(value, index, array) {
             return value + 100;
         }
     </ script >
</ body >
  
</ html >

输出如下：