Home / Questions / 26508
Accepted
Alvaro Montoro
Asked: 2020-10-08 05:12:22 +0800 CST 2020-10-08 05:12:22 +0800 CST

for vs forEach vs map

  • 772

在 JavaScript 中工作时，我需要将两个数组组合起来以生成所有元素的串联，例如：

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

resultado = ["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"];

为此，我可以想到 3 种不同的方法：使用经典循环for、使用方法forEach或使用方法map，方法如下：

为了

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
for(var x = 0; x < array1.length; x++) {
  for (var y = 0; y < array2.length; y++) {
    resultado.push(array1[x] + array2[y]);
  };
};

console.log(resultado);

为每个

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.forEach(function(valor1) {
  array2.forEach(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

地图

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.map(function(valor1) {
  array2.map(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

所有三种方法都遍历两个数组，并且所有三种方法都得到相同的结果（如您在上面的示例中所见）。现在我的问题：

  • 每种方法的优点/缺点是什么？
  • 有没有应该使用其他的？还是根据情况而定？
  • 有没有一种方法可以做类似的事情并且更好（例如：更有效或更快）
javascript

1 Answers

  1. Best Answer

    每种方法的优点/缺点是什么？

    这是一个很笼统的问题。经典for的和最现代forEach的基本相同。事实上，forEach它是作为经典的更现代的替代品而诞生的for（就像在大多数语言中一样）。对于进行给定数量的迭代，使用for更合理，而它用于遍历集合。的优点是相比起来相当快（虽然这个并不慢）。forEachforforEach

    有没有应该比其他人使用的？还是视情况而定？

    答案总是视情况而定。正如我在前面所说的，for虽然forEach它们可以用于相同的事情，但最后一个主要用于遍历集合（因此得名）。

    Map另一方面，它旨在迭代一个集合，但目标是对该集合进行操作以从中返回一个新集合。该算法在 Java 等语言中的工作原理相同。

    有没有一种方法可以做类似的事情并且更好（例如：更有效或更快）

    为了回答这个问题，我们可以做一个比较不同结构的小基准：

    • 为了
    • 为每个
    • 地图
    • 对于在
    • 对于的

    性能测试

    这个简单的性能测试产生了有趣的结果。它似乎map比GeckoforEach比Webkit快一个相当大的差异。

    var array = [];
var runs = 100;

(function() {
  for (var i = 0; i < 100000; i++) array[i] = i;

  function runTest(name, f) {
      var totalTime = 0;
      console.time(name);

      for (var r = 0; r < runs; r++) {
          f();
      }
      return console.timeEnd(name);
  }

  function doNothing(v) { }

  runTest('for', function() {
      for (var i = 0; i < array.length; i++) {
          doNothing(array[i]);
      }
  });
  
  runTest('forEach', function() {
    array.forEach(doNothing);
	});
  
  runTest('for in', function() {
  	for(var i in array) {
    	doNothing(array[i]);
    }
  });
  
  runTest('for of', function() {
  	for(var i of array) {
    	doNothing(i)
    }
  });
  
  runTest('map', function() {
  	array.map(doNothing);
  })
})();

    结论

    最新版本的Firefox、Chrome和Edge，返回以下内容：

    • Map它Gecko比所有引擎都快。
    • for它是所有结构中最快的。
    • for in它是所有结构中最慢的。
    • forEach比mapinWebkit和快Chakra。
    • Chakra它是发动机中耗时最长的。
    • for of需要大约相同的时间forEach。

    显然，这些结果在引擎/浏览器的版本之间可能会有所不同，但我认为它们之间的结果是激进的。

    • 18