提问



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


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


你能用JavaScript做同样的事吗?

最佳参考


使用顺序for循环:


var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}


@zipcodeman建议使用for...in语句,但是对于迭代数组for-in应该避免,该语句意味着枚举对象属性。


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



  • 无法保证迭代的顺序,可能无法按数字顺序访问数组索引。

  • 还枚举了继承的属性。



第二点是它可以给你很多问题,例如,如果你扩展Array.prototype对象以包含一个方法,那么该属性也将被枚举。


例如:


Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(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)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}


在上面的示例中,hasOwnProperty方法允许您仅枚举自己的属性,即它,只有对象物理上具有的属性,没有继承的属性。


我建议你阅读以下文章:



  • 枚举VS迭代


其它参考1


是的,但前提是您的实施包括ECMAScript 2015中引入的for ... of功能(和谐版本)。[165] [166]


它的工作原理如下:


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


或者更好,因为ECMAScript 2015还通过letconst提供了块范围的变量:


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


许多JavaScript开发人员仍然在一个尚未出现的环境中工作 - 特别是如果编写代码以在Web浏览器中运行,那么网站开发人员通常无法确定他们的客户将使用哪种浏览器/版本。


如果您可以假设JavaScript解释器符合ECMAScript规范的以前的版本(例如,排除了9之前的Internet Explorer版本),那么您可以使用forEach迭代器方法而不是循环。在这种情况下,您传递一个要在数组中的每个项目上调用的函数:


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


但是,如果即使这样做太多了,而且你想要在所有版本的JavaScript中运行的东西,那么你必须使用一个显式的计数循环。最安全的版本,正确处理稀疏数组,如下所示:


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表达式相反)可以在性能上产生显着差异,因为它每次都跳过属性查找;在我的机器上使用Rhino,加速比为43%。


您将经常在循环初始化子句中看到完成的长度缓存,如下所示:


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


其他人提到的for ... in语法用于循环对象的属性;因为JavaScript中的数组只是一个具有数字属性名称的对象(并且自动更新length]]属性),你理论上可以用它循环一个数组。但问题是它并不局限于数值属性值(请记住,即使方法实际上只是其值为闭包的属性),也不是以数字顺序迭代那些。因此,for ... in语法应该不用于循环遍历数组。

其它参考2


您可以使用map,这是一种函数式编程技术,也可以在Python和Haskell等其他语言中使用。[167] [168]


[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

其它参考3


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


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


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

其它参考4


for(var s of myStringArray){



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


大多数其他答案是正确的,但他们没有提及(截至撰写本文时) ECMA脚本<罢工>  6  2015 带来了新的进行迭代的机制, for..of 循环。


这种新语法是在javascript中迭代数组的最优雅方式(只要你不需要迭代索引),但它还没有被浏览器广泛支持。


它目前适用于Firefox 13 +,Chrome 37+,它本身不能与其他浏览器一起使用(请参阅下面的浏览器兼容性)。幸运的是,我们有JS编译器(如Babel),它们允许我们今天使用下一代功能。[170]


它也适用于Node(我在版本0.12.0上测试过它)。


迭代数组


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


迭代一组对象


var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}


迭代生成器:


(例如摘自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) [171]


function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}





兼容性表:
http://kangax.github.io/es5-compat-table/es6/#For..of循环[172]


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


}


其它参考5


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


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


Mozilla Labs发布了他们和WebKit都使用的算法,因此您可以自己添加它们。[174]


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


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


如果有任何通过测试, some 会返回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;
})();

其它参考6


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


日志:一个,两个,三个


参考:
http://www.sitepoint.com/google-closure-how-not-to-write-javascript/[175]

其它参考7


简介



自从我上大学以来,我已经编写了Java,JavaScript,Pascal,ABAP,PHP,Progress 4GL,C/C ++以及其他一些我现在无法想到的语言。[176]


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





传统的for - 循环



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



  1. 初始化:在第一次执行外观块之前执行

  2. 条件:每次执行循环块之前检查一个条件,如果为false则退出循环

  3. 每次执行循环块后都会执行



这三个分量通过;符号彼此分开。这三个组件中的每一个的内容都是可选的,这意味着以下是可能的最小for循环:


for (;;) {
    // Do stuff
}


当然,你需要在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);
}


无论哪种效果最好,主要是个人品味和您正在实施的具体用例。


请注意,所有浏览器都支持这些变体,包括非常旧的浏览器!





A 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);
}





For...infor...of



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


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


但是,这应该谨慎使用,因为它在所有情况下都不会像传统的for循环一样,并且有潜在的副作用需要考虑。参见为什么使用for ... inwith array iteration一个坏主意?了解更多细节。


作为 for...in 的替代方法,现在还有 for...of 。以下示例显示了for...of循环之间的区别和for...in循环:[178] [179]


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。[180]]]





Array.prototype.forEach()



for - 循环的替代方法是 Array.prototype.forEach() ,它使用以下语法:[181]


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


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







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


jQuery.each() ,在 jQuery 中:[182] [183]​​]]


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


_.each() ,在 Underscore.js 中:[184] [185]


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


_.forEach() ,在 Lodash.js :[186] [187]


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

其它参考8


如果您想要一种简洁的方法来编写快速循环和,您可以反向迭代:


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中删除项目。[188]

其它参考9


有一种方法可以在循环中具有非常小的隐式范围并且消除额外的变量。


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
}


现代浏览器都支持迭代器方法forEachmapreducefilter以及Array原型上的许多其他方法。 [189]

其它参考10


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


通用循环:


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


ES5forEach:


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。 [191] [192]

其它参考11


我完全建议使用underscore.js库。它为您提供了各种可用于迭代数组/集合的函数。[193]


例如:


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

其它参考12


数组循环:


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);
}

其它参考13


是的,您可以在JavaScript中使用循环执行相同的操作,但不限于此,在JavaScrip中循环遍历数组的许多方法,假设您在下面有这个数组,并且您想对它进行循环:


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


这些是解决方案:


1)For loop


For循环是在JavaScript中循环遍历数组的常用方法,但不被认为是大型数组的最快解决方案:


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


2)while loop


虽然循环被认为是循环遍历长数组的最快方法,但通常在JavaScript中使用较少:


let i=0;

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


3)同时

做同样的事情同时具有一些语法差异如下:


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


这些是进行javascript循环的主要方法,但还有更多方法可以做到这一点。


我们还使用for in循环来循环javascript中的对象。


另请参阅JavaScript中的Array上的map()filter()reduce()等函数。他们可以比使用whilefor更快更好地做事。


如果您想了解有关JavaScript中数组的异步函数的更多信息,这是一篇很好的文章。



  功能编程已经引起了人们的极大关注
  发展世界这些天。并且有充分的理由:功能性
  技术可以帮助您编写更容易的声明性代码
  一目了然,重构和测试。

  
  函数式编程的基石之一是它的特殊用途
  列表和列表操作。那些东西正是如此
  听起来像是:事物的数组,以及你对它们所做的事情。
  但功能性思维对待它们的方式与你有所不同
  可能会期待。

  
  本文将仔细研究我所谓的大
  三个列表操作:映射,过滤和减少。包裹你的头脑
  围绕这三个功能是迈向能力的重要一步
  编写干净的功能代码,并打开大门
  强大的功能和反应式编程技术。

  
  这也意味着你永远不必再写一个for循环。



阅读更多>>这里:[194]

其它参考14


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


从文档:



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

  
  退货: 对象

  
  描述: 一个通用的迭代器函数,可用于
  无缝迭代对象和数组。数组和数组一样
  具有length属性的对象(例如函数的参数对象)
  由数字索引迭代,从0到length-1。其他对象是
  通过其命名属性进行迭代。

  
  $.each()函数与$(selector).each()不同,即$.each()
  用于独占迭代jQuery对象。 $.each()
  函数可用于迭代任何集合,无论它是否为
  map(JavaScript对象)或数组。在数组的情况下,
  回调是传递一个数组索引和相应的数组值
  时间。 (也可以通过this关键字访问该值,但是
  Javascript将始终将this值包装为Object,即使它是
  一个简单的字符串或数字值。)该方法首先返回它
  参数,迭代的对象。


其它参考15


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


给定一个数组:


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


您可以在不访问length属性的情况下遍历它:


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);
}


看到这个JsFiddle证明:http://jsfiddle.net/prvzk/[186]


这仅适用于不稀疏的数组。这意味着数组中的每个索引实际上都有一个值。但是,我发现在实践中我几乎没有在Javascript中使用稀疏数组......在这种情况下,使用对象作为map/hashtable通常要容易得多。如果你有一个稀疏数组,并且想要循环超过0 .. length-1,你需要for(var i=0; i< someArray.length; ++ i)构造,但是你仍然需要在循环中使用if来检查当前索引处的元素是否实际定义。


另外,正如CMS在下面的注释中提到的那样,你只能在不包含任何伪造值的数组上使用它。示例中的字符串数组有效,但如果你有空字符串,或者数字是0或NaN,循环会过早地中断。再次在实践中这对我来说几乎不是问题,但是要记住这一点,这使得在使用它之前需要考虑这个循环...这可能会使它失去资格有些人 :)


我喜欢这个循环是:



  • 写短文

  • 无需访问(更不用说缓存)长度属性

  • 要在环路中自动定义要访问的项目
    你选择的名字下的身体。

  • 与array.push和array.splice非常自然地结合使用像列表/堆栈这样的数组



这样做的原因是数组规范要求当你从索引> =数组的长度读取一个项目时,它将返回undefined。当你写入这样的位置时,它实际上会更新长度。


对我来说,这个结构最接近地模仿我喜欢的Java 5语法:


for (String item : someArray) {
}


...还有了解循环内当前索引的额外好处

其它参考16


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




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



最优雅,最快捷的方式



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


http://jsperf.com/native-loop-performance/8[197]





编辑(因为我错了)






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



  • http://jsben.ch/#/BQhED



制备 [198]


<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>

其它参考17


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


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)es5shimes5shim

其它参考18


一些用例在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);


[199]


参考




  • Array.prototype.some()

  • Array.prototype.forEach()

  • Array.prototype.map()

  • Array.prototype.filter()

  • Array.prototype.sort()

  • 传播语法


其它参考19


优化的方法是缓存数组的长度,并使用单个var模式使用单个var关键字初始化所有变量。[200] [201] [202] [203] [204] [205]


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


循环使用时更好更清除:


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

其它参考20


在JavaScript中,循环数组有很多解决方案。


下面的代码很受欢迎




/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

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

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()



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


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

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


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

其它参考21


我认为最好的方法是使用Array.forEach函数。如果您不能使用我建议从MDN获取polyfill使我可用,它肯定是在JavaScript中迭代数组的最安全的方法。


https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach[206]


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


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


这样可以确保在处理数组范围内所需的任何内容都保留在该范围内,并且您只处理数组的值,而不是对象属性和其他成员,这就是.. in。


在大多数情况下使用常规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/[207]

其它参考22


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


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

其它参考23


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


很清除......

其它参考24


当然它效率低下并且很多人鄙视它,但它是最接近上述之一的:


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

其它参考25


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


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

其它参考26


那么,这个怎么样:


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

其它参考27


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