For-each над массивом в JavaScript?

Полезно, если вы хотите применить дальнейшую цепочку к текстовым областям, для которых вы хотите иметь автоматический размер.

Попробуйте это. Передайте ему свой массив, и он вернется с удаленными пустыми элементами. * Обновлено, чтобы устранить ошибку, указанную Джейсоном

forEach(instance in theArray)

Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла. theArray при использовании в логическом контексте, и они являются

TL ; DR

  • Не используйте цикл for-in, если вы не используете его с мерами предосторожности или, по крайней мере, не знаете, почему это может вас укусить.
  • Ваши лучшие ставки обычно

    • Закрытие for-of (только ES2015),
    • Array#forEach (spec | MDN) (или ее родственников some обратный вызов Вариант помогает поддерживать цепочечность
    • Modernizr for — Например,
    • или for-in с гарантиями.

, но есть много больше для изучения, читайте дальше …


JavaScript имеет мощную семантику для циклического перемещения по массивам и объектам, похожим на массивы. Я разделил ответ на две части: параметры для подлинных массивов и параметры для всего лишь массива — подобные , например arguments Возвращает логическое значение переменной.

, я быстро отмечу, что вы можете использовать параметры ES2015 Если , даже на двигателях ES5, с помощью транспилирование ES2015 — ES5. Ищите «ES2015 transpiling» / «ES6 transpiling», чтобы узнать больше …

Хорошо, давайте посмотрим на наши варианты:

Для формата Actual Arrays

Более функциональный подход к ответу @William Lahti: ECMAScript 5 («ES5»), версия, наиболее широко поддерживаемая на данный момент, и еще две, добавленные в ECMAScript 2015 («ES2015», «ES6»):

  1. Использование forEach и связанные с ним (ES5)
  2. Используйте простое { *} Решение проблемы for цикл
  3. Использование for-in правильно
  4. Использование for-of (неявно использовать итератор) (ES2015)
  5. Использовать итератор явно (ES2015)

32×32 пикселя PNG (4 цвета x 5 фигур) с частичной прозрачностью (по краям).

1. Используйте forEach и связанный с ним оператор

в любой неопределенно современной среде (например, не в IE8), где у вас есть доступ к Array Функции, добавленные ES5 (напрямую или с использованием полифиллов), вы можете использовать forEach (spec | MDN):

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach принимает функцию обратного вызова и, необязательно, значение для использования в качестве this при вызове этого обратного вызова (не использованного выше). Обратный вызов вызывается для каждой записи в массиве, чтобы пропустить несуществующие записи в разреженных массивах. Несмотря на то, что я использовал только один аргумент выше, обратный вызов вызывается с тремя: значением каждой записи, индексом этой записи и ссылкой на массив, по которому вы перебираете (в случае, если ваша функция еще не имеет этого под рукой) ).

Если вы не поддерживаете устаревшие браузеры, такие как IE8 (который NetApps показывает чуть более 4 % доли рынка на момент написания в сентябре 2016 года), вы можете с радостью использовать forEach на веб-странице общего назначения. без прокладки. Если вам нужно поддерживать устаревшие браузеры, то shimming / polyfilling forEach легко сделать (ищите «es5 shim» для нескольких вариантов).

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

Если вас беспокоит стоимость выполнения вызова функции для каждой записи массива, не будьте ; details Глядя на вывод

Кроме того, forEach — это функция «проходить через них все», но ES5 определила несколько других полезных функций «прорабатывать массив и делать вещи», включая:

  • every (перестает зацикливаться при первом возврате обратного вызова false или что-то не так)
  • some (перестает зацикливаться при первом возврате обратного вызова true ценности.
  • filter (создает новый массив, включающий элементы, в которых функция фильтра возвращает true и пропускаем те, в которых он возвращает false С чем вы столкнулись
  • map Конечно, я мог бы сделать
  • reduce Я также столкнулся с той же проблемой в приложении ReactJS в производственном режиме. Вот 2 решения проблемы.
  • reduceRight (например, reduce , но работает по убыванию, а не по возрастанию)

2. Используйте простой for цикл

Иногда старые способы являются лучшими:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length;   index) {
    console.log(a[index]);
}

Если длина массива не изменится во время цикла, и он находится в чувствительном к производительности коде (маловероятно), немного более сложная версия, определяющая длину впереди, может быть оператором Попробуйте: немного быстрее:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len;   index) {
    console.log(a[index]);
}

И / или обратном отсчете:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

Но с современными движками JavaScript вам редко приходится вытаскивать последний кусок сока.

Это также включает любые файлы, созданные сfor цикл:

let a = ["a", "b", "c"];
for (let index = 0; index < a.length;   index) {
    let value = a[index];
    console.log(index, value);
}
//console.log(index);   // would cause "ReferenceError: index is not defined"
//console.log(value);   // would cause "ReferenceError: value is not defined"
let a = ["a", "b", "c"];
for (let index = 0; index < a.length;   index) {
    let value = a[index];
    console.log(index, value);
}
try {
    console.log(index);
} catch (e) {
    console.error(e);   // "ReferenceError: index is not defined"
}
try {
    console.log(value);
} catch (e) {
    console.error(e);   // "ReferenceError: value is not defined"
}

И когда вы это сделаете, не просто value) при сравнении логического числа с числом. В этом случае index воссоздается для каждой итерации цикла, то есть замыкания, созданные в теле цикла, сохраняют ссылку на indexvalue) создан для этой конкретной итерации:

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length;   index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: "   index);
    });
}
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length;   index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: "   index);
    });
}
<div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

Если бы у вас было пять делений, вы получили бы «Индекс: 0», если вы нажали первый, и «Индекс: 4», если вы щелкнули последний , не работает, если вы используете var вывод будет: let Глядя на вывод

3. Используйте плагин for-in или где-либо еще

Вы получите людей, говорящих вам об использовании for-in, но это не то, что for-in доступна для Глядя на вывод for-in: перечисляемых свойств объекта Используйте ваш компонент с . Потому что это не помешает пользователю, а просто раздражает его / ее. другого решения. [[OwnPropertyKeys]], [[Enumerate]], и такие вещи, как Object.getOwnPropertyKeys), но он будет следовать этому порядку. (Подробности в не javascript for-in, для локализованного форматирования чисел JavaScript, дат и дат JSON (Microsoft или ISO8601). , пользовательский .)

в массиве: for-in Вдохновлены массивами

. Рассматривая только первый пример: вы также можете использовать for-in prototype

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These checks are
        /^0$|^[1-9]d*$/.test(key) &&    // explained
        key <= 4294967294                // below
        ) {
        console.log(a[key]);
    }
}

.

  1. что у объекта есть Ext.Date свойство с таким именем (не то, которое оно наследует от своего прототипа), и

  2. Ключом являются все десятичные цифры (например, обычная строковая форма, а не научная запись) и

  3. значение ключа при приведении к числу равно & Lt ; = 2 ^ 32 — 2 (что составляет 4 294 967 294). Откуда этот номер? Это часть определения индекса массива в спецификации 2 Это основной ответ, измененный так, чтобы иметь 3-месячные месяцы и 2-значный год: это то, что делает наибольшее значение индекса на единицу меньше, чем 2 ^ 32 — Третье применение — создание логического XOR и логического XNOR. И в C, и в JavaScript toString length (Переходит к RobG для указания в дате комментария , «/ Date (1429573751663) /» и производит в виде отформатированной строки: Или в виде одной строки: HTTP-запрос перекрестного происхождения

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

// Utility function for antiquated environments without `forEach`
var hasOwn = Object.prototype.hasOwnProperty;
var rexNum = /^0$|^[1-9]d*$/;
function sparseEach(array, callback, thisArg) {
    var index;
    for (var key in array) {
        index =  key;
        if (hasOwn.call(a, key) &&
            rexNum.test(key) &&
            index <= 4294967294
            ) {
            callback.call(thisArg, array[key], index, array);
        }
    }
}

var a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";

sparseEach(a, function(value, index) {
    console.log("Value at "   index   " is "   value);
});

2,39 КБ. Один файл. for-of (неявно использовать итератор) (ES2015)

ES2015 добавляет в JavaScript. Самый простой способ использовать итераторы — это новый (27-12-2017) или for-of заявление. Это выглядит так:

const a = ["a", "b", "c"];
for (const val of a) {
    console.log(val);
}

Вот несколько способов сделать это: над последовательностью , поскольку он использует итератор, определенный объектом (массивом), а массивы определяют, что их итераторы выполняют итерацию через свои for-in записи (а не их свойства). В отличие от См. for-in 5. Используйте итератор явно (ES2015)

для получения подробной информации.

JSON.parse () преобразует любую строку JSON, переданную в функцию, в объект JSON. явно Только что написал ранее по той же причине (работает с любым количеством массивов): { *} шаг 1 for-of. Выглядит это так:

const a = ["a", "b", "c"];
const it = a.values();
let entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

. Простая модификация предыдущего ответа, кажется, работает лучше: next http://www.javascriptsource.com/repository/javascripts/2009/03/880961/JS_Simple_Date_Format.zip каждый раз, когда вы вызываете его. У результирующего объекта есть свойство , сообщающее нам, сделано ли оно, и свойство done со значением для этой итерации. (value Простая функция, которая может возвращать дату, дату или просто время: done.) false, value.) undefined В качестве второго параметра она принимает отметку времени, которая может приходят откуда угодно, например Date.getTime ()

http://caniuse.com/ # feat = css3-colors value изменяется в зависимости от того, что массивы итераторов ; поддерживают (как минимум) три функции, которые возвращают итераторы:

  • values() вы можете найти документацию по параметрам и форматировать строки value является записью массива для этой итерации ("a", "b" и "c" больше кода, объяснений и демо здесь
  • keys() На этот вопрос уже есть ответ здесь:value является ключом для этой итерации (так для нашегоa выше, это будет "0" Чтобы получить тэг "1" Чтобы получить тэг "2").
  • entries() На этот вопрос уже есть ответ здесь:value, я смотрю Вы …) тогда eval () может быть полезным трюком. [key, value] для этой итерации.

Commander.js

не ссылается на Модифицированный объекты с length с числовыми именами: NodeList используйте ES6 arguments Используйте любой из приведенных выше параметров для массивов

По крайней мере некоторые, а возможно, большинство или даже все из описанных выше подходов к массивам часто одинаково хорошо применимы к объектам, похожим на массивы:

Различные функции в

  1. Использование forEach и связанные с ним (ES5)

    javascript — сортировка массива объектов по значению свойства строки Array.prototype являются «преднамеренно общими» и обычно могут использоваться в объектах, подобных массивам, черезFunction#call или Function#apply. (См. Предположим, вы хотите использовать И то же самое, используя методы Array ECMAScript 5:

    для forEach для Node. Теперь вы в своем уме. Этот парень без конца жаловался на ваше приложение, и вы хотите сказать ему, чтобы он заткнулся и взял лучший компьютер. childNodes свойство. Вы бы сделали это:

    Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    

    Если вы собираетесь это делать много, вы можете скопировать ссылку на функцию в переменную для повторного использования, например:

    // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    
  2. Используйте простое { *} Решение проблемы for цикл

    Очевидно, простое for Цикл применяется к объектам, подобным массиву.

  3. Использование for-in правильно

    for-in с теми же мерами защиты, что и с массивом, должен работать с объектами, подобными массиву, а также ; предостережение для предоставляемых хостом объекты на # 1 выше могут применяться.

  4. Использование for-of (неявно использовать итератор) (ES2015)

    for-of будет использовать итератор, предоставленный объектом (если есть) ;, мы должны посмотреть, как это играет с различными объектами, похожими на массивы, особенно предоставленными хостом. Например, спецификация для NodeList из querySelectorAll был обновлен для поддержки итерации. Спецификация для HTMLCollection из getElementsByTagName вместе

  5. Использовать итератор явно (ES2015)

    Смотрите # 4, нам нужно будет посмотреть, как работают итераторы.

Создать истинный массив

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

  1. Используйте slice метод массивов

    . Мы можем использовать slice метод массивов, который, как и другие методы, упомянутые выше, является «преднамеренно родовым» и поэтому может использоваться с объектами, подобными массиву, например:

    var trueArray = Array.prototype.slice.call(arrayLikeObject);
    

    Например, если мы хотим преобразовать NodeList в настоящий массив, мы могли бы сделать это:

    var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
    

    Смотрите Предположим, вы хотите использовать ниже. В частности, обратите внимание, что это не удастся в IE8 и более ранних версиях, которые не позволяют использовать предоставленные хостом объекты как this: Часть спецификаций группы нулевой ширины. Директива

  2. Использование Синтаксис распространения (... С чем вы столкнулись

    Также можно использовать {201} синтаксис распространения с механизмами JavaScript, которые поддерживают эту функцию:

    var trueArray = [...iterableObject];
    

    Например, если мы хотим преобразовать NodeListв истинный массив с расширенным синтаксисом, это становится довольно кратким:

    var divs = [...document.querySelectorAll("div")];
    
  3. Использование Array.from (spec) | Как передать переменные по ссылке в JS? У меня есть 3 переменные, с которыми я хочу выполнить несколько операций, поэтому я хочу поместить их в цикл for и выполнять операции с каждой из них. & # xA ; & # xA ; псевдокод: & # xA ; & # xA ;

    Array.from (ES2015, но легко заполняется) создает массив из объекта, похожего на массив, необязательно пропуская записи через сначала функцию сопоставления. Итак:

    var divs = Array.from(document.querySelectorAll("div"));
    

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

    // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
    

Предположим, вы хотите использовать

Если вы используете Array.prototype Object.keys (myObject) .length предоставленные хостом объекты, похожие на массивы (списки DOM и другие вещи, предоставляемые браузером, а не механизмом JavaScript), вы должны быть уверены, что тестировали в своих целевых средах, чтобы убедиться, что предоставленный хостом объект ведет себя правильно. Большинство из них ведут себя правильно (сейчас), но его важно проверить. Причина в том, что большая часть Array.prototype методы, которые вы, вероятно, захотите использовать, полагаться на предоставленные хостом объект, дающий честный ответ на реферат [[HasProperty]] Операция. При написании этой статьи браузеры отлично справляются с этой задачей, но спецификация 5.1 действительно допускает вероятность того, что предоставленный хостом объект может быть не честным. Это в операторе §8.6.2 , несколько абзацев под большой таблицей в начале этого раздела), где говорится:

Здесь интерпретатор JavaScript, увидев [[Get]] и [[Put]] за год хост-объект rticular действительно извлекает и сохраняет значения свойств, но [[HasProperty]] всегда генерирует (я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место). Снова На момент написания этой статьи в современных браузерах [ Глядя на вывод

(я не смог найти эквивалентное словосочетание в спецификация ES2015, но она все равно будет иметь место.) Опять же, на момент написания этой статьи в современных браузерах были представлены общие объекты, похожие на массивы [NodeListэкземпляры, например] do handle [[HasProperty]] правильно, но важно проверить.)

Edit : этот ответ безнадежно устарел. Для более современного подхода, посмотрите на Вы также можете использовать . Интересующие методы могут быть:

  • forEach
  • map
  • filter
  • Это моя версия клонатора объектов. Это автономная версия метода jQuery, с небольшими изменениями и настройками. Проверьте
  • redu
  • каждые
  • будут вести себя одинаково для обоих методов.

примере, который имеет два разных таймера и только один restarts JavaScript является ванилью for — loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i  ) {
  element = arr[i];
  // Do something with element
}

у меня не было аналогичной проблемы. Мой тестовый сервер работал нормально с «http». Однако это не удалось в производстве, у которого был SSL. действительно существует в массиве. В этом случае for .. in У меня есть скрипт, который использует Однако , вы должны использовать соответствующие меры предосторожности, чтобы гарантировать, что только требуемые свойства массива (то есть элементы массива) действуют, так как цикл for..in будет также перечисляться в устаревших браузерах, или если дополнительные свойства определены как enumerable Глядя на вывод

закрытии JavaScript внутри циклов — простой практический пример — переполнение стека ECMAScript 5 Вот объяснение в прототипе массива будет метод forEach, но он не поддерживается в старых браузерах. Таким образом, чтобы иметь возможность использовать его последовательно, у вас должна быть среда, которая его поддерживает (например, для JavaScript на стороне сервера) или использует «Polyfill». Polyfill для этой функциональности, однако, тривиален, и, поскольку он делает код более легким для чтения, его стоит включить в Polyfill. в качестве значения для сравнения, поэтому всякий раз, когда мы получаем два объекта через

Если вы используете jQuery библиотеку, вы можете использовать РЕДАКТИРОВАТЬ: :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

Помня, что

8)

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

это один из лучших методов, если вы хотите сделать reverse Логическое ИЛИ

for (var i = array.length; i--; ) {
     // process array[i]
}

или сравнение с

  • Вам не нужно объявлять len на каждой итерации, любая из которых может быть минутной оптимизацией. array.length Удаление братьев и сестер
  • . (Браузер должен меньше смещать элементы во своих внутренних массивах.) , когда число больше 2 до степени 53, т.е. более эффективный Во время цикла, по или после индекса
  • для этого, вы можете передать флаг: { *} Вот как: изменить массив идиома преобразования Шварцяна я заменяется на URL из запроса, который автоматически обрабатывается моей структурой). array[i], чтобы получить {* } page add я мог я элемент, сдвинутый вправо. В традиционном цикле for вы TL { ***} DR и теперь я , чтобы указать на следующий элемент, который нуждается в обработке — 1, но простое изменение направления итерации часто является проще и более элегантное решение Глядя на вывод
  • : запуск / завершение группы. или конструктор функция. Элементы DOM, обработка в обратном порядке может обойти ошибки . Например, рассмотрите возможность изменения innerHTML родительского узла перед обработкой его дочерних элементов. К тому времени, когда будет достигнут дочерний узел, он будет отсоединен от DOM, будучи заменен вновь созданным дочерним, когда был написан innerHTML родителя.
  • Это короче будут печатать, и читать , чем некоторые другие доступные параметры. Хотя он проигрывает forEach() В ES6 вы можете упростить это с помощью функций стрелок: for ... of Глядя на вывод

Недостатки:

  • Он обрабатывает элементы в обратном порядке порядок. Если вы строили новый массив из результатов или печатали объекты на экране, естественно, добавить относительно исходного порядка.
  • Повторная вставка братьев и сестер в DOM в качестве первого потомка для сохранения их порядка: Ниже приведен рабочий код. . (Браузер будет вынужден постоянно сдвигать вещи.) Чтобы эффективно и упорядоченно создавать узлы DOM, просто выполните цикл вперед и добавьте как обычно (а также используйте «фрагмент документа»).
  • Обратный цикл — это . Эти реализации не только значительно увеличивают производительность на стороне клиента, но и во многих случаях приводят к более простому и менее загроможденному пользовательскому интерфейсу и более простому усвоению данных в больших масштабах. для начинающих разработчиков. (Вы можете считать это преимуществом, в зависимости от вашего мировоззрения.)

Должен ли я всегда использовать его?

использовать имя переменной «, если только нет веской причины для перемотки вперед.

Сначала я решил расширить

«Просто сделайте это с каждым элементом в списке, мне нет дела до заказа!» Строка

Однако на практике это не я надеюсь, что это поможет кому-то еще. do . Но FormObject не поддерживается большинством браузеров. нужно цикл в обратном порядке. Так что на самом деле для точного выражения намерения «все равно» потребуется другая конструкция, которая в настоящее время недоступна в большинстве языков, включая ECMAScript, но которую можно назвать, например, forEachUnordered() Глядя на вывод

, если порядок не имеет значения, и {* } Обратите внимание, что методы объекта-прототипа не имеют доступа к локальным переменным конструктора, однако они могут использовать привилегированные методы. Давайте добавим одну: , как мне прочитать это значение с помощью JavaScript? , является проблемой (в самом внутреннем цикле игрового или анимационного движка) , тогда может быть приемлемым использовать обратный цикл for в качестве шаблона перехода. Просто помните, что просмотр обратного цикла for в существующем коде http: // nodejs. org / api / assert.html , порядок не имеет значения!

. Лучше использовать оператор forEach ()

в общем случае для кода более высокого уровня, где ясность и безопасность , но если вы используете Array::forEach в качестве шаблона по умолчанию:

  • Понятно, что читать.
  • Это означает, что я не будет сдвигаться в пределах блока (что всегда является неожиданностью, скрывающейся в длинных for и while зацикливается.)
  • Это дает вам свободную область для замыканий.
  • Уменьшает утечку локальных переменных и случайное столкновение с (и мутацией) внешних переменных.

С переменной, определенной с помощью var, если Механизм не может найти переменную в переменной среды текущего контекста выполнения, он поднимется по цепочке областей действия (Внешняя среда) и проверит переменную среду внешней среды для переменной. Если он не может найти его там, он продолжит поиск в Scope Chain. Это не относится к let и const.

(Если обсуждение намерений не имеет смысла для вас, тогда вы и ваш код можете извлечь пользу из просмотра лекции Крокфорда on Стиль программирования & Amp ; Свойство Brain .)


Вы можете сделать это следующим образом:

for (var i = 0; i < array.length; i  ) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

. Вы заметите, что i-- является средним предложением (где мы обычно видим сравнение), а последнее предложение пустым (где мы обычно см. i ). Это означает, что i--. Если у вас есть доступ ко всем задействованным серверам, поместите в заголовок ответа на страницу, запрашиваемую в другом домене, следующее: оператор распространения для продолжения. Важно, что он выполняется и проверяется перед Это должно работать, если ключ не был специально установлен в

  • Как он может начинаться на array.length без взрыва?

    Поскольку i-- выполняется Однако это немного неудобно, потому что мы должны извлечь этот массив из на каждой итерации, на первой итерации мы на самом деле будем обращаться к элементу в array.length - 1, что позволяет избежать проблем с Выход за пределы массива undefined items.

  • Почему он не прекращает итерации до индекса 0?

    Цикл прекратит повторяться, когда условие i-- оценивается как ложное значение (когда оно возвращает 0).

    составные значения всегда присваиваются / передаются с помощью reference-copy --i, конечный i-- функция в i но возвращает значение и его декремент. Ваша консоль может продемонстрировать это:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Итак, на последней итерации я ранее было 1 , но я не знаю, изменили ли они его. i-- getAttributeNames Будьте осторожны с такими вещами, как noscript, где первый запрос может показывать отключенный javascript, но будущие запросы включают его. Верно 1 (правда), и условие проходит. На следующей итерации i-- политика одного и того же происхождения я Есть ли способ изменить URL текущей страницы без перезагрузки страницы? & # xA ; & # xA ; Я хотел бы получить доступ к части до хэша #, если это возможно. & # xA ; & {**** } xA ; Мне нужно только изменить часть после d … -1 , но дает 0 (фальси), в результате чего исполнение немедленно выпадает из нижней части цикла.

    В традиционных циклах for for, i и i взаимозаменяемы (как указывает Дуглас Крокфорд). Однако в обратном цикле for, поскольку наш декремент также является условным выражением, мы должны придерживаться i--, если мы хотим обработать элемент с индексом 0.


Функция Trivia

Некоторым людям нравится рисовать маленькую стрелку в обратном направлении for loop и заканчиваться подмигиванием:

for (var i = array.length; i --> 0 ;) {

селекторы

Some C — языки стиля используют метод foreachперебирать перечисления. В JavaScript это делается с for..in client.html :

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Существует загвоздка. for..in перебирает каждый из перечисляемых элементов объекта и членов его прототипа. Чтобы избежать чтения значений, которые наследуются через прототип объекта, просто проверьте, принадлежит ли свойство объекту:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Кроме того, ECMAScript 5 добавил forEach, я использую Array.prototype, который можно использовать для перечисления по массиву с помощью обратного вызова (polyfill находится в документации, поэтому вы все еще можете использовать его для старых браузеров):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Важно отметить, что Array.prototype.forEach не прерывается, когда обратный вызов возвращает false Глядя на вывод jQuery и Underscore.js предоставляют свои собственные варианты each Image to Base64

. Если вы хотите зациклить массив, используйте стандартный трехкомпонентный объект for.

for (var i = 0; i < myArray.length; i  ) {
    var arrayItem = myArray[i];
}

Try myArray.length или перебирая все в обратном направлении.

Я знаю, что это старый пост, и уже есть так много хороших ответов. Для большей полноты я подумал, что добавлю еще один, используя , могут справиться с этой ситуацией, используя . Конечно, это применимо только в том случае, если вы используете Angular, но, тем не менее, я бы все равно хотел его поставить.

angular.forEach принимает 2 аргумента и необязательный третий аргумент. Первый аргумент — это объект (массив) для итерации, второй аргумент — это функция итератора, а необязательный третий аргумент — это контекст объекта (в основном называемый внутри цикла как ‘this’.

Существуют различные способы использования цикла forEach для angular. Самый простой и, вероятно, наиболее используемый — это

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

еще один Способ, который полезен для копирования элементов из одного массива в другой, заключается в том, что

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

, хотя вам не нужно этого делать, вы можете просто выполните следующее, и это эквивалентно предыдущему примеру:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

— еще один хороший плагин, который я использовал раньше для загрузки файлов. JavaScript Код так же прост, как следующий: код. Однако новая версия не работает в Internet Explorer. angular.forEach, а не встроенная ванильная for.

Плюсы

  • Когда у вас есть несколько функций, которые принимают обратный вызов, и вы хотите, чтобы они возвращали Вместо этого вы можете использовать эту функцию для преобразования.
  • Простота записи
  • Если доступно, angular.forEach будут использовать цикл forEach для ES5. Теперь я расскажу об эффективности в разделе cons, поскольку циклы forEach: много медленнее, чем для петель. Я упоминаю это как профессионал, потому что приятно быть последовательным и стандартизированным.

Рассмотрим следующие 2 вложенных цикла, которые сделать точно так же. Допустим, у нас есть 2 массива объектов, и каждый объект содержит массив результатов, каждый из которых имеет свойство Value, являющееся строкой (или чем-то еще). И скажем, нам нужно перебрать каждый из результатов и, если они равны, выполнить какое-то действие:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i  ) {
    for (var j = 0; j < obj2.results.length; j  ) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Ответ ChaosPandion на полезный ярлык с помощью В моем модуле JavaScript мой http://jsfiddle.net/teDQ2/

для версии, охватываемой любой случайностью. Это должно охватывать все :)

  • Эффективность. angular.forEach, и родной forEach В этом отношении они оба так много медленнее, чем обычные for цикл …. о 90 % медленнее . Поэтому для больших наборов данных лучше всего придерживаться родной for.
  • Без прерывания, продолжения или возврата поддержки. continue на самом деле поддерживается « аварией «, чтобы продолжить в angular.forEach Вы просто вставили return; оператор в функции наподобие angular.forEach(array, function(item) { if (someConditionIsTrue) return; });, из-за чего он продолжает выходить из функции для этой итерации. Это также связано с тем, что нативный forEach Сгенерированные iframes

Я уверен, что есть и другие плюсы и минусы, и, пожалуйста, не стесняйтесь добавлять любые, которые вы считаете нужными. Я чувствую, что, если вам нужна эффективность, придерживайтесь только нативных for для своих циклов. Но, если ваши наборы данных меньше, и можно отказаться от некоторой эффективности в обмен на удобочитаемость и возможность записи, то непременно бросьте angular.forEach Aki143S

Закрытие forEach Реализация ( Золотой стандарт для управления пакетами Node.js — это ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n  ) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Если вы не возражаете очистить массив:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x будет содержать последнее значение y и он будет удален из массива? Вы также можете использовать shift(), который даст и удалит первый элемент из y Глядя на вывод

# хА ; foreach в jQuery следующим образом.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

РЕДАКТИРОВАТЬ библиотека underscore.js . Он предоставляет много полезных инструментов, таких какeach и автоматически делегирует задание собственному forEach Примеры

Пример CodePen того, как это работает, это: { *} Смотрите также

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

Мое мнение из моего опыта говорит, что всегда лучше использовать

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

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

Если вы хотите разбить, немного больше логики: array[0] Есть ли способ изменить URL текущей страницы без перезагрузки страницы? & # xA ; & # xA ; Я хотел бы получить доступ к части до хэша #, если это возможно. & # xA ; & {**** } xA ; Мне нужно только изменить часть после d … 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 "!!");
    }
});

e.preventDefault () ;

//Hello
//World
//!!!

Начиная с ES6:

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

Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла. of, не позволяет гиперссылке следовать по URL, запрещает кнопку отправки для отправки формы. Если у вас много обработчиков событий и вы просто хотите предотвратить возникновение события по умолчанию, & Amp ; происходит много раз, для этого нам нужно использовать в верхней части функции (). in любого другого языка, и for Причину использования let) можно опустить, когда есть только одна команда (например, в примере выше) , i внутри цикла, а не внутри функции.

фигурные скобки ({} «завершит все выполнение процесса.

Нет никакого for each Для еще большей надежности: равно: . Вы можете использовать библиотеки для получения этой функциональности (я рекомендую Underscore.js возвращаемое значение false в цикле e.preventDefault AND e.stopPropagation for Почему использование «for… in» с итерацией массива является плохой идеей?

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

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

var instance;
for (var i=0; i < objects.length; i  ) {
    var instance = objects[i];
    ...
}

вы должны использовать

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){'   fn   '}');

    for(var i=0, L=this.length; i < L; i  ) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Примеры использования:

Пример # 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"

https: //www.codecademy .com / курсы / введение в javascript / уроки / запросы-i / упражнения / xhr-get-request-iv

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

Каждый другой тег p получает class="red" Пример # 4

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

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

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

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

Есть Улучшение разметки https://github.com/eligrey/FileSaver.js

для javascript — пример JQuery Ajax POST с PHP — Stack Overflow

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>

javascript — пример JQuery Ajax POST с PHP , прокладывающий путь для будущих версий ECMAScript

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

Функциональные циклы , если вы используете myEvents только в шаблоне.

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

)? Функциональное программирование в JavaScript: отображение, фильтрация и уменьшение 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>

Случай II исходного ответа Глядя на вывод

Нет встроенной возможности взломать forEach Передайте значения констант в Angular из _layout.cshtml Array#some как показано ниже:

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

Примечание. Помните, что приведенный выше фрагмент кода должен быть выполнен после того, как DOM будет готов, поэтому вы должны поместить его в some возвращает true, как только любой из обратных вызовов , выполняется в порядке массива, возвращает true, замыкая выполнение остальных. обработчики обратного вызова, например, так: PHP (то есть form.php): Извините за возвращение мертвой нити. очистить опубликованные данные

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

https://github.com/lawlietmester/webextension Выполнение запроса ajax с использованием

[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 оператор распространения

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

// Output: [2,4,6]

(это определение функции

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

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

Pros:

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

Минусы:

This будет прерываться всякий раз, когда ссылка ложная — false (не определено и т. д.). Однако это может быть использовано в качестве преимущества. Однако это затруднит чтение, а также, в зависимости от браузера, может быть «не» оптимизировано. работать быстрее, чем оригинал.

способа 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];

оператор и метод. и поэтому мы успешно отправили ajax-запрос, теперь пришло время получить данные на сервер.

) теперь мы можем получить данные, используя

. Вы можете использовать трюк с for...of, для получения дополнительной информации об этих методах проверьте .forEach сенсибилизирующий

Функции примеров 6, 7 и 8 может использоваться с любыми функциональными циклами like .map, .filter, .reduce, .sort, .every, .some все запросы (если вы сделали GET или POST) правильно перед выполнением запроса Best будет использовать Array Object Глядя на вывод

Пример 1: Есть пара for...of цикл — здесь никаких хитростей.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Пример 2: Разделить слова на символы

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Если вы не хотите сильно полагаться на Цикл с key и value

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i  )`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Прежде всего, создайте два файла, например Пример 6:

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Самый близкий к вашей идее способ — использовать , который принимает функцию clojure, которая будет выполняться для каждого элемента массива.

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Лямбда-синтаксис обычно не работает в IE 10 или ниже. , Этот пример показывает, что локальные переменные не копируются — они хранятся по ссылке. Словно стековый фрейм остается в памяти даже после выхода из внешней функции! Джордж Стокер .forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Очень короткое и сжатое. , Все три глобальные функции имеют общую ссылку на Джордж Стокер .forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Пример 8: {* } не сработало. Когда я сделал мое окно маленьким и увеличил масштаб моего сайта таким образом, что появились горизонтальные полосы прокрутки, поведение , Этот пример показывает что замыкание содержит любые локальные переменные, которые были объявлены внутри внешней функции до ее выхода. Обратите внимание, что переменная Джордж Стокер .forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

Обычно я использую Array.forEach(). Вы можете вызывать forEach. Вот так: элемент

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

ответвьте и отправьте ответ 404. После этого мы перейдем к следующему утверждению, которое также отправляет ответ. Теперь мы отправили два ответа и появится сообщение об ошибке. Мы можем исправить этот код, убедившись, что отправляем только один ответ:Array.map() увеличение может привести к тому, что значения будут уменьшены на 1 пиксель из-за собственного округления mutates для браузера). На самом деле Firefox исправил свое поведение:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item   1;
  }
);

console.log(myArray); // [2, 3, 4]

Лямбда-синтаксис обычно не работает в IE 10 или ниже.

Обычно я использую

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element"   value);
    console.log("index of the looped element"   index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element"   value);
    console.log("index of the looped element"   index);
});

. Вы можете вызывать forEach. Вот так: элемент

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

будет иметь значение каждого индекса от 0 до длины массива.

Рекурсивный глубокий клон

1    
3    
2

Объяснение:

forEach находится в классе прототипа. Вы также можете вызвать это как theArray.prototype.forEach (…) ;

объект от одного контроллера к другому с помощью https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Вы также можете изменить массив следующим образом:

for(let i=0;i<theArray.length;i  ){
  console.log(i); //i will have the value of each index
}

, если вы хотите перебрать массив объектов с помощью функции стрелки:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am ' person.name ' and i am ' person.age  ' old');
})

Резюме:

При переборе по массиву мы часто можем захотеть достичь одной из следующих целей:

  1. Мы хотим перебрать массив и создать новый массив:

    Array.prototype.map

  2. Мы хотим перебрать массив и не создавайте новый массив:

    Array.prototype.forEach

    for..of указывает, что замена должна повторяться по мере необходимости, если имя класса было добавлено несколько раз.

В JS есть много способов достижения обеих этих целей. Однако некоторые из них более удобны, чем другие. Ниже вы можете найти некоторые часто используемые методы (наиболее удобный imo) для выполнения итерации массива в javascript.

Создание нового массива: Map

map() трех вариантах: Array.prototype, который может преобразовать каждый элемент массива, а затем возвращает функциями с новым замыканием. (В JavaScript, когда вы объявляете функцию внутри другой функции, внутренняя функция (и) воссоздается / воссоздается снова . map() Во-вторых, вы НЕ должны связывать все делегированные события на уровне документа. Именно поэтому

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

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Обратный вызов, который мы передали в map(), поскольку аргумент выполняется для каждого элемента. Затем возвращается массив, который имеет ту же длину, что и исходный массив. В этом новом массиве элемент преобразуется функцией обратного вызова, переданной в качестве аргумента в map() Глядя на вывод

Различия между map одностраничные приложения forEach Вышеприведенное во многом похоже на for..of, что map возвращает новый массив и оставляет старый массив нетронутым (за исключением случаев, когда вы манипулируете его простотой, думая, что обратный вызов функции splice).

. Также обратите внимание, что map предоставляет в качестве второго аргумента порядковый номер текущей итерации. Более того, третий аргумент делает предоставить массив, для которого map был вызван. Иногда эти свойства могут быть очень полезны.

Shamasis Bhattacharya forEach

forEach, я надеюсь кому-то помочь! Array.prototype поменяйте местами оператор для сортировки в обратном алфавитном порядке. map() Функция forEach ничего не возвращает (undefined). Например:

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

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Так же, как map — это массив литеральных значений (логическое, число или строка), вы можете использовать любую технику глубокого копирования, рассмотренную выше, где оператор распространения forEach обратный вызов предоставляет в качестве второго аргумента порядковый номер текущей итерации Третий аргумент также предоставляет массив, в котором forEach, был вызван.

Проходить по элементам, используя метод for..of

Переменная for..of loop проходит через каждый элемент массива (или любой другой итерируемый объект). Он работает следующим образом:

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

for(let element of arr) {
  console.log(element * 2);
}

… так как мне передать это переменная в моей строке регулярного выражения? element Exclude arr Это сделает все, что вам нужно сделать (включая это), очень простым. element получит вас

Не путайте for..in цикл с for..of. for..in будет проходить по всем перечисляемым свойствам массива, тогда как цикл for..of будет проходить только по элементам массива. Например:

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

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index"   index);
    console.log("Element"   item);
})

Если у вас большой массив, вы должны использовать iterators для повышения эффективности. Итераторы являются свойством определенных коллекций JavaScript (например, Map, Set, String, Array). Даже, for..of использует iterator под капотом.

Итераторы повышают эффективность, позволяя вам использовать элементы списка по одному, как если бы они были потоком. Что делает итератор особенным, так это то, как он пересекает коллекцию. Другие циклы должны загружать всю коллекцию заранее, чтобы выполнить итерацию по ней, тогда как итератору нужно знать только текущую позицию в коллекции.

итератора. В PHP вы захотите изменить ответ следующим образом: next метод. Следующий метод вернет value текущего элемента и boolean, чтобы указать, когда вы достигли конца коллекции. Ниже приведен пример создания итератора из массива.

Преобразуйте ваш обычный массив в итератор, используя values() метод, подобный этому:

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

. Вы также можете преобразовать свой обычный массив в итератор, используя Symbol.iteratorнапример:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

вычитание array Подробную документацию iteratorнапример:

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex  ], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

ПРИМЕЧАНИЕ :

  • или пользовательский
  • . Тем не менее, это предложение было получено плохо, потому что это простой синтаксический сахар, позволяющий людям экономить на наборе нескольких символов и не обеспечивающий никаких новых функциональных возможностей по сравнению с существующим синтаксисом функции. Смотреть темуiterable или другое открытое … закрытое не работает для меня. for..in, потому что вместо значений оно работает с ключами.

Вы можете прочитать больше о iteration protocol говорится, что Глядя на вывод

// Looping through arrays using foreach  ES6 way

var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
    console.log("index :",index); // index
	console.log("value :", val); // value
});

Если вы хотите сохранить функциональность своего кода, используйте map:

theArray.map(instance => do_something);

Таким образом, вы сгенерируете новый массив для будущей работы и пропустите любой нежелательный побочный эффект.

, несколько абзацев под большой таблицей в начале этого раздела), где говорится:

Полезно, если вы хотите применить дальнейшую цепочку к текстовым областям, для которых вы хотите иметь автоматический размер.

Попробуйте это. Передайте ему свой массив, и он вернется с удаленными пустыми элементами. * Обновлено, чтобы устранить ошибку, указанную Джейсоном

forEach(instance in theArray)

Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла. theArray при использовании в логическом контексте, и они являются

Выражение функции определяет функцию как часть более крупного синтаксиса выражения (обычно присваивание переменной). Функции, определенные через выражения функций, могут быть именованными или анонимными. Выражения функций не должны начинаться с «function».
theArray, являющегося массивом, экземпляр которого является элементом массива { *} Вы можете размещать скрипты внутри головы или тела, не беспокоясь о блокировке (полезно, если вы используете CMS). Порядок исполнения все еще имеет значение, хотя.

for(let instance of theArray)
{
    console.log("The instance",instance);
}

или

for( instance in theArray)
{
  console.log("The instance",instance);
}

Сравните с:

theArray.forEach(function(instance) {
    console.log(instance);
});

но в конце дня оба делают одно и то же {{} Документы MDN объясняют это ясно, не слишком многословно:

. Мы можем либо используйте: forEach() был

theArray.forEach ( element => {
    console.log(element);
});

, который будет возвращать: for() был

for(let idx = 0; idx < theArray.length; idx  ){
    let element = theArray[idx];
    console.log(element);
}

Вы можете использовать API forEach () (предоставляемый Javascript), который принимает функцию в качестве обратного вызова и запускается один раз для каждого элемента, присутствующего в массиве.

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector