在 JavaScript 中循环遍历数组

Bertha 。 2024-03-30 09:10 95阅读 0赞

## 问题描述： ##

在 Java 中，您可以使用 for 循环遍历数组中的对象，如下所示：

String[] myStringArray = {
        "Hello", "World"};
    for (String s : myStringArray) {
        
        // Do something
    }

我可以在 JavaScript 中做同样的事情吗？

## 解决方案1: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

三个主要选项：

for (var i = 0; i < xs.length; i++) \{ console.log(xs\[i\]); xs.forEach((x, i) => console.log(x)); for (const x of xs) \{ console.log(x); \}

详细示例如下。

1.顺序for循环：

var myStringArray = \[“Hello”,“World”\]; var arrayLength = myStringArray.length; for (var i = 0; i < arrayLength; i++) \{ console.log(myStringArray\[i\]); //做一点事 \}

优点

适用于各种环境

您可以使用 break 和 continue 流控制语句

缺点

太冗长

至关重要的

容易出现一个错误（有时也称为栅栏柱错误）

1.  Array.prototype.forEach：

ES5 规范引入了许多有益的数组方法。其中一个 Array.prototype.forEach 为我们提供了一种迭代数组的简洁方法：

const array = \[“one”, “two”, “three”\] array.forEach(function (item, index) \{ console.log(item, index); \});

在编写 ES5 规范发布（2009 年 12 月）时已经将近十年了，它已被桌面、服务器和移动环境中的几乎所有现代引擎实现，因此使用它们是安全的。

并且使用 ES6 箭头函数语法，它更加简洁：

array.forEach(item => console.log(item));

除非您计划支持古老的平台（例如，Internet Explorer 11），否则箭头函数也被广泛实现；你也可以安全前往。

优点

非常简短和简洁。

声明式

缺点

不能使用中断/继续

通常，您可以通过在迭代数组元素之前过滤数组元素来替换命令式循环中对 break 的需要，例如：

array.filter(item => item.condition < 10)
         .forEach(item => console.log(item))

请记住，如果您正在迭代一个数组以从中构建另一个数组，您应该使用 map。我已经多次看到这种反模式。

反模式：

const numbers = [1,2,3,4,5], doubled = [];
    
    numbers.forEach((n, i) => {
         doubled[i] = n * 2 });

地图的正确用例：

常量数字 = \[1,2,3,4,5\]; const doubled = numbers.map(n => n \* 2);控制台.log（加倍）；

此外，如果您尝试将数组归约为一个值，例如，您想对一个数字数组求和，则应使用 reduce 方法。

反模式：

const numbers = [1,2,3,4,5];
    const sum = 0;
    numbers.forEach(num => {
         sum += num });

正确使用reduce：

常量数字 = \[1,2,3,4,5\]; const sum = numbers.reduce((total, n) => total + n, 0);控制台.log（总和）；

1.  ES6 for-of 语句：

ES6 标准引入了可迭代对象的概念，并定义了一个用于遍历数据的新结构，即 for…of 语句。

此语句适用于任何类型的可迭代对象以及生成器（任何具有 \[Symbol.iterator\] 属性的对象）。

数组对象是 ES6 中定义的内置可迭代对象，因此您可以对它们使用以下语句：

let colors = ['red', 'green', 'blue'];
    for (const color of colors){
        
        console.log(color);
    }

优点

它可以迭代各种各样的对象。

可以使用正常的流控制语句（break/continue）。

对于迭代串行异步值很有用。

缺点

如果您的目标是较旧的浏览器，转译后的输出可能会让您大吃一惊。

不要用于…in

@zipcodeman 建议使用 for…in 语句，但对于迭代数组 for-in 应避免使用，该语句旨在枚举对象属性。

它不应该用于类似数组的对象，因为：

不保证迭代的顺序；数组索引可能不会按数字顺序访问。

还列举了继承的属性。

第二点是它会给您带来很多问题，例如，如果您扩展 Array.prototype 对象以在其中包含一个方法，那么该属性也会被枚举。

例如：

Array.prototype.foo = “foo!”; var 数组 = \[‘a’, ‘b’, ‘c’\]; for (var i in array) \{ console.log(array\[i\]); \}

上面的代码将控制台记录“a”、“b”、“c”和“foo！”。

如果您使用一些严重依赖原生原型扩充的库（例如 MooTools），这可能会成为一个特别的问题。

正如我之前所说，for-in 语句用于枚举 对象属性，例如：

var obj = \{ “a”: 1, “b”: 2, “c”: 3 \}; for (var prop in obj) \{ if (obj.hasOwnProperty(prop)) \{ // 或者 if (Object.prototype.hasOwnProperty.call(obj,prop)) 为了安全… console.log("prop: " +道具 + " 值: " + obj\[prop\]) \} \}

在上面的示例中，hasOwnProperty 方法只允许您枚举自己的属性。就是这样，只有对象物理具有的属性，没有继承的属性。

我建议您阅读以下文章：

枚举 VS 迭代

`我知道这个答案早于异步和承诺，但我觉得在任何与现代 JavaScript 相关的对话中都值得一提：“forEach 不等待承诺。确保您在使用承诺（或异步函数）时了解其含义作为 forEach 回调。” (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)`

`es6 for-of 的缺点：无法获取当前索引`

`@Vic you can，但这并不简单。`

`for(let ojb of objs) 语句呢？`

`我认为提到的缺少“继续”的对立并不是真的，只是在函数内部使用 return，它是等价的。但是，缺少的“中断”是一个有效的对立点。`

## 解决方案2: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

是的，假设您的实现包括 ECMAScript 2015（“Harmony”版本）中引入的 for…of 功能……这在当今是一个相当安全的假设。

它是这样工作的：

// REQUIRES ECMASCRIPT 2015+
    var s, myStringArray = ["Hello", "World"];
    for (s of myStringArray) {
        
      // ... do something with s ...
    }

或者更好的是，因为 ECMAScript 2015 还提供了块范围的变量：

// REQUIRES ECMASCRIPT 2015+
    const myStringArray = ["Hello", "World"];
    for (const s of myStringArray) {
        
      // ... do something with s ...
    }
    // s is no longer defined here

（变量 s 在每次迭代中都不同，但仍然可以在循环体中声明为 const，只要它没有在那里被修改。）

关于稀疏数组的注意事项：JavaScript 中的数组实际上存储的项目可能没有其 length 报告的那么多；该报告的数字仅比存储值的最高索引大一。如果数组包含的元素少于其长度所指示的元素，则称其为稀疏。例如，拥有一个仅在索引 3、12 和 247 处包含项目的数组是完全合法的；这样一个数组的 length 报告为 248，尽管它实际上只存储了 3 个值。如果您尝试访问任何其他索引处的项目，则该数组将在那里显示 undefined 值。因此，当您想“遍历”一个数组时，您需要回答一个问题：您是要遍历其长度指示的整个范围并处理 undefined 以查找任何缺失的元素，还是只想处理实际存在的元素？这两种方法都有很多应用。这仅取决于您使用数组的目的。

如果您使用 for…of 对数组进行迭代，则循环体将执行 length 次，并且对于数组中实际不存在的任何项目，循环控制变量都设置为 undefined。根据您“使用”代码的详细信息，该行为可能是您想要的，但如果不是，您应该使用不同的方法。

当然，一些开发人员别无选择，只能使用不同的方法，因为无论出于何种原因，他们的目标都是不支持 for…of 的 JavaScript 版本。

只要您的 JavaScript 实现符合以前版本的 ECMAScript 规范（例如，排除了 Internet Explorer 9 之前的版本），那么您就可以改用 Array\#forEach 迭代器方法的一个循环。在这种情况下，您传递一个要在数组中的每个项目上调用的函数：

var myStringArray = [ "Hello", "World" ];
    myStringArray.forEach( function(s) {
         
         // ... do something with s ...
    } );

与 for…of 不同，.forEach 只为数组中实际存在的元素调用函数。如果传递我们假设的具有三个元素且长度为 248 的数组，它只会调用该函数 3 次，而不是 248 次。它还区分了缺失元素和实际设置为 undefined 的元素；对于后者，它仍然会调用函数，传递 undefined 作为参数。如果这是您想要处理稀疏数组的方式，即使您的解释器支持 for…of，.forEach 也可能是可行的方法。

最后一个选项是 an explicit counting loop，它适用于 所有 版本的 JavaScript。您只需从 0 数到比长度小一，然后使用计数器作为索引。基本循环如下所示：

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
    for (i=0; ilength 次，对于任何缺失的元素，s 设置为 undefined，就像 for..of。如果您只想处理稀疏数组中实际存在的元素，例如 .forEach，您可以在索引上添加一个简单的 in 测试：
    
     
    
    ```java
    var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
    for (i=0; imyStringArray.length 表达式相反）可以显着提高性能，因为它每次都会跳过属性查找；在我的机器上使用 Rhino，加速是 43%。
    
     您可能会在循环初始化子句中看到长度缓存，如下所示：
    
     
    
    ```java
    var i, len, myStringArray = [ "Hello", "World" ];
    for (len = myStringArray.length, i=0; iforEach 的函数，因此您也可以通过这种方式访问它：
    
     
    
    ```java
    myStringArray.forEach( function(s, i) {
        
       // ... do something with s and i ...
    });

for…of 不会为您提供与每个对象关联的索引，但只要您正在迭代的对象实际上是 Array（for…of 适用于其他对象可能没有此方法的可迭代类型），您可以使用 Array\#entries 方法将其更改为 \[index, item\] 对的数组，然后对其进行迭代：

for (const [i, s] of myStringArray.entries()) {
        
      // ... do something with s and i ...
    }

其他人提到的 for…in 语法是用于循环对象的属性；由于 JavaScript 中的 Array 只是一个具有数字属性名称的对象（以及一个自动更新的 length 属性），因此理论上您可以使用它循环遍历 Array。但问题是它并不局限于数字属性值（请记住，即使方法实际上只是其值为闭包的属性），也不能保证按数字顺序迭代那些。因此，for…in 语法应该不用于遍历数组。

`请注意，如果代码被调用足够多的次数并且它检测到长度未被循环修改，则某些解释器（例如 V8）会自动缓存数组的长度。虽然缓存长度仍然很好，但当您的代码被调用足够多的时间以实际产生影响时，它可能无法提供速度提升。`

## 解决方案3: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

您可以使用 map，这是一种函数式编程技术，也可用于其他语言，如 Python 和 Haskell。

[1,2,3,4].map( function(item) {
        
         alert(item);
    })

一般语法是：

array.map(func)

通常 func 将采用一个参数，它是数组的一项。但在 JavaScript 的情况下，它可以采用第二个参数，即项目的索引，以及第三个参数，即数组本身。

array.map 的返回值是另一个数组，因此您可以像这样使用它：

var x = [1,2,3,4].map( function(item) {
        return item * 10;});

现在 x 是 \[10,20,30,40\]。

您不必内联编写函数。它可以是一个单独的功能。

var item_processor = function(item) {
        
          // Do something complicated to an item
    }
    
    new_list = my_list.map(item_processor);

这将相当于：

for (item in my_list) {
        item_processor(item);}

除非您没有得到 new\_list。

`使用 Array.forEach 可能会更好地实现该特定示例。 map 用于生成新数组。`

`@hasen，Array.prototype.map 方法是 ECMAScript 第 5 版标准的一部分，尚未在所有实现上都可用（例如 IE 缺少它），也用于 iterating 数组我认为 {1 } 方法更语义正确...也请不要建议 for-in 语句，有关更多详细信息，请参阅我的答案 :)`

## 解决方案4: ##

> huntsbot.com – 高效赚钱，自由工作

for (const s of myStringArray) \{

（直接回答你的问题：现在你可以了！）

大多数其他答案都是正确的，但他们没有提到（在撰写本文时）ECMAScript 6 2015 带来了一种新的迭代机制，即 for…of 循环。

这种新语法是在 JavaScript 中迭代数组的最优雅的方式（只要您不需要迭代索引）。

它目前适用于 Firefox 13+、Chrome 37+，并且本身不适用于其他浏览器（请参阅下面的浏览器兼容性）。幸运的是，我们拥有 JavaScript 编译器（例如 Babel），使我们能够在今天使用下一代功能。

它也适用于 Node.js（我在 0.12.0 版本上对其进行了测试）。

迭代数组

// You could also use "let" or "const" instead of "var" for block scope.
    for (var letter of ["a", "b", "c"]) {
        
       console.log(letter);
    }

迭代对象数组

const band = [
      {
        firstName : 'John', lastName: 'Lennon'},
      {
        firstName : 'Paul', lastName: 'McCartney'}
    ];
    
    for(const member of band){
        
      console.log(member.firstName + ' ' + member.lastName);
    }

迭代生成器：

（摘自 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of 的示例）

function* fibonacci() {
         // A generator function
      let [prev, curr] = [1, 1];
      while (true) {
        
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }
    
    for (const n of fibonacci()) {
        
      console.log(n);
      // Truncate the sequence at 1000
      if (n >= 1000) {
        
        break;
      }
    }

兼容性表： http://kangax.github.io/compat-table/es6/\#test-for…of\_loops

规格： http://wiki.ecmascript.org/doku.php?id=harmony:iterators

## 解决方案5: ##

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

在 JavaScript 中，不建议使用 for-in 循环遍历 Array，但最好使用 for 循环，例如：

for(var i=0, len=myArray.length; i < len; i++){
        }

它也经过优化（“缓存”数组长度）。如果您想了解更多信息，read my post on the subject。

## 解决方案6: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

Opera、Safari、Firefox 和 Chrome 现在都共享一组增强的 Array 方法，用于优化许多常见的循环。

您可能不需要所有这些，但它们可能非常有用，或者如果每个浏览器都支持它们的话。

Mozilla 实验室发布了他们和 WebKit 都使用的算法，以便您自己添加它们。

过滤器返回满足某些条件或测试的项目数组。

如果每个数组成员都通过了测试，则 each 返回 true。

如果有任何通过测试，则 some 返回 true。

forEach 在每个数组成员上运行一个函数并且不返回任何内容。

map 类似于 forEach，但它返回一个包含每个元素的操作结果的数组。

这些方法都采用一个函数作为它们的第一个参数，并有一个可选的第二个参数，这是一个对象，您希望在数组成员循环通过函数时将其范围强加于它们。

忽略它，直到你需要它。

indexOf 和 lastIndexOf 找到与其参数完全匹配的第一个或最后一个元素的适当位置。

当然，您需要在该 for 循环内的某处包含一个 if(condition === true) \{ break; \} 或一个 if(condition === true) \{ return; \} 以使其停止运行。

但是，通常初始化用于声明索引，条件用于将该索引与最小值或最大值进行比较，事后考虑用于增加索引：

for (var i = 0, length = 10; i < length; i++) {
        
        console.log(i);
    }

使用传统的 for 循环遍历数组

遍历数组的传统方法是：

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

或者，如果您更喜欢向后循环，请执行以下操作：

for (var i = myArray.length - 1; i > -1; i--) {
        
        console.log(myArray[i]);
    }

但是，可能有许多变化，例如这个：

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
        
        console.log(value);
    }

……或者这个……

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

…或者这个：

var key = 0, value;
    for (; value = myArray[key++];){
        
        console.log(value);
    }

哪个效果最好在很大程度上取决于个人品味和您正在实施的特定用例。

请注意，所有浏览器都支持这些变体中的每一个，包括非常非常旧的浏览器！

一个while循环

for 循环的一种替代方法是 while 循环。要遍历数组，您可以这样做：

var key = 0;
    while(value = myArray[key++]){
        
        console.log(value);
    }

与传统的 for 循环一样，即使是最古老的浏览器也支持 while 循环。

另外，请注意，每个 while 循环都可以重写为 for 循环。例如，上述 while 循环的行为方式与此 for 循环完全相同：

for(var key = 0; value = myArray[key++];){
        
        console.log(value);
    }

为…在和为…的

在 JavaScript 中，您也可以这样做：

for (i in myArray) {
        
        console.log(myArray[i]);
    }

然而，这应该小心使用，因为在所有情况下它的行为都与传统的 for 循环不同，并且需要考虑潜在的副作用。有关详细信息，请参阅 Why is using “for…in” for array iteration a bad idea?。

作为 for…in 的替代品，现在还有 for…of。以下示例显示了 for…of 循环和 for…in 循环之间的区别：

var myArray = [3, 5, 7];
    myArray.foo = "hello";
    
    for (var i in myArray) {
        
      console.log(i); // logs 0, 1, 2, "foo"
    }
    
    for (var i of myArray) {
        
      console.log(i); // logs 3, 5, 7
    }

此外，您需要考虑没有任何版本的 Internet Explorer 支持 for…of（Edge 12+ 支持）并且 for…in 至少需要 Internet Explorer 10。

Array.prototype.forEach()

for 循环的替代方法是 Array.prototype.forEach()，它使用以下语法：

myArray.forEach(function(value, key, myArray) {
        
        console.log(value);
    });

所有现代浏览器以及 Internet Explorer 9 及更高版本都支持 Array.prototype.forEach()。

图书馆

最后，许多实用程序库也有自己的 foreach 变体。 AFAIK，最受欢迎的三个是：

jQuery.each()，在 jQuery：

$.each(myArray, function(key, value) {
        
        console.log(value);
    });

\_.each()，在 Underscore.js：

_.each(myArray, function(value, key, myArray) {
        
        console.log(value);
    });

\_.forEach()，在 Lodash：

_.forEach(myArray, function(value, key) {
        
        console.log(value);
    });

## 解决方案9: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

使用while循环…

var i = 0, item, items = ['one', 'two', 'three'];
    while(item = items[i++]){
        
        console.log(item);
    }

它记录：“一”、“二”和“三”

而对于相反的顺序，一个更有效的循环：

var items = ['one', 'two', 'three'], i = items.length;
    while(i--){
        
        console.log(items[i]);
    }

它记录：“三”、“二”和“一”

或者经典的 for 循环：

var items = ['one', 'two', 'three']
    for(var i=0, l = items.length; i < l; i++){
        
        console.log(items[i]);
    }

它记录：‘一’，‘二’，‘三’

参考：Google Closure: How not to write JavaScript

`如果任何数组元素是虚假的，则“while”语法的第一个示例将不起作用。`

`...而这个while循环等效于： for (var i=0,item; item=items[i]; i++) ，它消除了事先声明索引和项目变量的需要...`

## 解决方案10: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

如果您想要一种简洁的方式来编写快速循环，并且可以反向迭代：

for (var i=myArray.length;i--;){
        
      var item=myArray[i];
    }

这样做的好处是缓存长度（类似于 for (var i=0, len=myArray.length; i<len; ++i) 而不同于 for (var i=0; i<myArray.length; ++i)），同时输入的字符更少。

有时您甚至应该进行反向迭代，例如在您计划在迭代期间从 DOM 中删除项目的 live NodeList 上进行迭代时。

`对于那些没有得到如此巧妙的东西的人： i-- 表达式首先被评估并允许循环在它不是假的时候继续......然后计数器递减。一旦 i 变为零，它就会跳出循环，因为零是 Javascript 中的错误值。`

`假的？你的意思是假的。让我们都坚持正确的术语以避免混淆；）`

## 解决方案11: ##

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

在 JavaScript 中以函数式编程方式循环数组的一些用例：

1.  遍历一个数组

注意： Array.prototype.forEach() 严格来说不是函数方式，因为它作为输入参数的函数不应该返回值，因此不能被视为纯函数。

2.检查数组中的任何元素是否通过测试

3.转换为新数组

const myArray = [{
        x:100}, {
        x:200}, {
        x:300}];
    
    const newArray= myArray.map(element => element.x);
    console.log(newArray); // [100, 200, 300]

注意： map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

1.  总结一个特定的属性，并计算它的平均值

5.在原有的基础上新建一个数组，但不修改

6.统计每个类别的数量

1.  根据特定标准检索数组的子集

const myArray = [{
        x:100}, {
        x:200}, {
        x:300}];
    
    const newArray = myArray.filter(element => element.x > 250);
    console.log(newArray); // [{x:300}]

注意： filter() 方法创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。

1.  对数组进行排序

https://i.stack.imgur.com/scSsS.png

1.  在数组中查找元素

https://i.stack.imgur.com/ODT69.png

Array.prototype.find() 方法返回数组中满足提供的测试函数的第一个元素的值。

参考

Array.prototype.some()

Array.prototype.forEach()

Array.prototype.map()

Array.prototype.filter()

Array.prototype.sort()