Для каждого на массиве в JavaScript

Автор оригинала: Scott Robinson.

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

Так какой лучший способ сделать это? Этот вопрос зависит от нескольких вещей, таких как js версия, которую вы используете, если вы сможете использовать методы экземпляра и т. Д. В этой статье я буду изучать ряд способов петли над массивами в JS.

Метод Foreach Array

Широко поддерживаемый метод (кроме в IE 8, неудивительно) является Array.Prototype .Foreach метод. Он работает, принимая функцию обратного вызова с параметрами CurrentValue , индекс и массив Отказ Во многих случаях только CurrentValue и индекс Параметры используются.

Вот пример:

let items = ['one', 'two', 'three', 'four'];
items.forEach(function(val, idx) {
    console.log(`${idx}: ${val}`);
});

// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four

Это отличный метод из-за его простоты и чистого синтаксиса, хотя к нему есть некоторые недостатки. В частности, в частности, сложно вырваться из этой петли, в отличие от встроенного для петля, где вы можете использовать Перерыв ключевое слово. С foreach Вы должны выбрасывать исключение, чтобы выйти из петли рано.

Как MDN Документация указывает, если вам нужно вырваться из foreach Цикл, тогда этот метод является неправильным инструментом. В этом случае некоторые лучшие варианты будут:

• Встроенный для петля (подробно ниже)
• Встроенный для петля (подробно ниже)
• Array.Prototypee.ewy ()
• Array.prototype.some ()
• Array.prototype.find ()
• Array.prototype.findindex ()

Array.Prototype. * Способы выше могут выйти из своих петель, возвращая правдоподобное значение, которое говорит петлю, если она должна продолжаться.

foreach Метод хорош для того, когда у вас есть очень простые требования к циклам, и вам не нужно много контроля над фактическим циркулярным поведением. Однако эта простота происходит по стоимости. Это около 95% медленнее, чем встроенный для петля, но для большинства людей это замедление будет незначительным.

Встроенный для цикла

Встроенный для Цикл (также известный как простой для Loop), вероятно, является наиболее известным из вариантов, поскольку он работает так же в JavaScript, что и на многих других языках. Синтаксис выглядит следующим образом:

let items = ['one', 'two', 'three', 'four'];
for (let i = 0; i < items.length; ++i) {
    console.log(`${i}: ${items[i]}`);
}

// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four

Этот вид для Цикл имеет ряд преимуществ:

• Это знакомо большинству программистов
• Продолжение контура управления Перерыв и Продолжить ключевые слова
• Директное направление контроля (через ++ I или --i ) и скорость (то есть i + 2 )
• Частичный цикл (то есть для (пусть; i )

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

Обратите внимание, что пример, показанный выше, предполагает, что вы используете JavaScript ES6, в противном случае вам нужно будет объявить Я Переменная с использованием var И за пределами самой петли.

Встроенный для цикла

Вероятно, наиболее часто неправильно понятые формы петли в JavaScript – для-в петля. На первый взгляд, похоже, вы можете использовать это, чтобы зацикливаться через каждый индекс в массиве, но он на самом деле предназначен для петли через перечислимые имена свойств объекта, а не обязательно просто индексы.

Например, вот как он используется с массивами:

let items = ['one', 'two', 'three', 'four'];
for (let i in items) {
    console.log(`${i}: ${items[i]}`);
}

// Output:
//
// 0: one
// 1: two
// 2: three
// 3: four

А вот как это предназначено для использования с объектами:

let obj = {hi: 'bye', one: 'two', foo: 'bar'};
for (let o in obj) {
    console.log(`${o}: ${obj[o]}`);
}

// Output
//
// hi: bye
// one: two
// foo: bar

Многие разработчики на самом деле будут явно посоветовать с использованием этого для итерации массивов, особенно если заказ важен, поскольку заказ не гарантируется.

Если вы хотите зацикливаться на массиве с этим стилем синтаксиса, то для Рекомендуется, что является фокусом следующего раздела.

Встроенный для цикла

для Петли имеют очень похожий синтаксис для для-в , что мы только что видели. Однако они главным отличием состоит в том, что он итализатор по поводу намереваемых объектов (таких как строки, массивы, карты, наборы и т. Д.), В то время как для-в Италирует все не символ, перечислимые свойства объекта.

На практике вот то, что выглядит:

let items = ['one', 'two', 'three', 'four'];
for (let i of items) {
    console.log(i);
}

// Output:
//
// one
// two
// three
// four

Обратите внимание, что Я Переменная больше не является индексом, но вместо этого это фактическое значение массива. И поскольку он работает только на итерасле, мы больше не можем использовать объект:

let obj = {hi: 'bye', one: 'two', foo: 'bar'};
for (let o of obj) {
    console.log(o);
}

// Output:
//
// TypeError: obj is not iterable

С точки зрения синтаксиса и функциональности это немного компромисса между Array.foreach Функция и встроенные для петля, так как синтаксис чище, чем простой для петля, и это все еще позволяет использовать петлю «Управление» ключевые слова, такие как Перерыв и Продолжить , в отличие от foreach Отказ

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

function* myWords() {
    yield 'foo';
    yield 'bar';
    yield 'baz';
}

for (let w of myWords()) {
    console.log(w);
}

// Output:
//
// foo
// bar
// baz

Заключение

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

В этой статье мы увидели, как повторять массивы, используя Array.foreach , встроенный для петли, для-в петли и для петли. Не стесняйтесь оставить комментарий ниже с любыми критиками или улучшениями, которые вы видите.