JS循环数组详解

小蓝 • 2024-11-22 05:13 • 编程

一、for循环遍历数组

JS中使用for循环结构可以很方便地遍历数组。for循环语句需要三个参数，第一个是变量声明（一般用i），第二个是停止循环的条件，第三个是每次循环的步进值。

var arr = ['apple','banana','orange','grape'];
for (var i = 0; i < arr.length; i++){
   console.log(arr[i]);
}

上述代码中，变量i的初值设置为0，每次循环加1，最终达到停止循环的条件——i < arr.length，即i小于数组长度。在每次循环中，使用数组的下标访问数组元素。

二、foreach()方法遍历数组

JS中，数组对象提供了一个forEach()方法，该方法可以循环遍历数组中的每一个元素。但是需要注意的是，该方法不能直接使用break或者continue控制循环。

var arr = ['apple','banana','orange','grape'];
arr.forEach(function(item,index,array){
  console.log(item);
});

上述代码中，forEach()方法传递了三个参数：当前元素的值，当前元素的索引，循环遍历的整个数组。通过回调函数，将每个元素的值输出。可以看出，forEach()方法的循环过程比for循环简便，但在循环控制方面比较受限制。

三、map()方法遍历数组

JS中，数组对象提供了一个map()方法，可以遍历数组并返回一个新的数组，新数组的长度和原数组一致，而每个元素的值由原数组的元素经过回调函数计算得出。

var arr = [1,2,3];
var newArr = arr.map(function(item,index,array){
  return item * 2;
});
console.log(newArr); //输出[2,4,6]

上述代码中，原数组为[1,2,3]，使用map()方法返回新数组[2,4,6]，其中每个元素都是原数组的元素乘以2。

四、filter()方法遍历数组

JS中，数组对象提供了一个filter()方法，可以遍历数组并根据回调函数的返回值，将符合条件的元素组成新的数组返回。

var arr = [1,2,3,4,5];
var newArr = arr.filter(function(item,index,array){
  return item % 2 === 0;
});
console.log(newArr); //输出[2,4]

上述代码中，原数组为[1,2,3,4,5]，使用filter()方法返回新数组[2,4]，其中每个元素都是原数组中的偶数。

五、reduce()方法遍历数组

JS中，数组对象提供了一个reduce()方法，可以使用回调函数对数组元素进行计算，并返回一个计算结果。

var arr = [1,2,3];
var sum = arr.reduce(function(pre,cur,index,array){
  return pre + cur;
});
console.log(sum); //输出6

上述代码中，原数组为[1,2,3]，使用reduce()方法进行元素相加计算，最终返回结果为6。

六、some()和every()方法遍历数组

JS中，数组对象提供了两个方法some()和every()，可以遍历数组并根据回调函数的返回值，判断数组中是否存在符合条件的元素或者数组中的每个元素是否都符合条件。

var arr = [1,2,3,4,5];
var isExist = arr.some(function(item,index,array){
  return item % 2 === 0;
});
var isAllEven = arr.every(function(item,index,array){
  return item % 2 === 0;
});
console.log(isExist); //输出true
console.log(isAllEven); //输出false

上述代码中，arr.some()方法返回true，表示存在数组的元素为偶数，arr.every()方法返回false，表示数组中不是所有的元素都为偶数。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/180403.html