当前位置:首页 > JavaScript

js foreach 实现

2026-04-06 13:09:09JavaScript

forEach 的基本用法

在 JavaScript 中,forEach 是数组对象的一个方法,用于遍历数组的每个元素并执行回调函数。语法如下:

array.forEach(function(currentValue, index, array) {
  // 执行操作
}, thisArg);
  • currentValue:当前处理的数组元素。
  • index(可选):当前元素的索引。
  • array(可选):正在遍历的数组。
  • thisArg(可选):回调函数中的 this 值。

简单示例

以下是一个简单的示例,展示如何使用 forEach 遍历数组并打印每个元素:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

输出:

js foreach 实现

1
2
3
4
5

使用箭头函数

可以使用箭头函数简化回调函数的写法:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => console.log(number));

访问索引和原数组

回调函数可以接收索引和原数组作为参数:

js foreach 实现

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index, array) => {
  console.log(`Element ${fruit} is at index ${index} in array ${array}`);
});

修改原数组

forEach 不会直接修改原数组,但可以通过回调函数修改原数组的值:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index, array) => {
  array[index] = number * 2;
});

console.log(numbers); // [2, 4, 6, 8, 10]

使用 thisArg

可以通过 thisArg 参数指定回调函数中的 this 值:

function Counter() {
  this.count = 0;
}

Counter.prototype.increment = function(array) {
  array.forEach(function(element) {
    this.count++;
  }, this);
};

const counter = new Counter();
counter.increment([1, 2, 3]);
console.log(counter.count); // 3

注意事项

  • forEach 无法中断或跳出循环(除非抛出异常)。如果需要提前终止循环,可以使用 for 循环或 Array.prototype.someArray.prototype.every
  • forEach 不会为稀疏数组中缺失的元素执行回调函数。
  • forEach 不会返回任何值,仅用于遍历数组。

标签: jsforeach
分享给朋友:

相关文章

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Pro…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…

js实现定位

js实现定位

使用Geolocation API获取当前位置 在JavaScript中,可以通过浏览器内置的Geolocation API获取用户的地理位置信息。该API需要用户授权才能访问位置数据。 if (n…

js 实现页面刷新

js 实现页面刷新

使用 location.reload() location.reload() 是原生 JavaScript 提供的页面刷新方法。调用该方法会重新加载当前页面,相当于点击浏览器的刷新按钮。 // 基本…