如何使用 JavaScript 遍历数组? [英] How to loop over an Array with JavaScript?

问题描述

我有一个字符串，其中的数据由管道字符 (|) 分隔.

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

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

我知道如何使用 split() 来分隔每个数据.

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

但是，我不知道结果 Array 中会有多少个管道.

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

在 jQuery 或 JavaScript 中，如何遍历返回的数组?

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?

你基本上只需要迭代结果Array.

You basically just need to iterate over the resulting Array.

此方法易于使用，并且有利于封装使用的变量.

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.

当然，jQuery 是 JavaScript，所以以下任何一种方法都可以使用.

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

这是推荐的方式.

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

jsFiddle.

您也会注意到 length 属性被缓存，因此不会在每次迭代时查找.一些浏览器已经为此进行了优化，但是 IE 似乎仍然受益于它的缓存.只需要5秒就可以搞定，还不如让IE用户开心.

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.

您可能希望在 for 循环之外定义 i 和 chunk，因为 JavaScript 没有块作用域(除非您使用let)，并且这些变量将存在于之前(提升声明)和之后(无块作用域).

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

通常不推荐使用此循环，因为它应该仅用于迭代对象属性，而不是像成员属性那样的数组.

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.

此循环将遍历原型链上的所有属性，因此必须使用 hasOwnProperty().因此，不建议将其用于数组.

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.

这个循环在 ECMA 6 中被标准化并且能够循环NodeList和迭代器.

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

此方法是对 ECMA-262 标准的补充.它在 IE8 中不可用，但可以是 填充相对容易.

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.

如果您希望针对特定目标进行迭代，则使用专门的迭代器可能会很有用.请记住，这些也没有最好的浏览器支持.

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.

创建关联回调返回真实的元素的 mew 数组.

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

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

reduce 方法

基于从左到右减少数组元素来创建新值.

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

另见reduceRight 方法.

创建一个新数组，用关联回调的返回值替换每个元素.

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

返回一个布尔值，它是数组中每个元素通过测试的结果.此方法短路，即只要一个元素的回调不返回truthy，它就会返回.

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

some 方法

返回一个布尔值，它是数组中某个元素通过测试的结果.此方法短路，即只要一个元素的回调通过测试，它就会返回.

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