遍历JavaScript中的数组

JavaScript

达蒙武藏

2020-03-09

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

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

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

第157篇《遍历JavaScript中的数组》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

16个回答
Pro番长 2020.03.09

您可以使用Array.prototype.forEach(...)

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
   //Some code...
});

Array.prototype.map(...)

var arr = ["apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
   //Some code...
});

或前面提到的jquery或for循环方式。

猪猪JinJin西里 2020.03.09

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

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

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

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

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

干净很多...

阿飞Pro 2020.03.09

如果要使用jQuery,它在其文档中有一个很好的示例:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });
Tony伽罗米亚 2020.03.09

优化的方法是缓存数组的长度,并使用单个var模式通过单个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]
}
Tom老丝Pro 2020.03.09

我认为最好的方法是使用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;
});

这样可以确保在处理数组的范围内所需的任何内容都在该范围内,并且仅在处理数组的值,而不在处理对象属性和其他成员,这是for ..在做的事情

使用常规C风格 for在大多数情况下,循环即可。重要的是要记住,循环中的所有内容都与程序的其余部分共享其作用域,{}不会创建新的作用域。

因此:

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/

Itachi凯 2020.03.09

最优雅,最快捷的方式

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

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


编辑(因为我错了)


比较用于遍历100000个项目的数组的方法,并每次使用新值进行最少的操作。

制备:

<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>
樱猪猪 2020.03.09

在JavaScript中有两种方法可以做到这一点。前两个示例是JavaScript示例。第三个使用JavaScript库,即jQuery使用该.each()函数。

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

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

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

小宇宙Near 2020.03.09

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

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.forEaches5shim要使用。

猿伽罗 2020.03.09

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

从文档中:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

返回: 对象

说明: 通用迭代器函数,可用于无缝迭代对象和数组。具有长度属性的数组和类似数组的对象(例如函数的arguments对象)通过从0到length-1的数字索引进行迭代。其他对象通过其命名属性进行迭代。

$.each()函数与$(selector).each(),专门用于在jQuery对象上进行迭代的函数不同。$.each() 函数可用于遍历任何集合,无论它是映射(JavaScript对象)还是数组。对于数组,每次回调都会传递一个数组索引和一个对应的数组值。(也可以通过this关键字访问该值,但是即使它是简单的字符串或数字值,Javascript也会始终将其包装this为一个Object整数。)该方法返回其第一个参数,即被迭代的对象。

木心 2020.03.09

我会彻底建议您使用underscore.js库。它为您提供了各种功能,可用于遍历数组/集合。

例如:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...
宝儿猪猪西门 2020.03.09

数组循环:

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);
}
Harry小宇宙 2020.03.09

有多种方法可以遍历JavaScript中的数组。

通用循环:

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

ES5的forEach:

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

null 2020.03.09

如果您想用一种简洁的方式编写一个快速循环可以反向进行迭代:

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)),同时更少的字符键入。

有时甚至需要反向迭代,例如在活动的NodeList迭代时,您计划在迭代过程中从DOM中删除项目。

不知 2020.03.09

在JavaScript中,不建议使用for-in循环遍历数组,但最好使用如下for循环:

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

它还进行了优化(“缓存”阵列长度)。如果您想了解更多信息,请阅读我关于该主题的文章

Eva阿飞 2020.03.09

您可以使用map,这是一种功能编程技术,在其他语言(例如PythonHaskell)中也可以使用

[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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android