Для каждого над массивом в JavaScript? - PullRequest
4277 голосов
/ 17 февраля 2012

Как я могу перебрать все записи в массиве, используя JavaScript?

Я думал, что это было примерно так:

forEach(instance in theArray)

Где theArray - мой массив, нокажется неправильным.

Ответы [ 33 ]

25 голосов
/ 17 июля 2013

Простым решением сейчас будет использование библиотеки underscore.js . Он предоставляет много полезных инструментов, таких как each, и автоматически делегирует задание собственному forEach, если доступно.

Пример CodePen о том, как это работает:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

Смотри также

23 голосов
/ 26 мая 2016

Начиная с ES6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

Где of избегает странностей, связанных с in, и заставляет его работать как цикл for любого другого языка, а let связывает i внутри цикла, а не внутри функции.

Брекеты ({}) можно опустить, если есть только одна команда (например, в приведенном выше примере).

23 голосов
/ 02 ноября 2013

Возможно, петля for(i = 0; i < array.length; i++) не лучший выбор. Зачем? Если у вас есть это:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

Метод будет вызываться от array[0] до array[2]. Во-первых, это будет сначала ссылаться на переменные, которых у вас даже нет, во-вторых, у вас не будет переменных в массиве, и в-третьих, это сделает код более смелым. Смотри, вот что я использую:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

И если вы хотите, чтобы это была функция, вы можете сделать это:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Если вы хотите сломаться, немного больше логики:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Пример:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Возвращает:

//Hello
//World
//!!!
17 голосов
/ 17 февраля 2012

В нативном JavaScript нет никакого цикла for each. Вы можете использовать библиотеки для получения этой функциональности (я рекомендую Underscore.js ), используйте простой for в цикле.

for (var instance in objects) {
   ...
}

Однако обратите внимание, что могут быть причины использовать еще более простой цикл for (см. Вопрос переполнения стека Почему использование «for… in» с итерацией массива является плохой идеей? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}
17 голосов
/ 30 января 2014

Это итератор для не разреженного списка, где индекс начинается с 0, что является типичным сценарием при работе с document.getElementsByTagName или document.querySelectorAll).:

Пример # 1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

Пример # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Каждый тег p получаетclass="blue"

Пример # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Каждый другой тег p получает class="red">

Пример # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

И, наконец, первые 20 синих тегов p изменяются на зеленые

Внимание, при использовании строки в качестве функции: функция создается вне контекста и должна использоваться толькогде вы уверены в переменной области видимости.В противном случае лучше передавать функции там, где область видимости более интуитивна.

16 голосов
/ 10 мая 2017

Существует несколько способов перебрать массив в JavaScript, как показано ниже:

для - это самый распространенный вариант. Полный блок кода для зацикливания

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - цикл пока условие выполнено. Вроде бы самая быстрая петля

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - также цикл по блоку кода, пока условие выполнено, будет выполняться как минимум один раз

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Функциональные циклы - forEach, map, filter, а также reduce (они выполняют цикл через функцию, но используются, если вам нужно что-то сделать с вашим массивом и т. Д.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Для получения дополнительной информации и примеров о функциональном программировании для массивов, смотрите сообщение в блоге Функциональное программирование в JavaScript: отображение, фильтрация и уменьшение .

14 голосов
/ 27 июля 2015

Нет встроенной способности взломать forEach.Чтобы прервать выполнение, используйте Array#some, как показано ниже:

[1,2,3].some(function(number) {
    return number === 1;
});

Это работает, потому что some возвращает true, как только любой из обратных вызовов, выполненных в порядке массива, возвращает true, замыкая выполнениеостальные. Оригинальный ответ см. Прототип массива для некоторые

14 голосов
/ 09 апреля 2017

ECMAScript5 (версия на Javascript) для работы с массивами.

forEach - выполняет итерацию по каждому элементу в массиве и делает с каждым элементом все, что вам нужно.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

В случае, если вас больше интересует работа с массивом с использованием некоторой встроенной функции.

map - Создает новый массив с результатом функции обратного вызова.Этот метод хорошо использовать, когда вам нужно отформатировать элементы вашего массива.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

Reduce - Как видно из названия, массив сводится к одному значению путем вызовапереданная функция в элементе currentct и результат предыдущего выполнения.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

каждые - Возвращает true или false, если все элементы в массиве проходят тест в функции обратного вызова.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Очень похоже на все, за исключением того, что фильтр возвращает массив с элементами, которые возвращают true для данной функции.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Надеюсь, что этобудет полезно.

11 голосов
/ 28 августа 2015

Я также хотел бы добавить это как композицию обратного цикла и ответ выше для кого-то, кто тоже хотел бы этот синтаксис.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Плюсы:

Преимущество для этого: у вас уже есть ссылка в первом, как, что не нужно будет объявлять позже с другой строкой. Это удобно при цикле через массив объектов.

Минусы:

Это будет прерываться всякий раз, когда ссылка ложная - ложная (неопределенная и т. Д.). Это может быть использовано как преимущество, хотя. Тем не менее, это будет немного сложнее для чтения. Кроме того, в зависимости от браузера его можно «не» оптимизировать, чтобы он работал быстрее оригинального.

10 голосов
/ 01 апреля 2014

JQuery способ использования $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
...