javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS forEach、for、map详解

JS中forEach、for、map的区别示例详解

作者：前端没钱

这篇文章主要给大家介绍了关于JS中forEach、for、map区别的相关资料,文中通过示例对比JavaScript中for循环、forEach、map的语法、功能、性能及适用场景,分析其差异与优劣,需要的朋友可以参考下

引言

在 JavaScript 编程的世界里，数组操作是极为常见的任务，而forEach、for循环以及map方法，都是我们在遍历数组时的得力工具。虽然它们都能实现对数组元素的遍历访问，但在实际使用过程中，它们却有着各自独特的特性、语法和适用场景。对于前端开发者而言，深入理解并熟练掌握它们之间的区别，就如同掌握了一把开启高效编程大门的钥匙，能够在不同的业务需求下，精准地选择最合适的遍历方式，从而编写出简洁、高效且易于维护的代码，提升开发效率和代码质量。
基本语法展示

在正式探讨它们的区别之前，我们先来熟悉一下这三者的基本语法结构，这是我们深入理解和运用它们的基础。

for 循环

for循环是最传统的循环结构，在各种编程语言中都广泛存在，其语法形式如下：

for (初始化表达式; 条件判断表达式; 循环后操作表达式) {
    // 循环体代码
}

其中，初始化表达式在循环开始前执行一次，通常用于初始化循环变量；条件判断表达式在每次循环开始时进行判断，若结果为true，则执行循环体代码，否则终止循环；循环后操作表达式在每次循环体代码执行完毕后执行，通常用于更新循环变量。
例如，遍历一个数组并打印每个元素：

const arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach 方法

forEach是数组的一个方法，用于对数组中的每个元素执行一次提供的回调函数，其语法如下：

array.forEach((currentValue, index, array) => {
    // 回调函数代码
}, thisValue);

currentValue表示当前正在处理的元素；index表示当前元素在数组中的索引（可选）；array表示调用forEach方法的数组本身（可选）；thisValue是可选参数，用于指定回调函数中this的值。

示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
    console.log(`索引 ${index} 处的元素是 ${number}`);
});

map 方法

map同样是数组的方法，它会创建一个新数组，新数组中的元素是原数组中每个元素调用提供的回调函数后的返回值，语法如下：

const newArray = array.map((currentValue, index, array) => {
    // 回调函数代码，必须有返回值
}, thisValue);

参数含义与forEach方法类似。
例如，将数组中的每个元素翻倍并生成一个新数组：

const originalArray = [1, 2, 3, 4, 5];
const doubledArray = originalArray.map((number) => {
    return number * 2;
});
console.log(doubledArray);

功能差异

for 循环

for循环作为一种基础且通用的循环结构，拥有极高的灵活性，是很多开发者在进行复杂循环操作时的首选。它的语法虽然相对复杂，但正是这种复杂性赋予了它强大的控制能力。通过自定义初始化表达式、条件判断表达式和循环后操作表达式，开发者可以精确地控制循环的执行次数、起始条件和结束条件。例如，在遍历数组时，我们可以通过调整for循环的变量来实现跳跃式遍历，或者根据特定条件提前终止循环。在一些需要对数组进行复杂操作的场景中，如矩阵运算、数据排序等，for循环能够提供最直接、最灵活的实现方式。同时，for循环不仅局限于数组遍历，还可以用于各种需要重复执行代码块的场景，如循环生成 HTML 元素、控制动画的帧数等。

forEach 方法

forEach方法是专门为数组遍历设计的，它提供了一种简洁、直观的方式来处理数组中的每一个元素。forEach方法会自动遍历数组的每一项，并将当前元素、索引和数组本身作为参数传递给回调函数。在回调函数中，我们可以对每个元素进行各种操作，如打印元素、修改元素属性等。例如，在处理一个包含用户信息的数组时，我们可以使用forEach方法快速遍历数组，并将每个用户的姓名打印出来。然而，forEach方法也有其局限性，它一旦开始执行，就会一直遍历完整个数组，无法中途停止。这意味着，如果在遍历过程中遇到某个特定条件需要提前终止循环，forEach方法就无法满足需求。此外，forEach方法的返回值是undefined，这使得它不适合用于需要返回新数组或计算结果的场景。

map 方法

map方法的核心功能是遍历数组，并根据回调函数的返回值创建一个新的数组。这使得map方法在数据转换和映射场景中表现出色。例如，在将一个包含数字的数组中的每个元素翻倍，或者将一个包含字符串的数组中的每个字符串转换为大写时，map方法可以轻松实现。map方法不会改变原数组，这保证了数据的不可变性，使得代码更加安全和可预测。在进行数据处理时，我们可以放心地使用map方法对数据进行转换，而不用担心会影响原数据。此外，map方法返回的新数组可以方便地与其他数组方法（如filter、reduce等）链式调用，从而实现更加复杂的数据处理逻辑。例如，我们可以先使用map方法对数组进行转换，然后再使用filter方法对转换后的数组进行筛选，最后使用reduce方法对筛选后的数组进行累加。

性能对比

在实际编程中，性能是我们选择使用何种遍历方式的重要考量因素之一。下面我们将通过具体的测试，来深入分析for循环、forEach方法和map方法在性能上的表现。

测试环境说明

本次测试在 Node.js 环境下进行，版本为 v16.14.2。使用console.time()和console.timeEnd()方法来测量代码的执行时间，这两个方法可以方便地记录代码块的开始和结束时间，从而计算出代码的执行耗时。虽然这种方式并不是最精确的性能测量工具，但足以帮助我们对这三种遍历方式的性能差异有一个大致的了解。同时，为了减少测试误差，每个测试用例都执行多次，取平均值作为最终的测试结果。

测试用例设计

我们创建一个包含 100000 个元素的数组，然后分别使用for循环、forEach方法和map方法对数组进行遍历，并在遍历过程中执行一个简单的操作，比如将每个元素乘以 2。测试代码如下：

// 创建测试数组
const largeArray = Array.from({ length: 100000 }, (_, i) => i);

// for循环测试
console.time('for loop');
for (let i = 0; i < largeArray.length; i++) {
    largeArray[i] *= 2;
}
console.timeEnd('for loop');

// forEach方法测试
console.time('forEach');
largeArray.forEach((value, index) => {
    largeArray[index] = value * 2;
});
console.timeEnd('forEach');

// map方法测试
console.time('map');
const newArray = largeArray.map((value) => {
    return value * 2;
});
console.timeEnd('map');

性能测试结果分析

经过多次测试，我们得到的平均结果如下：

然而，性能并不是选择遍历方式的唯一标准，在实际开发中，我们还需要综合考虑代码的可读性、可维护性以及具体的业务需求，来选择最合适的遍历方式。

使用场景分析

需要灵活控制循环时

当我们在处理数组时，如果需要根据特定条件提前终止循环，或者跳过某些元素继续下一次循环，for循环就展现出了它无可替代的优势。例如，在一个包含学生成绩的数组中，我们要查找第一个及格（成绩大于等于 60 分）的学生，一旦找到就停止查找。这种情况下，使用for循环配合break语句就能轻松实现：

const scores = [50, 45, 70, 80, 55];
for (let i = 0; i < scores.length; i++) {
    if (scores[i] >= 60) {
        console.log(`第 ${i + 1} 个学生及格了，成绩是 ${scores[i]}`);
        break;
    }
}

又或者，我们要遍历数组，但跳过某些特定索引的元素，使用for循环结合continue语句也能很好地完成任务：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < numbers.length; i++) {
    if (i % 3 === 0) {
        continue;
    }
    console.log(numbers[i]);
}

在这些场景中，forEach和map方法由于无法直接使用break和continue语句，就难以实现这样灵活的控制。

仅进行数组遍历和操作时

如果我们的需求仅仅是遍历数组，并对每个元素执行一些操作，比如打印元素、修改元素本身等，而不需要返回新数组，forEach方法就能派上用场。它的语法简洁明了，让代码看起来更加简洁和直观。例如，在一个包含商品信息的数组中，我们要为每个商品添加一个默认的库存数量：

const products = [
    { name: '商品A' },
    { name: '商品B' },
    { name: '商品C' }
];
products.forEach((product) => {
    product.stock = 100;
});
console.log(products);

这种情况下，使用forEach方法，代码逻辑清晰，易于理解和维护。而且forEach方法不需要手动管理索引，减少了出错的可能性。

需要生成新数组时

当我们需要根据原数组生成一个新数组，并且新数组中的元素与原数组元素存在某种映射关系时，map方法无疑是最佳选择。例如，在一个包含数字的数组中，我们要生成一个新数组，新数组中的每个元素是原数组对应元素的平方：

const originalNumbers = [1, 2, 3, 4, 5];
const squaredNumbers = originalNumbers.map((number) => {
    return number * number;
});
console.log(squaredNumbers);

使用map方法，我们可以简洁高效地完成数组的映射操作，生成符合需求的新数组。并且map方法不会改变原数组，这在很多需要保持数据原始状态的场景中非常重要。

注意事项和常见错误

forEach 中 return 无效

在使用forEach方法时，需要特别注意的是，return语句并不会像在普通函数中那样返回值或终止循环。这是因为forEach方法会强制遍历完整个数组，无论回调函数中是否执行了return语句。例如，当我们想要在forEach遍历数组时，一旦找到某个特定元素就停止遍历并返回结果，像下面这样写是无法实现的：

const numbers = [1, 2, 3, 4, 5];
let result;
numbers.forEach((number, index) => {
    if (number === 3) {
        result = number;
        return; // 这里的return不会终止forEach循环
    }
});
console.log(result);

在这个例子中，即使找到了值为 3 的元素并执行了return语句，forEach方法仍然会继续遍历数组的剩余元素。如果想要实现类似的功能，我们可以使用for循环配合break语句，或者使用find方法等。

map 方法对原数组的影响

虽然map方法不会直接修改原数组，而是返回一个新数组，但在实际使用中，容易因为对引用类型数据的操作而产生误解。当原数组中的元素是引用类型（如对象或数组）时，如果在map的回调函数中直接修改了元素的属性，那么原数组中的元素也会随之改变。例如：

const students = [
    { name: '小明', score: 80 },
    { name: '小红', score: 90 }
];
const newStudents = students.map((student) => {
    student.score += 10; // 直接修改对象属性
    return student;
});
console.log(students); 
console.log(newStudents);

在这个例子中，newStudents和students中的对象实际上是同一个对象，因为我们在map回调函数中直接修改了原对象的属性。为了避免这种情况，在使用map方法时，应该尽量保持数据的不可变性，避免直接修改原数组中的对象，而是创建新的对象来存储修改后的值，例如：

const students = [
    { name: '小明', score: 80 },
    { name: '小红', score: 90 }
];
const newStudents = students.map((student) => {
    return {...student, score: student.score + 10 }; // 创建新对象
});
console.log(students); 
console.log(newStudents);

循环中的作用域问题

在使用for循环、forEach方法和map方法时，还需要注意变量的作用域问题。在for循环中，如果使用var声明循环变量，由于var具有函数作用域，可能会导致意外的变量访问和修改。例如：

function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr.push(function () {
            console.log(i); // 这里的i在循环结束后的值是5
        });
    }
    return arr;
}
const functions = test();
functions.forEach((func) => {
    func(); 
});

在这个例子中，由于i是用var声明的，具有函数作用域，所以在循环结束后，i的值为 5，当我们调用arr中的函数时，打印出来的都是 5。为了避免这种问题，在 ES6 中，我们可以使用let或const来声明循环变量，它们具有块级作用域，每次迭代都会创建一个新的变量副本，例如：

function test() {
    var arr = [];
    for (let i = 0; i < 5; i++) {
        arr.push(function () {
            console.log(i); // 这里会正确打印出每次迭代时i的值
        });
    }
    return arr;
}
const functions = test();
functions.forEach((func) => {
    func(); 
});

在forEach和map方法中，虽然回调函数有自己的作用域，但也要注意不要在回调函数中意外地访问和修改外部作用域中的变量，以免造成难以调试的错误。

总结

通过对for循环、forEach方法和map方法的深入剖析，我们清晰地了解到它们在语法、功能、性能以及使用场景上都存在着显著的区别。for循环作为最基础的循环结构，赋予了开发者高度的灵活性，能够在各种复杂的循环控制场景中发挥关键作用；forEach方法以其简洁直观的语法，成为简单数组遍历和操作的首选工具；map方法则凭借其强大的数据映射能力，在生成新数组的场景中表现卓越。在实际的前端开发工作中，我们不应盲目地选择某种遍历方式，而是要根据具体的业务需求、代码的可读性和可维护性，以及性能要求等多方面因素，综合权衡并选择最合适的遍历方式。只有这样，我们才能编写出更加高效、优质的代码，提升开发效率，为用户带来更好的体验。希望通过本文的介绍，能帮助大家在面对数组遍历问题时，做出更加明智的选择 。

到此这篇关于JS中forEach、for、map区别的文章就介绍到这了,更多相关JS forEach、for、map详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文