[英]How to loop over an Array with JavaScript?
I have a string that has data separated by a pipe character ( |
).我有一个字符串,其数据由 pipe 字符(
|
)分隔。
var somestring = "data1|data2|data3";
var separated = somestring.split("|");
I know how to use the split()
to separate each data.我知道如何使用
split()
来分隔每个数据。
However, I don't know how many pipes there will be in the resulting Array
.但是,我不知道生成的
Array
中有多少管道。
In jQuery or JavaScript, how do I loop over the array returned?在 jQuery 或 JavaScript 中,如何遍历返回的数组?
In jQuery or JavaScript, how do I loop through each separated variable?
在 jQuery 或 JavaScript 中,如何循环遍历每个单独的变量?
You basically just need to iterate over the resulting Array
.您基本上只需要遍历生成的
Array
。
$.each
loop $.each
循环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.
});
Of course, jQuery is JavaScript so any of the below methods will also work.当然,jQuery是JavaScript,因此以下任何一种方法也可以使用。
for
loop for
循环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.
}
You'll notice too the length
property is cached so it is not looked up on each iteration.您也会注意到
length
属性已被缓存,因此不会在每次迭代中查找它。 Some browsers already optimise for this , however IE appears to still benefit from it cached. 一些浏览器已经对此进行了优化,但是 IE 似乎仍然可以从缓存中受益。 It only takes 5 seconds to do, so you may as well keep IE users happy too.
只需 5 秒即可完成,因此您也可以让 IE 用户满意。
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
循环之外定义i
和chunk
,因为 JavaScript 没有块 scope (除非您使用let
),并且这些变量将存在于(提升声明)和之后(无块范围)。
for ( in )
loop for ( in )
循环This loop is generally not recommended, as it should be used for iterating over object properties only, not array like member properties.通常不建议使用此循环,因为它应该仅用于迭代 object 属性,而不是类似数组的成员属性。
for (var chunk in separated) {
if ( ! separated.hasOwnProperty(chunk)) {
continue;
}
// `separated[chunk]` is each member of the array.
}
This loop will loop over all properties up the prototype chain, so hasOwnProperty()
must be used.此循环将遍历原型链上的所有属性,因此必须使用
hasOwnProperty()
。 For this reason it is not recommended for arrays.因此,不推荐用于 arrays。
for ( of )
loop for ( of )
循环This loop is standardized in ECMA 6 and is able to loop over NodeList
s and iterators.这个循环在 ECMA 6 中是标准化的,并且能够循环
NodeList
和迭代器。
for (var chunk of separated) {
// `chunk` is each member of the array.
}
forEach()
method forEach()
方法This method is an addition to the ECMA-262 standard.此方法是对 ECMA-262 标准的补充。 It's not available in IE8, but it can be shimmed relatively easily.
它在 IE8 中不可用,但可以相对容易地填充。
separated.forEach(function(chunk, index) {
// `chunk` is each member of the array.
});
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 filter
法Creates a mew array of the elements which the associated callback returned truthy for.创建一个新的元素数组,关联的回调为其返回真值。
separated.filter(function(element) {
return +element > 255;
});
reduce
method reduce
方法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.另请参见
reduceRight
方法。
map
method map
方法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 every
方法Returns a boolean value of which is the result of every element in the array passing the test.返回一个 boolean 值,该值是数组中每个元素通过测试的结果。 This method short circuits, ie it returns whenever one element's callback doesn't return truthy .
此方法短路,即只要一个元素的回调没有返回truthy ,它就会返回。
separated.every(function(element) {
return element.substr(0, 1) == "a";
});
some
method some
方法Returns a boolean value of which is the result of some element in the array passing the test.返回一个 boolean 值,该值是数组中某个元素通过测试的结果。 This method short circuits, ie it returns whenever one element's callback passes the test.
此方法短路,即只要一个元素的回调通过测试,它就会返回。
separated.some(function(element) {
return element.substr(0, 1) == "a";
});
separated.length
should be all you need. separated.length
应该是你所需要的。
str.split() returns an array of values, so in your example, since 'separated' is an array, you could: str.split() 返回一个值数组,因此在您的示例中,由于 'separated' 是一个数组,您可以:
for (var i=0, len=separated.length; i < len; i++) {
// do something with separated[i]
}
you can do it in jquery like this你可以像这样在 jquery 中做到这一点
$.each(separated,function(key,item){ alert('here is ' + item + ' at position ' + key) })
If your question really is "how do I loop through each separated variable?"如果您的问题真的是“我如何遍历每个单独的变量?” then:
然后:
for (var i = 0; i < separated.length; i++)
{
//Do something with separated[i];
}
//or (apparently this is deprecated)
for(var a in separated)
{
//Do something with a
}
Loop through with a FOR...NEXT construct like in most other languages:与大多数其他语言一样,使用 FOR...NEXT 结构进行循环:
var somestring = "data1|data2|data3";
var separated = somestring.split("|");
for (i=0 ; i<separated.length; i++) {
document.write(separated[i]);
document.write("<br/>");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.