Автор оригинала: FreeCodeCamp Community Member.
Джоанна Гаудин
Разница между для, для … в и для … петлей
Итерация может быть одной из наиболее часто используемых операций в программировании. Он принимает набор предметов и выполняет заданную операцию на каждом из них в последовательности. Петли позволяют быстро и простой способ сделать что-то неоднократно.
В JavaScript различные механизмы петли позволяют определять начало и конец петли по-разному. Там нет простого ответа на какое из механизмов является лучшим, поскольку разные ситуации требуют разных подходов, что означает, что ваши потребности могут быть легче обслуживаться одним типом цикла над остальными.
Вот что вы можете использовать для петля в JavaScript :
- делать … пока оператор
- во время выписки
- помеченное утверждение
- Выявление разрыва
- Продолжить утверждение
- для выписки
- для … в заявлении
- для … отчета
Давайте приблизимся к последним 3. Они, как правило, совсем сбивают с толку, когда вы начинаете работать с JavaScript, так как имена на самом деле не облегчают запомнить механику за ними. Я надеюсь, что пара примеров сделает вещи на месте, если вы все еще немного шаткие на концепции.
Петля ‘для’
для Цикл является наиболее распространенным типом цикла, и вы, возможно, наткнулись на него на других языках программирования, поэтому давайте просто будем быстро освещать.
Вот основной синтаксис:
for ([initialExpression]; [exit condition]; [incrementExpression]) {
do something;
}Давайте возьмем пример:
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}Отпечатки :
Так что на самом деле происходит здесь? А для Структура повторяется до тех пор, пока указанное условие не оценивается до false. В нашем случае мы начинаем счетчик (переменную i ) в 0, распечатайте номер из нашего Числа массив, который живет в Я Индекс массива и, наконец, увеличивать счетчик. Мы также заявляем, что наш цикл должен сломаться, когда счетчик больше не меньше, чем размер массива ( Числа. Длина ).
Самые большие недостатки для Цикл должен отслеживать счетчик и условие выхода. Синтаксис также не очень прост, и понять, что происходит, вам действительно нужно просто запомнить, какая каждая часть кода означает. Хотя а для Цикл может быть практическим решением для петли через массив, часто бывают муки.
Для … в петле
Для ... в петля устраняет две основные слабости для петля. Нет необходимости думать о счетчике или состоянии выхода.
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in numbers) {
console.log(numbers[index]);
}Принты:
Основным недостатком этого решения является то, что нам все равно нужно использовать индекс для доступа к элементам массива.
Другая вещь, которая может быть проблематичной, так это то, что Для ... в Корпус петлей во всех перечислимых свойствах. Что это значит на практике? Если вам нужно добавить дополнительный метод к вашему объекту (в нашем случае: массив) этот метод также появится в вашем цикле.
Посмотрите на этот пример:
Array.prototype.decimalfy = function() {
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toFixed(4);
}
};
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index in numbers) {
console.log(numbers[index]);
}Принты:
Я думаю, вы согласитесь, что это не совсем то, что мы были после. При закреплении массивов, постарайтесь держаться подальше от Для ... в петли, чтобы избежать неожиданных сюрпризов.
Для … цикла
The For … of Loop – это новое дополнение к семье для Петли в JavaScript.
Он сочетает в себе сильные стороны для петля и Для ... в петля, позволяющая печатать на любой тип типа данных, который является несомненным, что ИТЕРАЛНЫЙ ПРОТОКОЛЬКИ ), такой как строка, массив, набор или карта. Обратите внимание, что объект ( {} ) по умолчанию не указан.
Синтаксис для ... из цикл почти такой же, как из Для ... в петля:
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const number of numbers) {
console.log(number);
}Принты:
Одним из больших преимуществ является то, что нам больше не нужен индекс и может легко получить доступ или наш массив. Это делает для ... из петля самая компактная часть всей семьи для петель.
Кроме того, для ... из Механизм петлей позволяет разрыв петли, в зависимости от вашего состояния. Посмотрите на этот пример:
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const number of numbers) {
if (number % 2 !== 0) {
continue;
}
console.log(number);
}Принты:
Кроме того, добавление новых методов объектов не влияет на для ... из петля:
Array.prototype.decimalfy = function() {
for (i = 0; i < this.length; i++) {
this[i] = this[i].toFixed(4);
}
};
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const number of numbers) {
console.log(number);
}Принты:
Это делает для ... из петля самая мощность всего!
Сбочная Примечание: петля Foreach
То, что также стоит упомянуть, это foreach петля. Обратите внимание, однако, что foreach () Это метод массива и, следовательно, не может использоваться на других объектах JavaScript. Этот метод может быть полезен, если ваше дело соответствует двум условиям: вы хотите закрутить на массиве, и вам не нужно останавливать петлю до конца этого массива:
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.forEach(function(number) {
console.log(number);
});Принты:
Я надеюсь, что эти примеры помогали вам обернуть голову всеми разными механиками итерации в JavaScript.
Вы только начинаете свое путешествие с программированием? Вот некоторые статьи, которые могут вас заинтересовать: