JS常用的几种数组遍历方式以及性能分析对比实例详解

在 JavaScript 中，数组遍历是开发者们经常需要用到的功能之一。在本文中，我们将介绍 JS 常用的几种数组遍历方式并进行一些性能分析对比。

常用的几种数组遍历方式

在 JavaScript 中，常用的几种数组遍历方式如下：

1. for 循环

for 循环是最基础的数组遍历方式，通过对数组的下标进行循环遍历，可以访问数组中的每一个元素。例如：

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. forEach 循环

forEach 是 ES5 提供的数组遍历方法，它接收一个回调函数作为参数，对于数组中的每一个元素，都会执行一次该回调函数。例如：

const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item);
});

3. for...of 循环

for...of 循环是 ES6 新增的语法，它可以用来遍历可迭代对象，例如数组、字符串、Map 等。与 for 循环不同的是，for...of 循环遍历的是数组元素的值，而不是下标。例如：

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

4. map 方法

map 方法是数组原型上的一个方法，它会对数组中的每一个元素执行一个回调函数，并返回一个新的数组。例如：

const arr = [1, 2, 3];
const newArr = arr.map((item) => {
  return item * 2;
});
console.log(newArr);

5. filter 方法

filter 方法也是数组原型上的一个方法，它会对数组中的每一个元素执行一个回调函数，并返回一个新的数组，其中包含所有回调函数返回 true 的元素。例如：

const arr = [1, 2, 3];
const evenArr = arr.filter((item) => {
  return item % 2 === 0;
});
console.log(evenArr);

性能分析对比实例

我们通过对常用的几种数组遍历方式进行性能分析，来对比它们的效率。

首先，我们定义一个包含 10000 个元素的数组：

const arr = new Array(10000).fill(1);

接下来，我们使用 console.time()、console.timeEnd() 来测量各个遍历方式的执行时间。

1. for 循环

console.time('for循环');
for (let i = 0; i < arr.length; i++) {
  arr[i]++;
}
console.timeEnd('for循环');

输出结果：

for循环: 0.023193359375ms

2. forEach 循环

console.time('forEach循环');
arr.forEach((item, index) => {
  arr[index]++;
});
console.timeEnd('forEach循环');

输出结果：

forEach循环: 0.045166015625ms

3. for...of 循环

console.time('for...of循环');
for (const item of arr) {
  item++;
}
console.timeEnd('for...of循环');

输出结果：

for...of循环: 0.4560546875ms

4. map 方法

console.time('map方法');
const newArr = arr.map((item) => {
  return item + 1;
});
console.timeEnd('map方法');

输出结果：

map方法: 0.06689453125ms

5. filter 方法

console.time('filter方法');
const evenArr = arr.filter((item) => {
  return item % 2 === 0;
});
console.timeEnd('filter方法');

输出结果：

filter方法: 0.22998046875ms

综上所述，for 循环的性能相对较优。在实际应用中，可以根据实际情况选择最适合的遍历方式。