如何循环使用JavaScript数组？ [英] How to loop over an Array with JavaScript?

问题描述

我有了用管道字符分隔数据的字符串（ | ）。

示例

  VAR somestring =数据1 |数据2 |数据3;
VAR分离= somestring.split（|）;
 

我知道如何使用拆分（）来的每个数据分开。

不过，我不知道有多少管道会出现在结果阵列。

在的jQuery或JavaScript，我怎么循环阵列上回来了？

解决方案

  

在的jQuery或JavaScript，我怎么循环通过每个分离变量？

您基本上只需要遍历结果阵列。

的jQuery

$。每个循环

这方法是很容易的工作，并在变量用过的好处被封装。

  $。每个（分离，功能（索引块）{
    //`chunk`是阵列中的每个成员。
}）;
 

的jsfiddle 。

当然，jQuery的的是的JavaScript的，所以任何的下面方法也将正常工作。

的JavaScript

为循环

这是推荐的方式。

 为（VAR I = 0，长度= separated.length; I＆LT;长度;我++）{
    VAR块=分离[I]
    //`chunk`是阵列中的每个成员。
}
 

的jsfiddle 。

您会注意到太长度属性缓存，因此它不抬头在每次迭代。 <一href=\"http://stackoverflow.com/questions/5752906/is-reading-the-length-property-of-an-array-really-that-expensive-an-operation-i/5752991#comment-6587899\">Some浏览器已经优化这一，但是IE似乎仍然从中受益缓存。只需要5秒钟做的，所以你不妨保持IE用户也很开心。

您可能需要定义 I 和块的为循环，因为JavaScript有没有块范围（除非你使用让），而这些变量将之前（声明悬挂）后（没有块范围存在）。

为（以）循环

一般不推荐这个循环，因为它应该用于遍历对象的属性而已，并不像阵成员属性。

 对（在分离VAR块）{
     如果（！separated.hasOwnProperty（块））{
         继续;
     }
     //`分离[块]`是数组中的每个成员。
}
 

的jsfiddle 。

这个循环将遍历所有属性检查原型链，使的hasOwnProperty（）必须使用。出于这个原因，不建议对数组。

为（的）循环

这个循环在ECMA标准6，能够遍历节点列表和迭代器。

 的（经分离的VAR块）{
     //`chunk`是阵列中的每个成员。
}
 

的jsfiddle

的forEach（）方法

这方法是除了ECMA-262标准。这不是在IE8中使用，但它可以是<一个href=\"https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach#Compatibility\"相对=nofollow>匀相对容易。

  separated.forEach（功能（块，指数）{
     //`chunk`是阵列中的每个成员。
}）;
 

的jsfiddle 。

其他专业方法

如果你正在寻找遍历一个具体的目标，它可能是使用专门的迭代器有用。请记住，这些还没有最好的浏览器的支持。

过滤器方法

创建了关联的回调返回元素的数组水电部的 truthy 的进行。

  separated.filter（函数（元素）{
    返回+组件＆gt; 255;
}）;
 

减少方法

创建基于减少的数组的元素，从左到右一个新的值。

  separated.reduce（功能（蓄电池，元素）{
    返回accumulator.concat（元）;
}，）;
 

又见<一个href=\"https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight\"相对=nofollow> reduceRight 方法。

地图方法

创建一个新数组，与相关的回调的返回值替换每个元素。

  separated.map（函数（元素）{
    返回element.substr（0，1）;
}）;
 

每个方法

返回一个布尔值，它是通过测试数组中的每个元素的结果。这种方法短路，即它返回每当一个元素的回调不返回的 truthy 的

  separated.every（函数（元素）{
    返回element.substr（0，1）==一个;
}）;
 

部分方法

返回一个布尔值，它是通过测试的数组中某些元素的结果。这种方法短路，即它，每当一个元素的回调通过测试返回。

  separated.some（函数（元素）{
    返回element.substr（0，1）==一个;
}）;
 

I have a string that has data separated by a pipe character (|).

Example

var somestring = "data1|data2|data3";
var separated = somestring.split("|");

I know how to use the split() to separate each data.

However, I don't know how many pipes there will be in the resulting Array.

In jQuery or JavaScript, how do I loop over the array returned?

解决方案

In jQuery or JavaScript, how do I loop through each separated variable?

You basically just need to iterate over the resulting Array.

jQuery

$.each loop

This method is easy to work with, and benefits in the variables used being encapsulated.

$.each(separated, function(index, chunk) {
    // `chunk` is each member of the array.
});

jsFiddle.

Of course, jQuery is JavaScript so any of the below methods will also work.

JavaScript

for loop

This is the recommended way.

for (var i = 0, length = separated.length; i < length; i++) {
    var chunk = separated[i];
    // `chunk` is each member of the array.
}

jsFiddle.

You'll notice too the length property is cached so it is not looked up on each iteration. Some browsers already optimise for this, however IE appears to still benefit from it cached. It only takes 5 seconds to do, so you may as well keep IE users happy too.

You may want to define i and chunk outside of the for loop, because JavaScript has no block scope (unless you're using let), and those variables will exist before (declaration hoisted) and after (no block scope).

for ( in ) loop

This loop is generally not recommended, as it should be used for iterating over object properties only, not array like member properties.

for (var chunk in separated) {
     if ( ! separated.hasOwnProperty(chunk)) {
         continue;
     }
     // `separated[chunk]` is each member of the array.   
}

jsFiddle.

This loop will loop over all properties up the prototype chain, so hasOwnProperty() must be used. For this reason it is not recommended for arrays.

for ( of ) loop

This loop is standardized in ECMA 6 and is able to loop over NodeLists and iterators.

for (var chunk of separated) {
     // `chunk` is each member of the array.   
}

jsFiddle

forEach() method

This method is an addition to the ECMA-262 standard. It's not available in IE8, but it can be shimmed relatively easily.

separated.forEach(function(chunk, index) {
     // `chunk` is each member of the array.   
});

jsFiddle.

Other specialised methods

If you're looking to iterate for a specific goal, it may be useful to use a specialised iterator. Keep in mind these also don't have the best browser support.

filter method

Creates a mew array of the elements which the associated callback returned truthy for.

separated.filter(function(element) {
    return +element > 255;
});

reduce method

Creates a new value based on reducing the elements of the array, from left to right.

separated.reduce(function(accumulator, element) {
    return accumulator.concat(element);
}, "");

See also the reduceRight method.

map method

Creates a new array, replacing each element with the returned value of the associated callback.

separated.map(function(element) {
    return element.substr(0, 1);
});

every method

Returns a boolean value of which is the result of every element in the array passing the test. This method short circuits, i.e. it returns whenever one element's callback doesn't return truthy.

separated.every(function(element) {
    return element.substr(0, 1) == "a";
});

some method

Returns a boolean value of which is the result of some element in the array passing the test. This method short circuits, i.e. it returns whenever one element's callback passes the test.

separated.some(function(element) {
    return element.substr(0, 1) == "a";
});

这篇关于如何循环使用JavaScript数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！