For-each在JavaScript中的数组？

编辑 ：这个答案毫无希望地过时了。对于更现代的方法，请查看 数组上可用的方法 。感兴趣的方法可能是：

• 的forEach
• 地图
• 过滤
• 压缩
• 降低
• 一切
• 一些

在 JavaScript中迭代数组的标准方法 是一个Vanilla for循环：

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

但请注意，如果您有一个密集数组，并且每个索引都被一个元素占用，这种方法才有用。如果数组是稀疏的，那么使用这种方法可能会遇到性能问题，因为您将遍历数组中不存在真的许多索引。在这种情况下，for .. in循环可能是一个更好的主意。 但是 ，必须使用适当的安全措施来确保只对数组的所需属性（即数组元素）起作用，因为for..in-循环也将在旧版浏览器中枚举，或者如果其他属性定义为enumerable。

在 ECMAScript 5中 在数组原型上会有一个forEach方法，但在旧版浏览器中不支持它。因此，为了能够始终如一地使用它，您必须具有支持它的环境（例如， Node.js 用于服务器端JavaScript），或使用“Polyfill”。然而，Polyfill对于这个功能来说是微不足道的，因为它使代码更容易阅读，所以它是一个很好的polyfill。

如果你使用的是 jQuery library，你可以使用 jQuery.each ：

$.each(yourArray, function(index, value) {
  // do your stuff here
});

编辑： / 

根据问题，用户想要javascript中的代码而不是jquery，所以编辑是

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

向后循环

我认为reverse for循环值得一提：

for (var i = array.length; i--; ) {
     // process array[i]
}

好处：

• 您不需要声明临时len变量，也不需要在每次迭代时与array.length进行比较，其中任何一个都可能是一分钟优化。
• 以相反的顺序从DOM中删除兄弟姐妹 通常是 更有效 。 （浏览器需要减少内部数组中元素的移动。）
• 如果你 修改数组 while循环，在index i之后或之后（例如你在array[i]中删除或插入一个项目），那么前向循环会跳过向左移动的项目position i，或重新处理向右移动的i项。在传统的for循环中，你can update i指向下一个需要处理的项 - 1，但简单地反转迭代的方向通常是 simpler 和 更优雅的解决方案 。
• 类似地，当修改或删除 嵌套 DOM元素时，反向处理可以 规避错误 。例如，在处理子节点之前，请考虑修改父节点的innerHTML。到达子节点时，它将与DOM分离，在写入父内部HTML时，已被新创建的子节点替换。
• 它是 更短 键入，和 读 ，比其他一些可用选项。虽然它失去了forEach()和ES6的for ... of。

缺点：

• 它以相反的顺序处理项目。如果你是从结果中构建一个新数组，或者在屏幕上打印东西，那么当然 输出将相反 相对于原始顺序。
• 为了保持他们的顺序，重复地将兄弟姐妹插入DOM作为第一个孩子是 效率较低 。 （浏览器将不得不改变方向。）要按顺序有效地创建DOM节点，只需循环前进并正常追加（并使用“文档片段”）。
• 反向循环是 混淆 初级开发人员。 （您可能会认为这是一个优势，具体取决于您的Outlook。）

我应该经常使用它吗？

一些开发人员使用reverse for loop 默认情况下，除非有充分的理由向前循环。

虽然性能提升通常微不足道，但它有点尖叫：

“只需对列表中的每个项目执行此操作，我不关心订单！”

然而在实践中， not 实际上是意图的可靠指示，因为它与你do关心订单的情况难以区分，并且确实need以反向循环。因此实际上需要另一个构造来准确表达“不关心”的意图，这在大多数语言中都是不可用的，包括ECMAScript，但可以调用，例如，forEachUnordered()。

如果顺序无关紧要，并且 效率 是一个问题（在游戏或动画引擎的最里面的循环中），那么使用反向循环作为你的首选模式是可以接受的。只记得在现有代码中看到反向循环 并不一定意味着 该顺序无关紧要！

最好使用forEach（）

一般来说，对于更高级别的代码，其中 清晰度和安全性 是更大的问题，我建议使用 Array::forEach 作为您的默认模式：

• 很清楚阅读。
• 它表明i不会在块中移位（这总是可能会隐藏在长for和while循环中。）
• 它为您提供了一个免费的闭包范围。
• 它减少了局部变量的泄漏以及外部变量的意外碰撞（和突变）。

然后，当你在代码中看到反向循环时，这是一个暗示它被推翻的原因很充分（可能是上述原因之一）。并且看到传统的前向循环可能表明可能发生变换。

（如果对意图的讨论对你没有意义，那么你和你的代码可能会受益于观看Crockford的讲座 编程风格和你的大脑 。）

它是如何工作的？

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

您会注意到i--是中间子句（我们通常会看到比较），最后一个子句是空的（我们通常会看到i++）。这意味着i--也用作条件用于延续。至关重要的是，每次迭代都会执行并检查之前。

• 如何在没有爆炸的情况下从array.length开始？

  因为i--在每次迭代时运行before，所以在第一次迭代中我们将实际访问array.length - 1处的项目，这避免了任何问题。 数组出界外 undefined项目。

• 为什么它不会在索引0之前停止迭代？

  当条件i--计算为假值（当它产生0时），循环将停止迭代。

  诀窍在于，与--i不同，尾随的i--运算符会递减i但会产生值before减量。你的控制台可以证明：

  > var i = 5; [i, i--, i];

  [5, 5, 4]

  所以在最后一次迭代中，i先前是 1 而i--表达式将其更改为 0 但实际上得到 1 （真实），条件通过了。在下一次迭代中i--将i更改为 -1 但产生 0 （falsey），导致执行立即从循环底部退出。

  在传统的for循环中，i++和++i是可以互换的（正如Douglas Crockford指出的那样）。但是在反向for循环中，因为我们的减量也是我们的条件表达式，如果我们想在索引0处理项目，我们必须坚持使用i--。

琐事

有些人喜欢在反向for循环中绘制一个小箭头，并以眨眼结束：

for (var i = array.length; i --> 0 ;) {

积分转到WYL，向我展示反向循环的好处和恐怖。

一些 _ c _ - 样式语言使用foreach循环遍历枚举。在JavaScript中，这是通过 for..in循环结构完成的 ：

var index,
    value;
for (index in obj) {
    value = obj[index];
}

有一个问题。 for..in将循环遍历每个对象的可枚举成员以及其原型上的成员。要避免读取通过对象原型继承的值，只需检查属性是否属于该对象：

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

另外， ECMAScript 5 已向Array.prototype添加了一个 forEach 方法，可用于使用calback枚举数组（polyfill在文档中，因此您仍然可以将它用于旧版浏览器）：

arr.forEach(function (val, index, theArray) {
    //do stuff
});

重要的是要注意Array.prototype.forEach在回调返回false时不会中断。 jQuery 和 Underscore.js 在each上提供自己的变体，以提供可以短路的循环。

如果要循环遍历数组，请使用标准的三部分for循环。

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

您可以通过缓存myArray.length或向后迭代来获得一些性能优化。

我知道这是一个老帖子，已经有很多很棒的答案了。为了更完整一点，我想我会使用 AngularJS 扔另一个。当然，这只适用于你使用Angular的情况，显然，无论如何我仍然愿意。

angular.forEach接受2个参数和一个可选的第三个参数。第一个参数是迭代的对象（数组），第二个参数是迭代器函数，可选的第三个参数是对象上下文（在循环内部基本上称为'this'。

有不同的方法来使用forEach循环的角度。最简单也可能最常用的是

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

另一种将项目从一个数组复制到另一个数组的方法是

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.Push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

虽然，您不必这样做，但您可以简单地执行以下操作，它与上一个示例相同：

angular.forEach(temp, function(item) {
    temp2.Push(item);
});

现在有使用angular.forEach函数的优点和缺点，而不是内置的Vanilla风格的for循环。

优点

• 易读性
• 易写性
• 如果可用，angular.forEach将使用ES5 forEach循环。现在，我将在cons部分中获得效率，因为forEach循环比for循环慢多。我作为专业人士提到这一点，因为保持一致和标准化是件好事。

考虑以下2个嵌套循环，这些循环完全相同。假设我们有2个对象数组，每个对象包含一个结果数组，每个结果都有一个Value属性，它是一个字符串（或其他）。并且假设我们需要迭代每个结果，如果它们相等则执行一些操作： 

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

虽然这是一个非常简单的假设示例，但是我已经使用第二种方法编写了三次嵌入for循环，并且非常难以阅读，并为此写作。

缺点

• 效率。 angular.forEach和本机forEach，就这一点来说，太多比正常的for循环慢......大约 慢90％ 。因此对于大型数据集，最好坚持本机for循环。
• 没有休息，继续或返回支持。 continue实际上由“ accident ”支持，在angular.forEach中继续你简单地将return;语句放在函数中，如angular.forEach(array, function(item) { if (someConditionIsTrue) return; });，这将导致它继续执行该迭代的函数。这也是由于本机forEach不支持中断或继续。

我相信还有其他各种优点和缺点，请随意添加任何你认为合适的东西。我觉得，如果你需要效率的话，最重要的是，坚持使用原生的for循环来满足你的循环需求。但是，如果你的数据集较小并且可以放弃一些效率来换取可读性和可写性，那么无论如何都要在那个坏男孩身上抛出angular.forEach。

如果你不介意清空数组：

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x将包含y的最后一个值，它将从数组中删除。你也可以使用shift()来提供和删除y中的第一个项目。

A forEach implementation（ 参见jsFiddle ）：

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

现在一个简单的解决方案是使用 underscore.js库 。它提供了许多有用的工具，例如each，并且会自动将作业委托给本机forEach（如果可用）。

CodePen示例 它的工作原理是：

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

也可以看看

• 原生Array.prototype.forEach()的文档 。
• 在for_each ... in（MDN）中，解释了for each (variable in object)被弃用为ECMA-357（ _ eax _ ）标准的一部分。
• for ... of （MDN）描述了使用for (variable of object)作为Harmony（ECMAScript 6）提议的一部分进行迭代的下一种方式。

在 jQuery 中有三个foreach实现，如下所示。

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

可能for(i = 0; i < array.length; i++)循环不是最佳选择。为什么？如果你有这个：

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

该方法将从array[0]调用array[2]。首先，这将首先引用你甚至没有的变量，第二个你不会在数组中有变量，第三个会使代码更大胆。看这里，这是我使用的：

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

如果你想让它成为一个函数，你可以这样做：

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

如果你想打破一点逻辑：

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

例：

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

它返回：

//Hello
//World
//!!!

自ES6起：

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

其中of避免了与in相关的奇怪之处，并使其像任何其他语言的for循环一样工作，而let在循环中绑定i而不是在函数内。

当只有一个命令时（例如在上面的例子中），可以省略大括号（{}）。

这是NON稀疏列表的迭代器，其中索引从0开始，这是处理document.getElementsByTagName或document.querySelectorAll时的典型场景。

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

用法示例：

示例＃1

var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]

示例＃2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

每个p标签都有class="blue"

示例＃3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

每个其他p标签都有class="red">

示例＃4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

最后，前20个蓝色p标签变为绿色

使用字符串作为函数时的注意事项：该函数是在上下文中创建的，只有在您确定变量作用域时才应该使用。否则，最好传递范围更直观的函数。

本机 JavaScript 中没有任何for each循环。你可以使用库来获得这个功能（我推荐 Underscore.js ），在循环中使用一个简单的for。

for (var instance in objects) {
   ...
}

但是请注意，可能有理由使用更简单的for循环（参见Stack Overflow问题为什么在数组迭代中使用“for ... in”这样一个坏主意？）

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}

有 几种方式 在JavaScript中循环一个数组，如下所示：

for - 这是最常见的一个。用于循环的完整代码块

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

while - 在条件通过时循环。它似乎是最快的循环

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

do/while - 在条件为真时循环遍历代码块，将至少运行一次

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;

<p id="example"></p>

功能循环 - forEach，map，filter，也reduce（它们遍历该函数，但如果您需要对数组执行某些操作，则使用它们等。

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});

<p id="example"></p>

有关数组上函数编程的更多信息和示例，请查看博客文章JavaScript中的函数编程：map，filter和reduce。

使用Arrays的ECMAScript5（Javascript版本）。

forEach - 遍历数组中的每个项目，并为每个项目做任何你需要的事情。

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

万一，对使用一些内置功能的阵列操作更感兴趣。

map - 它使用回调函数的结果创建一个新数组。当您需要格式化数组元素时，可以使用此方法。

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - 正如名称所说，它通过调用传入currenct元素的给定函数和前一次执行的结果将数组减少为单个值。

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - 如果数组中的所有元素都在回调函数中通过测试，则返回true或false。

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - 非常类似于除过滤器之外的每个过滤器返回一个数组，其中的元素返回true给定的函数。

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

希望这会有用。

没有内置的能力来打破forEach。要中断执行，请使用Array#some，如下所示：

[1,2,3].some(function(number) {
    return number === 1;
});

这是有效的，因为只要以数组顺序执行的任何回调返回true，some就会返回true，从而使其余的执行短路。 原始答案 参见数组原型 some

我还想将此作为一个反向循环的组合添加到上面的答案中，对于那些想要这种语法的人来说也是如此。

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

优点：

这样做的好处是：你已经在第一个中有了引用，就像以后不需要用另一行声明一样。循环通过对象数组时很方便。

缺点：

只要引用为false，这将会中断 - falsey（未定义等）。它可以作为一个优势使用。但是，它会让它更难阅读。并且还取决于浏览器，它可以“不”优化，以比原始工作更快。

使用$.map的jQuery方式：

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];

最接近你想法的方法是使用Array.forEach()，它接受将为数组的每个元素执行的clojure函数。

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

另一种可行的方法是使用Array.map()，它以相同的方式工作，但每个元素也mutates并返回它，如：

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

使用ES6循环 解构 和 扩展运算符

虽然一些javascript退伍军人可能认为它很混乱，但是小辈或其他一些人可能觉得它很有用，因此对于ES6的新手来说，解构和扩展运算符的使用已被证明是非常有用的。

以下示例将使用 for...of statement和 .forEach method。

实施例6,7和8 可与像.map任何官能环路被使用，.filter，.reduce，.sort，.every，.some，以获取更多信息有关这些方法检查出 Array对象 。

示例1： 正常for...of循环 - 这里没有技巧。

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

示例2： 将单词拆分为字符

let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

示例3： 使用key和value循环 

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

示例4： 获取对象属性内联

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

示例5： 获取所需内容的深层对象属性

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

示例6： 是 示例3 与.forEach一起使用

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

例7： 是 例4 与.forEach一起使用

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

例8： 是 例5 与.forEach一起使用

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

Lambda语法通常不适用于IE 10或更低版本。

我经常使用

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

你可以打电话给每个人这样：

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

element将具有从0到数组长度的每个索引的值。

输出：

1    
3    
2

阐释：

forEach是原型类。你也可以把它称为theArray.prototype.forEach（...）;

原型： https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

您还可以像这样更改数组：

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

如果你想用箭头函数循环遍历对象数组：

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})

摘要：

在遍历数组时，我们通常可能希望实现以下目标之一：

1. 我们想迭代数组并创建新数组：

   Array.prototype.map 
   
   

2. 我们想迭代数组而不创建新数组：

   Array.prototype.forEach 

for..of loop

在JS中，有很多方法可以实现这两个目标。但是，有些人比其他人更有条理。下面你可以找到一些常用的方法（最方便的imo）来完成javascript中的数组迭代。

创建新数组：Map

map()是一个位于Array.prototype上的函数，它可以转换数组的每个元素，然后返回一个 new 数组。 map()将回调函数作为参数，并按以下方式工作：

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

我们作为参数传递给map()的回调对每个元素都执行了。然后返回一个与原始数组长度相同的数组。在这个新的数组元素由作为参数传入的回调函数转换为map()。

map与其他循环机制（如forEach和for..of循环）之间的明显区别是map作为新数组返回并保留旧数组 （除非您明确地使用splice之类的思想操纵它）。 

另请注意，map函数的回调提供了当前迭代的索引号作为第二个参数。此外，第三个参数提供了调用map的数组。有时这些属性非常有用。

循环使用forEach

forEach是一个位于Array.prototype上的函数，它将回调函数作为参数。然后它为数组中的每个元素执行此回调函数。与map()函数相反，forEach函数不返回任何内容（undefined）。例如：

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

与map函数一样，forEach回调提供当前迭代的索引号作为第二个参数。第三个参数也提供了调用forEach的数组。 

使用for..of循环遍历元素

for..of循环遍历数组的每个元素（或任何其他可迭代对象）。它的工作方式如下：

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

在上面的例子中，element代表一个数组元素，arr是我们想要循环的数组。并不是名称element是任意的，我们可以选择任何其他名称，如'el'或更适用的声明。 

不要将for..in循环与for..of循环混淆。 for..in将循环遍历数组的所有可枚举属性，而for..of循环将仅循环遍历数组元素。例如：

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

如果你有一个庞大的数组，你应该使用 iterators 来获得一些效率。迭代器是某些JavaScript集合的属性（例如 Map ， Set ， String ， Array ）。甚至， for..of 使用iteratorunder-the-hood。

迭代器通过让您一次一个地使用列表中的项目来提高效率，就像它们是一个流一样。使迭代器特殊的是它如何遍历集合。其他循环需要预先加载整个集合以便迭代它，而迭代器只需要知道集合中的当前位置。 

您可以通过调用迭代器的next方法来访问当前项。下一个方法将返回当前项的value和boolean以指示何时到达集合的末尾。以下是从数组创建迭代器的示例。 

使用 values() 方法将常规数组转换为迭代器，如下所示： 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

你也可以使用 Symbol.iterator 将常规数组转换为迭代器，如下所示： 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

您还可以将常规array转换为 iterator ，如下所示： 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

_ note _ ： 

• 迭代器本质上是穷举的。 
• 默认情况下，对象不是iterable。在这种情况下使用 for..in 因为它不是值，而是使用键。

您可以阅读有关iteration protocolhere 的更多信息。 

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

您可以使用forEach（）API（由Javascript提供），它接受函数作为回调，并为数组中的每个元素运行一次。

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

我来自python，我发现这种方式更加清晰。
theArray是数组，实例是数组的元素

for(let instance of theArray)
{
    console.log("The instance",instance);
}

要么

for( instance in theArray)
{
  console.log("The instance",instance);
}

相比于：

theArray.forEach(function(instance) {
    console.log(instance);
});

但在一天结束时，两人都在做同样的事情

如果您想以功能方式保存代码，请使用map：

theArray.map(instance => do_something);

通过这种方式，您将为将来的操作生成新数组，并将跳过任何不理想的副作用。

如果你想使用forEach()，它看起来像 -

theArray.forEach ( element => {
    console.log(element);
});

如果你想使用for()，它看起来像 -

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}