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

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

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


三个主要选项:

对于(var i=0;i<xs.length;i++){console.log(xs[i]);}xs.forEach((x,i)=>console.log(x));for(xs的常量x){console.log(x);}

下面是详细的示例。


1.循环顺序:

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

Pros

适用于各种环境可以使用break和continue流控制语句

Cons

过于冗长迫切的容易出现一个错误(有时也称为围栏柱错误)

2.阵列.原型.每个:

ES5规范引入了许多有益的数组方法。其中一个是Array.prototype.forEach,它为我们提供了一种简单的方法来遍历数组:

常量数组=[“一”,“二”,“三”]array.forEach(函数(项,索引){console.log(项,索引);});

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

使用ES6箭头函数语法,它更加简洁:

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

箭头功能也被广泛实现,除非您计划支持古老的平台(例如Internet Explorer 11);你去也很安全。

Pros

非常简短和简洁。声明的

Cons

无法使用中断/继续

通常,您可以通过在迭代数组元素之前过滤数组元素来代替中断命令循环的需要,例如:

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];常量doubled=numbers.map(n=>n*2);console.log(加倍);

此外,如果您试图将数组缩减为一个值,例如,您希望对一个数字数组求和,则应使用reduce方法。

反模式:

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

正确使用reduce:

常量=[1,2,3,4,5];常量sum=数字。减少((total,n)=>total+n,0);console.log(总和);

3.声明的ES6:

ES6标准引入了可迭代对象的概念,并定义了用于遍历数据的新构造,即for。。。声明。

此语句适用于任何类型的可迭代对象,也适用于生成器(任何具有\[Symbol.iiterator\]属性的对象)。

根据定义,数组对象是ES6中内置的可迭代对象,因此可以对它们使用以下语句:

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

Pros

它可以遍历大量对象。可以使用正常的流量控制语句(中断/继续)。用于迭代串行异步值。

Cons

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

不用于。。。在里面

@zipcodeman建议使用for。。。在语句中,但对于迭代数组,应该避免for-in,该语句旨在枚举对象财产。

它不应用于类似数组的对象,因为:

迭代的顺序没有保证;数组索引不能按数字顺序访问。还枚举了继承的财产。

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

例如:

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

上面的代码将控制台日志“a”、“b”、“c”和“foo!”。

如果您使用一些严重依赖原生原型扩充的库(如MooTools),这可能是一个特别的问题。

如前所述,for-in语句用于枚举对象财产,例如:

变量obj={“a”:1,“b”:2,“c”:3};for(obj中的var属性){if(obj.hasOwnProperty(prop)){//或如果(Object.protype.hasOwnProperty.call(obj,prop))安全。。。console.log(“prop:”+prop+“value:”+obj[prop])}}

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

我建议您阅读以下文章:

枚举VS迭代

您可以使用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。

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

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

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

筛选器返回满足某个条件或测试的项目数组。

如果每个数组成员都通过测试,则every返回true。

如果有人通过测试,则返回true。

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

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

这些方法都将一个函数作为其第一个参数,并有一个可选的第二个参数,这是一个对象,当数组成员循环通过该函数时,您希望将其范围强加给数组成员。

忽略它,直到你需要它。

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

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

在JavaScript中,不建议使用for In循环遍历Array,但最好使用for循环,例如:

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

它也进行了优化(“缓存”数组长度)。如果你想了解更多,请阅读我关于这个主题的帖子。

有一种方法可以在循环中的隐式作用域很小的情况下实现,并去掉额外的变量。

var i = 0,
     item;

// Note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){
    item; // This is the string at the index.
}

或者如果你真的想得到id并有一个真正经典的for循环:

var i = 0,
    len = myStringArray.length; // Cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

现代浏览器都支持Array原型上的Each、map、reduce、filter等迭代器方法。

使用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]);
}

它记录:“一”、“两”、“三”

参考资料:谷歌闭包:如何不编写JavaScript

有一种方法可以只迭代自己的对象财产,而不包括原型的属性:

for (var i in array) if (array.hasOwnProperty(i)) {
    // Do something with array[i]
}

但它仍将迭代自定义的财产。

在JavaScript中,任何自定义属性都可以分配给任何对象,包括数组。

如果要在稀疏数组上迭代,应使用for(var i=0;i<array.length;i++)If(i in array)或array.forEach with es5shim。

是的,假设您的实现包括for。。。在ECMAScript 2015(“Harmony”版本)中引入的功能。。。现在这是一个相当安全的假设。

它的工作原理如下:

// 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在每次迭代中都是不同的,但只要不在循环体中修改,它仍然可以在循环体内部声明为常量。)

关于稀疏数组的一个注意事项:JavaScript中的数组实际存储的项目可能不像其长度所报告的那么多;该数字仅比存储值的最高索引大一个。如果数组包含的元素少于其长度所指示的元素,则称为稀疏。例如,只有索引3、12和247处的项的数组是完全合法的;这种数组的长度是248,尽管它实际上只存储3个值。如果您试图访问任何其他索引处的项,则该数组将显示为具有未定义的值,但该数组与实际存储有未定义值的数组不同。您可以从许多方面看到这种差异,例如,在Node REPL显示阵列的方式中:

> a              // array with only one item, at index 12
[ <12 empty items>, 1 ]
> a[0]           // appears to have undefined at index 0
undefined
> a[0]=undefined // but if we put an actual undefined there
undefined
> a              // it now looks like this
[ undefined, <11 empty items>, 1 ]

因此,当您想要“循环遍历”数组时,您需要回答一个问题:是要在其长度所指示的整个范围内循环,并为任何缺失的元素处理未定义的元素,还是只处理实际存在的元素?这两种方法都有大量的应用;这取决于您使用数组的目的。

如果使用for..遍历数组。。中,循环的主体执行长度次,并且对于数组中实际不存在的任何项,循环控制变量设置为undefined。根据“使用”代码的细节,这种行为可能是您想要的,但如果不是,您应该使用不同的方法。

当然,有些开发人员别无选择,只能使用不同的方法,因为无论出于什么原因,他们的目标是一个尚不支持的JavaScript版本。。。属于

只要您的JavaScript实现符合先前版本的ECMAScript规范(例如,它排除了9之前版本的Internet Explorer),那么您就可以使用Array#forEach迭代器方法而不是循环。在这种情况下,您将传递一个函数,对数组中的每个项进行调用:

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

如果您的实现支持ES6+,当然可以使用箭头函数:

myStringArray.forEach( s => { 
     // ... do something with s ...
} );

不同于。。。of,.forEach只为数组中实际存在的元素调用函数。如果传递了具有三个元素且长度为248的假设数组,它将只调用函数三次,而不是248次。如果这是您想要处理稀疏数组的方式,那么即使您的解释器支持。。。属于

最后一个选项是显式计数循环,适用于所有版本的JavaScript。您只需从0到小于长度的1进行计数,并将计数器用作索引。基本循环如下所示:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

这种方法的一个优点是可以选择如何处理稀疏数组。上面的代码将运行循环体的整个长度,对于任何缺失的元素,s都设置为undefined,就像for。。属于如果您希望只处理稀疏数组中实际存在的元素,例如.forEach,则可以在索引上添加一个简单的in测试:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

根据实现的优化,将长度值分配给局部变量(而不是在循环条件中包含完整的myStringArray.length表达式)可以显著提高性能,因为它每次都会跳过属性查找。您可以在循环初始化子句中看到长度缓存,如下所示:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

显式计数循环还意味着您可以访问每个值的索引(如果需要的话)。该索引还作为一个额外的参数传递给传递给forEach的函数,因此您也可以这样访问它:

myStringArray.forEach( (s,i) => {
   // ... do something with s and i ...
});

对于of不会为您提供与每个对象关联的索引,但只要您正在迭代的对象实际上是Array的实例(而不是..of的其他可迭代类型之一),您就可以使用Array#entries方法将其更改为[index,item]对的数组,然后对其进行迭代:

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

用于。。。在其他人提到的语法中,用于循环对象的财产;因为JavaScript中的Array只是一个具有数字属性名称(以及自动更新的长度属性)的对象,理论上可以用它循环Array。但问题是它并不局限于数字属性值(记住,即使是方法实际上也只是值为闭包的财产),也不能保证按数字顺序迭代。因此,对于。。。in语法不应用于循环数组。

我强烈建议使用Undercore.js库。它为您提供了可用于迭代数组/集合的各种函数。

例如:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

它不是100%相同,但相似:

var myStringArray=['Hello','World'];//数组使用[]而不是{}for(myStringArray中的var i){console.log(i+'->'+myStringArray[i]);//我是索引/键,而不是项目}

如果你想用一种简洁的方式写一个快速循环,你可以反过来迭代:

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.long;++i)),同时输入的字符更少。

甚至有些时候,您应该反向迭代,例如在实时NodeList上迭代时,您计划在迭代期间从DOM中删除项。

如果您正在使用jQuery库,请考虑使用http://api.jquery.com/jQuery.each/

根据文档:

jQuery.each(集合,回调(indexInArray,valueOfElement))返回:对象描述:一个泛型迭代器函数,可用于对对象和数组进行无缝迭代。数组和类数组具有长度属性的对象(例如函数的arguments对象)由数值索引从0到长度-1进行迭代。其他对象包括通过其命名的财产进行迭代。$.each()函数与$(selector).each(用于以独占方式对jQuery对象进行迭代。$.each()函数可以用于迭代任何集合,无论它是map(JavaScript对象)或数组。在数组的情况下回调被传递一个数组索引和一个相应的数组值时间(该值也可以通过this关键字访问,但是Javascript将始终将this值包装为Object,即使它是简单的字符串或数字值。)该方法返回其第一个参数,迭代的对象。

我还没有看到这种变化,我个人最喜欢这种变化:

给定一个数组:

var someArray = ["some", "example", "array"];

您可以在不访问长度属性的情况下对其进行循环:

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

请参阅本JsFidle演示:http://jsfiddle.net/prvzk/

这只适用于非稀疏阵列。这意味着数组中的每个索引实际上都有一个值。然而,我发现在实践中我几乎从未在JavaScript中使用过稀疏数组。。。在这种情况下,通常更容易将对象用作映射/哈希表。如果您有一个稀疏数组,并且希望在0上循环。。length-1,您需要for(vari=0;i<someArray.length;++i)构造,但仍需要在循环内使用if来检查当前索引处的元素是否已实际定义。

此外,正如CMS在下面的注释中所提到的,您只能在不包含任何错误值的数组上使用它。示例中的字符串数组是有效的,但如果您有空字符串或0或NaN等数字,则循环将提前中断。在实践中,这对我来说几乎从来都不是问题,但这是一件需要记住的事情,这使得在使用它之前,这是一个需要考虑的循环……这可能会使某些人失去资格:)

我喜欢这个循环的地方是:

写起来很短无需访问(更不用说缓存)长度属性要访问的项在循环中自动定义你选择的名字下的身体。与array.push和array.please非常自然地结合,使用列表/堆栈等数组

这种方法之所以有效,是因为数组规范规定,当您从索引中读取一个项>=数组长度时,它将返回undefined。当你写到这样的位置时,它实际上会更新长度。

对我来说,这个构造最接近于我喜欢的Java5语法:

for (String item : someArray) {
}

…还有一个额外的好处,那就是了解循环内的当前索引

var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

干净多了。。。

for(myStringArray的常量){

(直接回答你的问题:现在你可以了!)

大多数其他答案都是正确的,但他们没有提到(截至本文撰写之时)ECMAScript 6 2015正在为执行迭代带来一种新的机制。。循环的。

这种新语法是在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-用于。。第页,共页

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

}

优化的方法是缓存数组长度,并使用单变量模式,用一个var关键字初始化所有变量。

var i, max, myStringArray = ["Hello", "World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);

    // Do something
}

如果迭代的顺序无关紧要,那么您应该尝试反向循环。它是最快的,因为它减少了开销条件测试,并且减少了一个声明:

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

或者使用while循环更好更干净:

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // Do something with fruits[i]
}

最优雅快捷的方式

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8


编辑(因为我错了)


比较循环遍历100000个项目数组的方法,并每次使用新值执行最小操作。

http://jsben.ch/#/BQhED

准备工作:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };
        
        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

测验:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

嗯,这个怎么样:

for (var key in myStringArray) {
    console.log(myStringArray[key]);
}

JavaScript中有多种循环数组的方法。

通用循环:

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

每个ES5:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

查看此信息以获取详细信息,或者您也可以检查MDN是否在JavaScript中循环遍历数组,并使用jQuery检查每个数组的jQuery。

例如,我在Firefox控制台中使用了:

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

您可以使用querySelectorAll获得相同的结果

document.querySelectorAll('pre').forEach((e)=>{console.log(e.textContent);})<pre>文本1</pre><pre>文本2</pre><pre>文本3</pre>

当然,这是低效的,很多人都鄙视它,但它是最接近上述的一种:

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

介绍

从大学时代开始,我就用Java、JavaScript、Pascal、ABAP、PHP、Progress 4GL、C/C++以及其他一些我现在想不出来的语言编程。

虽然它们都有自己的语言特点,但每种语言都有许多相同的基本概念。这些概念包括过程/函数、IF语句、FOR循环和WHILE循环。


传统的for循环

传统的for循环有三个组成部分:

初始化:在第一次执行look块之前执行条件:每次执行循环块之前检查一个条件,如果为false,则退出循环事后思考:每次执行循环块后执行

这三个组件通过一个;象征这三个组件中每一个的内容都是可选的,这意味着以下内容是可能的最小循环:

for (;;) {
    // Do stuff
}

当然,您需要在for循环中的某处包含if(条件==true){break;}或if(条件===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循环一样,即使是最古老的浏览器也支持循环。

此外,请注意,everywhile循环可以重写为for循环。例如,上面的while循环的行为与For循环完全相同:

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

对于为。。。属于

在JavaScript中,您也可以这样做:

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

然而,这应该谨慎使用,因为它在所有情况下的行为都与传统的for循环不同,并且需要考虑潜在的副作用。请参见为什么对数组迭代使用“for…in”是一个坏主意?了解更多详情。

作为…的替代方案。。。在,现在还有。。。属于以下示例显示了for。。。的循环和for。。。循环中:

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支持。。。(边缘12+有)和。。。中至少需要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(),在Undercore.js中:

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

_.forEach(),在Lodash中:

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

简短回答:是的。你可以这样做:

var myArray = ["element1", "element2", "element3", "element4"];

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

在浏览器控制台中,您可以看到打印的“element1”、“element2”等内容。

如果您想使用jQuery,它的文档中有一个很好的示例:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

最好使用顺序for循环:

for (var i = 0; i < myStringArray.length; i++) {
    // Do something
}

有几种方法可以在JavaScript中实现。前两个示例是JavaScript示例。第三个使用JavaScript库,即jQuery使用.each()函数。

var myStringArray=[“hello”,“World”];for(myStringArray中的var i){alert(myStringArray[i]);}

var myStringArray=[“hello”,“World”];for(var i=0;i<myStringArray.length;i++){alert(myStringArray[i]);}

var myStringArray=[“hello”,“World”];$.each(myStringArray,函数(索引,值){警报(值);})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script>

var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
   console.log(val, index);
})
var obj = ["one","two","three"];

for(x in obj){
    console.log(obj[x]);
}

阵列循环:

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

对象循环:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

在JavaScript中,有很多方法可以循环数组。

下面的代码是流行的代码

/**声明输入*/const items=['你好','世界']/**解决方案1。简单适用于*/console.log(解决方案1。简单用于')for(设i=0;i<items.length;i++){console.log(项[i])}console.log()console.log()/**解决方案2。简单的while*/console.log(解决方案2。简单while')设i=0而(i<items.length){console.log(项[i++])}console.log()console.log()/**解决方案3。对于每个*/console.log(解决方案3。“每个”)items.forEach(item=>{console.log(项)})console.log()console.log()/**解决方案4。的*/console.log(解决方案4。对于')for(常量项,共项){console.log(项)}console.log()console.log()

我认为最好的方法是使用Array.forEach函数。如果你不能使用,我建议从MDN获得polyfill。为了使其可用,在JavaScript中迭代数组当然是最安全的方法。

Array.prototype.forEach()

正如其他人所建议的,这几乎总是你想要的:

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

这样可以确保在处理数组的范围内所需的任何内容都保持在该范围内,并且您只处理数组的值,而不处理对象财产和其他成员,这是为了。。在中。

在大多数情况下,对循环使用常规的C样式。只需记住,循环中的所有内容都与程序的其他部分共享其作用域,{}不会创建新的作用域。

因此:

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

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

alert(i);

将输出“11”-这可能是或可能不是您想要的。

jsFiddle示例:https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

是的,您可以使用循环在JavaScript中执行同样的操作,但不限于此。在JavaScript中有很多方法可以对数组进行循环。假设下面有一个数组,您想对其进行循环:

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

以下是解决方案:

1) For循环

for循环是JavaScript中循环数组的常见方式,但它不被认为是大型数组的最快解决方案:

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

2) While循环

while循环被认为是循环长数组的最快方式,但在JavaScript代码中通常很少使用:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) 做的同时do-while与while执行相同的操作,但语法差异如下:

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

这些是实现JavaScript循环的主要方法,但还有其他几种方法可以实现。

此外,我们还使用for in循环对JavaScript中的对象进行循环。

还可以查看JavaScript中Array上的map()、filter()、reduce()等函数。他们做事情可能比使用while和for更快、更好。

如果您想进一步了解JavaScript中的异步函数和数组,这是一篇很好的文章。

函数式编程在当今世界的发展。有充分的理由:功能性技术可以帮助您编写更容易编写的声明性代码一目了然地理解、重构和测试。函数式编程的基石之一是它的特殊用途列表和列表操作。这些东西正是听起来就像是:一系列的东西,以及你对它们做的事情。但功能思维方式对待他们的方式与你有点不同可能会想到。本文将详细介绍我喜欢称之为“大三个“列表操作:map、filter和reduce围绕这三个功能是实现编写干净的功能代码功能和反应式编程的强大技术。这也意味着你再也不用编写for循环了。

阅读更多>>此处:

似乎列出了所有变体,除了lodash的Each:

_.forEach([1, 2], (value) => {
  console.log(value);
});

简单的单线解决方案:

arr=[“桌子”,“椅子”];//解决方案arr.map((e)=>{控制台日志(e);返回e;});

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

1.只需循环遍历数组

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

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

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

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.转换为新阵列

const myArray = [{x:100}, {x:200}, {x:300}];

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

注意:map()方法使用对调用数组中的每个元素调用所提供函数的结果创建一个新数组。

4.总结某一特定属性,并计算其平均值

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5.基于原始数组创建新数组,但不进行修改

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6.统计每个类别的数量

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7.基于特定条件检索数组的子集

const myArray = [{x:100}, {x:200}, {x:300}];

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

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

8.对数组进行排序

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9.在数组中查找元素

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

方法返回数组中满足所提供测试函数的第一个元素的值。

工具书类

Array.prototype.some()Array.prototype.forEach()Array.prototype.map()Array.prototype.filter()Array.prototype.sort()Spread语法Array.prototype.find()

如果有人对Array迭代可用的多种机制的性能方面感兴趣,我准备了以下JSPerf测试:

https://jsperf.com/fastest-array-iterator

结果:

传统的for()迭代器是迄今为止最快的方法,尤其是在缓存数组长度时。

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

for(let i=0, size=arr.length; i<size; i++){
    // Do something
}

Array.prototype.forEach()和Array.prototype.map()方法是最慢的近似方法,可能是函数调用开销的结果。

var array=['hai','hello','how','are','you']$(文档).ready(函数(){$('#clickButton').click(函数(){对于(var i=0;i<array.length;i++){警报(阵列[i])}})})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js“></script><input id=“clickButton”value=“click Me”type=“button”/><div id=“show”></div>

正式的(也许是旧的)方式是Array.protocol.forEach(…):

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach(function(item, index, _) {
   console.log("[" + index + "] = '" + item + "'");
});

深奥的

让a=[“你好”,“世界”];while(a.length){console.log(a.shift());}

性能测试

今天(2022-11-13),我在Chrome 107、Safari 15.2和Firefox 106上对选定的解决方案进行了测试。

结论

解决方案C和D在所有阵列的所有浏览器上都是快速或最快的。解决方案A和B在所有阵列的所有浏览器上都是最慢的

后果

细节

我执行3项测试:

small-用于2元素数组(如OP)-可以在此处运行中等-用于10K元素阵列-您可以在这里运行大-对于100K元素数组-您可以在这里运行

下面的代码段显示了测试中使用的代码。

函数A(A){设r=0;而(a.length)r+=a.shift().length;返回r;}函数B(a){设r=0;对于(i in a)r+=a[i]长度;返回r;}函数C(a){设r=0;对于(a的x)r+=x.length;返回r;}函数D(a){设r=0;对于(i=0;i<a.length;++i)r+=a[i].length;返回r;}函数E(a){设r=0;a.对于每个(x=>r+=x.length);返回r;}let arr=[“你好”,“世界!”];[A,B,C,D,E].forEach(f=>console.log(`${f.name}:${f([…arr])}`))

以下是Chrome对于中等阵列的示例结果:

JavaScript中的数组遍历作弊表

给定一个数组,可以通过以下多种方式之一遍历它。

1.经典for loop

const myArray=['Hello','World'];for(设i=0;i<myArray.length;i++){console.log(myArray[i]);}

2.用于。。。属于

const myArray=['Hello','World'];for(myArray的常量项){console.log(项);}

3.Array.prototype.forEach()

const myArray=['Hello','World'];myArray.forEach(项=>{console.log(项);});

4.while循环

const myArray=['Hello','World'];设i=0;while(i<myArray.length){console.log(myArray[i]);i++;}

5.do…while循环

const myArray=['Hello','World'];设i=0;做{console.log(myArray[i]);i++;}而(i<myArray.length);

6.队列样式

const myArray=['Hello','World'];while(myArray.length){console.log(myArray.shift());}

7.堆栈样式

注:该列表在本页中以相反的方式打印。const myArray=['Hello','World'];while(myArray.length){console.log(myArray.pop());}

//Make array
var array = ["1","2","3","4","5","6","7","8","9","10"]
//Loop
for(var i = 0; i < array.length; i++){
 console.log((i+1) + " --> " + array[i])
}

对于i的实际值,如果需要,需要将(i+1)更改为i或(i)。希望这有所帮助。

6种不同的方法循环遍历阵列

可以通过许多不同的方法循环遍历数组。我从上到下整理了我最喜欢的6种方法。

1.使用for循环

当它只是在数组中循环时,for循环是我的首选。

让数组=[1,2,3,4,5];for(设i=0;i<array.length;i++){console.log(array[i]);}

2.使用forEach循环

forEach循环是一种在数组中循环的现代方式。此外,它还提供了对阵列和元素的更多灵活性和控制。

让数组=[1,2,3,4,5];array.forEach((元素)=>{console.log(元素);});

3.用于。。。属于

对于of循环允许您直接访问数组元素。

让数组=[1,2,3,4,5];for(数组的let元素){console.log(元素);}

4.用于。。。在回路中

对于中提供了一个键,您可以使用该键访问数组元素。

让数组=[1,2,3,4,5];for(数组中的let索引){console.log(array[index]);}

5.使用while循环

而loop也可以用于循环通过阵列。

让数组=[1,2,3,4,5];let length=array.length;而(长度>0){console.log(array[array.length-length]);长度--;}

6.使用do…while循环

同样,我使用do…while循环

让数组=[1,2,3,4,5];let length=array.length;做{console.log(array[array.length-length]);长度--;}而(长度>0)

阵列迭代有4种方式:

// 1: for

for (let i = 0; i < arr.length; ++i) {
  console.log(arr[i]);
}

// 2: forEach

arr.forEach((v, i) => console.log(v));

// 3: for in

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

// 4: for of

for (const v of arr) {
  console.log(v);
}

总结:1和3个解决方案创建额外的变量,2-创建额外的函数上下文。最好的方式是第四位-“for of”。

考虑一下:

const ITEMS = ['One','Two','Three']
let item=-1

//Then, you get looping with every call of:

ITEMS[item=item==ITEMS.length-1?0:item+1]

有多种方法可以在javascript中实现。下面是处理数组的常用方法。

方法1:

const students = ["Arun","Jos","John","Kiran"]
for (var index = 0; index < students.length; index++) {
  console.log(students[index]);
}

方法2:

students.forEach((学生,索引)=>console.log(学生));

方法3:

for (const student of students) {
      console.log(student);
}
  

这个答案为循环和数组函数提供了一种替代方法,以遍历数组。

在某些情况下,在常规循环和回调上使用递归实现是有意义的。特别是,如果必须使用多个数组或嵌套数组。避免编写嵌套循环来访问多个数组中的数据。我还发现这段代码更容易读写。

/**
  array is the array your wish to iterate. 
  response is what you want to return.
  index increments each time the function calls itself.
**/

const iterateArray = (array = [], response = [], index = 0) => {
    const data = array[index]

    // If this condition is met. The function returns and stops calling itself.
    if (!data) {
      return response
    }
    // Do work...
    response.push("String 1")
    response.push("String 2")

    // Do more work...

    // THE FUNCTION CALLS ITSELF
    iterateArray(data, response, index+=1)
}

const mainFunction = () => {
    const text = ["qwerty", "poiuyt", "zxcvb"]

    // Call the recursive function
    const finalText = iterateArray(text)
    console.log("Final Text: ", finalText()
}

假设传递给iterateArray的数组包含对象而不是字符串。每个对象中都包含另一个数组。您必须运行嵌套循环才能访问内部数组,但如果递归迭代,则不必如此。

您还可以将iterateArray设置为Promise。

const iterateArray = (array = [], response = []) =>
  new Promise(async (resolve, reject) => {
    const data = array.shift()
    // If this condition is met, the function returns and stops calling itself.
    if (!data) {
      return resolve(response)
    }

    // Do work here...

    const apiRequestData = data.innerArray.find((item) => {
      item.id === data.sub_id
    })

    if (apiRequestData) {
      try {
        const axiosResponse = await axios.post(
          "http://example.com",
          apiRequestData
        )
        if (axiosResponse.status === 200) {
          response.push(apiRequestData)
        } else {
          return reject("Data not found")
        }
      } catch (error) {
        reject(error)
      }
    } else {
      return reject("Data not found")
    }
    // THE FUNCTION RESOLVES AND CALLS ITSELF
    resolve(iterateArray(data, response))
  })