Foreach break javascript: How to Break Out of a JavaScript forEach() Loop

Содержание

Операторы перехода — Kotlin

В Kotlin определено три оператора перехода:

  • return по умолчанию производит возврат из ближайшей окружающей его функции или анонимной функции;
  • break завершает выполнение ближайшего окружающего его цикла;
  • continue продолжает выполнение цикла со следующего его шага, без обработки оставшегося кода текущей итерации.

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

val s = person.name ?: return

Эти выражения имеют тип Nothing.

Метки операторов break и continue

Любое выражение в Kotlin может быть помечено меткой label. Метки имеют форму идентификатора, за которым следует знак @, например abc@ или fooBar@. Для того чтобы пометить выражение, мы просто ставим метку перед ним.

loop@ for (i in 1..100) {
    // ...
}

Теперь мы можем уточнить значения операторов break или continue с помощью меток.

loop@ for (i in 1..100) {
    for (j in 1..100) {
        if (...) break@loop
    }
}

Оператор break, отмеченный @loop, переводит выполнение кода в точку сразу после цикла, отмеченного этой меткой. Оператор continue продолжает цикл со следующей его итерации.

Возврат к меткам

В Kotlin функции могут быть вложены друг в друга с помощью литералов функций, локальных функций и анонимных объектов. Подходящий return позволит вернуться из внешней функции. Одним из самых важных применений этой синтаксической конструкции является возврат из лямбда-выражения. Напомним, что в таких случаях, как в примере ниже, return возвращает из ближайшей заключающей функции — foo:

fun foo() {
    listOf(1, 2, 3, 4, 5).forEach {
        if (it == 3) return // нелокальный возврат, непосредственно к объекту вызывающему функцию foo()
        print(it)
    }
    println("эта строка не достижима")
}

Обратите внимание, что такой нелокальный возврат поддерживается только лямбда-выражениями, переданными инлайн-функциям. Чтобы вернуться из лямбда-выражения, к оператору стоит поставить метку и тем самым сделать уточнение для return.

fun foo() {
    listOf(1, 2, 3, 4, 5).forEach lit@{
        if (it == 3) return@lit // локальный возврат внутри лямбды, то есть к циклу forEach
        print(it)
    }
    print(" выполнится с использованием явной метки(lit@)")
}

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

fun foo() {
    listOf(1, 2, 3, 4, 5).forEach {
        if (it == 3) return@forEach // локальный возврат внутри лямбды, то есть к циклу forEach
        print(it)
    }
    print(" выполнится с использованием неявной метки(forEach@)")
}

Возможно также использование анонимной функции в качестве альтернативы лямбда-выражениям. Оператор return возвращает из самой анонимной функции.

fun foo() {
    listOf(1, 2, 3, 4, 5). forEach(fun(value: Int) {
        if (value == 3) return  // локальный возврат внутри анонимной функции, то есть к циклу forEach
        print(value)
    })
    print(" выполнится с использованием анонимной функции")
}

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

Прямого эквивалента для break не существует, но его можно смоделировать — добавить еще одну вложенную лямбду и нелокально вернуться из нее.

fun foo() {
    run loop@{
        listOf(1, 2, 3, 4, 5).forEach {
            if (it == 3) return@loop // нелокальный возврат из лямбды к вызывающему run
            print(it)
        }
    }
    print(" выполнится с использованием вложенной метки")
}

При возвращении значения парсер отдаёт предпочтение специализированному возврату.

return@a 1

что значит «верни 1 в метке @a«, а не «верни выражение с меткой (@a 1)«.

Правильный способ выйти из цикла forEach в JavaScript

Как выйти из цикла forEach в JavaScript и вернуться к нему? Короткий ответ: вы не можете. Выйти из forEach циклов в JavaScript невозможно. Тем не менее, есть некоторые обходные пути, а также есть альтернативы.

Хотя мы не можем сломаться и вернуться из forEach в JavaScript, мы все же можем вернуть значения с помощью внешней переменной следующим образом:

 let productDetails
products.forEach(продукт => {
    если (продукт.id === 123) {
        сведения о продукте = продукт
    }
}) 

forEach.js Обходной путь для возврата значения из forEach

Скопировано в буфер обмена!

Здесь мы, по сути, устанавливаем переменную вне цикла forEach для одного из элементов на основе идентификатора. Учитывая правильное условие внутри оператора if , мы можем получить и «вернуть» правильное значение. Однако это можно переписать лучше. Вот пять различных альтернатив, которые вы можете использовать, когда вам нужно отказаться от forEach .

Хотите улучшить свои навыки? Ознакомьтесь с нашим интерактивным курсом, чтобы освоить JavaScript от начала до конца.


Использование Array.find

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

 // Это вернет продукт с идентификатором 1
products.find(product => product.id === 1)
// Даже если у нас может быть несколько товаров со скидкой
// это вернет только первое совпадение
products.find(product => product.onSale)
// Это вернет значение undefined
products.find(product => product.id === 'invalid') 

find.js Возвращает элемент с заданным предикатом

Скопировано в буфер обмена!

В первом примере возвращается один объект, поскольку каждый идентификатор уникален. Но во втором случае у нас может быть несколько товаров в продаже, но мы все равно получим только первый, прошедший тест. Если совпадений нет, метод find просто возвращает undefined .


Использование Array.findIndex

Аналогичное, но немного отличающееся решение для

find использует метод findIndex . Если вам нужно вернуть индекс элемента внутри массива, вы можете использовать метод findIndex . Это вернет индекс элемента, если он найден. Если элемент с предикатом не найден, возвращается -1.

 // Это вернет 2
[1, 2, 3].findIndex(число => число === 3)
// Это вернет -1
[1, 2, 3].findIndex(число => число === 4) 

findIndex.js Возвращает индекс элемента или -1, если элемент не найден

Скопировано в буфер обмена!

Хотите улучшить свои навыки? Ознакомьтесь с нашим интерактивным курсом, чтобы освоить JavaScript от начала до конца.


Использование Array.

some для возврата True или False

Если вам нужно выйти из цикла и вернуть логическое значение, мы можем использовать метод some . В отличие от find , где мы ожидаем, что элемент будет возвращен из массива, some возвращает либо true

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

 // У нас есть некоторые продукты, которые продаются со скидкой, так что мы верим
products.some(product => product.onSale)
// Ни один из элементов не меньше 0, поэтому мы возвращаем false
[1, 2, 3].some(item => item <0)
 

some.js Возвращает значение true или false, если хотя бы один элемент соответствует предикату.

Скопировано в буфер обмена!

В первом примере мы возвращаем true , поскольку нас интересует только наличие хотя бы одного товара в продаже. Аналогично, во втором примере нас интересует только, есть ли хотя бы один элемент ниже 0. Поскольку ни один из них не ниже 0, метод возвращает 9.0003 ложь .


Использование Array.every для проверки каждого элемента. Но вместо того, чтобы проверять, проходит ли предикат один элемент, он возвращает

true
только в том случае, если все элементы проходят тест. Давайте посмотрим на пример.

 // Выдает false
products.every(product => product.onSale)
// Это дает истину
products.every(product => product.name) 

every.js Возвращает true, если все элементы проходят предикат. В противном случае возвращается false

Скопировано в буфер обмена!

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

Хотите улучшить свои навыки? Ознакомьтесь с нашим интерактивным курсом, чтобы освоить JavaScript от начала до конца.


Использование обычных циклов

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

break и continue . В приведенном ниже примере мы используем обычный цикл for , for... of и while , чтобы продемонстрировать, как прерваться, когда выражение истинно .

 константный массив = [1, 2, 3]
// Использование цикла for
for (пусть я = 0; я <массив.длина; я++) {
    если (массив [i] === 2) {
        перерыв
    }
    console.log(массив[i])
}
// Использование цикла for...of
for (константный элемент массива) {
    если (элемент === 2) {
        перерыв
    }
    console.log(элемент)
}
// Использование цикла while
пусть я = 0
в то время как (я <массив.длина) {
    если (массив [i] === 3) {
        перерыв
    }
    console. log(я)
    я++
} 

Использование цикла for, for...of и while для прерывания

Скопировано в буфер обмена!

Если вы хотите узнать больше и о других методах работы с массивами, таких как map , filter или reduce , обязательно ознакомьтесь с нашей статьей ниже.

Сила функций массивов высшего порядка

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

Как сломать цикл forEach в JavaScript

Блог / Javascript

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

Уилл Мэйгер

03 сентября 2021 г.

Статья

В этом посте мы расскажем, как сломать цикл JavaScript forEach с минимальным количеством технического жаргона, чтобы у вас было все, что вам нужно, прямо здесь, без необходимости искать дальше!

Невозможно прервать цикл forEach JavaScript в обычном смысле, так что же делать вместо этого?

В этом посте мы рассмотрим все, что вам нужно знать о том, как сломать цикл JavaScript forEach, а также альтернативы.

Начнем!

Если вам нужно остановить или прервать цикл JavaScript forEach, вам, вероятно, не следует использовать цикл forEach, вместо этого попробуйте использовать либо цикл for, либо Array.prototype.some, которые мы рассмотрим далее. подробности позже в посте.

Array.prototype.forEach предназначен для однократного перебора каждого элемента в массиве, предоставляя вам элемент массива, индекс и полный массив в обратном вызове, который вы предоставляете.

Из-за этого просто вырваться из него невозможно.

Если вы попытаетесь использовать оператор break в цикле forEach, вы получите сообщение об ошибке «Uncaught SyntaxError: Illegal break operator», что ожидается, поскольку вы можете использовать оператор break только внутри прямой области действия цикла, а не функция (даже если функция находится внутри цикла).

Вот пример ошибки:

 [1, 2, 3].forEach(a => {
  console.log(а)
  перерыв
})
// Uncaught SyntaxError: Недопустимый оператор break 

При всем сказанном у нас есть несколько вариантов того, как воспроизвести разрыв в цикле JavaScript forEach, если вам все еще нужно найти способ разорвать цикл forEach.

Как разорвать цикл foreach JavaScript с помощью исключения

Один из вариантов — создать исключение с обратным вызовом, который вы передаете в функцию Array.prototype.forEach.

Сделав это, вы вызовете ошибку, которая остановит все процессы в вашем приложении JavaScript.

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

Прежде чем мы перейдем к примеру, это действительно не идеально, и, как я уже говорил в начале, если вам нужно выйти из цикла, лучший вариант — не использовать forEach и вместо этого использовать цикл for для прерывания или метод Array.prototype.some.

Вот пример использования выдачи ошибки для прерывания цикла foreach в JavaScript:

 const breakFE = () => {
  выдать новую ошибку ("BREAK_FE")
}
константа handleBreakFEError = e => {
  если (электронное сообщение !== "BREAK_FE") {
    бросить е
  } еще {
    console. log("javascript foreach break!")
  }
}
пытаться {
  [1, 2, 3].forEach(item => {
    если (элемент > 1) {
      разбитьFE()
    }
    console.log(элемент)
  })
} поймать (е) {
  дескрипторBreakFEError(e)
}
// 1
// javascript foreach break! 

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

Вот как это могло бы выглядеть:

 Array.prototype.forEachWithBreak = function(callback) {
  константа breakFE = () => {
    выдать новую ошибку ("BREAK_FE")
  }
  константа handleBreakFEError = e => {
    если (электронное сообщение !== "BREAK_FE") {
      бросить е
    } еще {
      console.log("javascript foreach break!")
    }
  }
  пытаться {
    this.forEach((...args) => обратный вызов(...args, breakFE))
  } поймать (е) {
    дескрипторBreakFEError(e)
  }
}
[1, 2, 3].forEachWithBreak((item, index, arr, breakFE) => {
  console.log(элемент, индекс)
  разбитьFE()
})
// 1 0
// javascript foreach break! 

Как разорвать цикл forEach в JavaScript с помощью оператора if и вернуть результат

На самом деле вы не можете «разорвать» цикл forEach в JavaScript с помощью оператора if, потому что он по-прежнему будет выполнять все итерации в вашем массиве.

Но вы можете значительно сократить объем работы, выполняемой на каждой итерации.

Если вы выполняете большое количество вычислений на каждой итерации цикла forEach, то, хотя это и не идеально, вы можете использовать оператор if, чтобы смягчить выполнение этой работы, что немного похоже на вызов continue на каждой итерации.

Вот пример использования оператора if для пропуска вычислений в цикле forEach:

 let breakFe = false;
[1, 2, 3].forEach(item => {
  если (элемент > 1) {
    возвращаться
  }
  console.log(элемент)
}) 

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

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

Альтернативы JavaScript forEach break

Есть несколько вариантов, которые мы можем использовать в качестве альтернатив циклу foreach в JavaScript, и это лучшие решения, если вам нужно выйти из цикла forEach.

Использование цикла for в качестве альтернативы циклу forEach для прерывания

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

У меня есть полный пост о том, как выйти из цикла for здесь.

Вот пример того, как вы можете использовать цикл for для прерывания цикла:

 const myArray = [1, 2, 3];
for (пусть я = 0; я < myArray.length; я += 1) {
  константный элемент массива = мой массив [i]
  если (Элементмассива > 1) {
    перерыв
  }
  console.log(элемент_массива, я, мой массив)
} 

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

Использование цикла while в качестве альтернативы циклу forEach для прерывания

Цикл while, по сути, имеет тот же принцип, что и цикл for, за исключением того, что вы не определяете индекс в области действия цикла while.

Вот пример того, как вы можете использовать цикл while в качестве альтернативы циклу forEach для разрыва:

 const myArray = [1, 2, 3];
пусть индекс = 0;
в то время как (индекс < myArray.length) {
  константный элемент массива = мой массив [индекс]
  если (Элементмассива > 1) {
    перерыв
  }
  console.log(элемент_массива, индекс, мой массив)
  индекс += 1
} 
Использование Array.prototype.some в качестве альтернативы циклу forEach для прерывания

Последней альтернативой, которую вы можете использовать для цикла forEach для выполнения своего рода разрыва, является метод Array.prototype.some.

Вы по-прежнему не сможете вызвать оператор break из него, но вместо этого вы сможете вернуть логическое значение из обратного вызова, которое цикл some будет использовать в качестве индикатора прекращения повторения элементов массива.

Первоначальная цель метода Array.prototype.some — узнать, существует ли элемент в массиве, если да, то метод вернет true, если нет, то вернет false.

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

Вот пример использования метода some для разрыва цикла:

 [1, 2, 3].some(a => {
  console.log(а)
  вернуть истину
})
// 1
// true 

Summary

Подытоживая этот пост в нескольких словах, если вам нужно выйти из JavaScript Array.prototype.forEach, вам не следует использовать JavaScript Array.prototype.forEach, а вместо этого следует использовать либо цикл for, либо метод Array.prototype.some.

Здесь мы рассказали, как сломать цикл foreach в JavaScript. Если вы хотите узнать больше об этом, обязательно ознакомьтесь с другими моими сообщениями!

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

Это займет всего 1-3 минуты , так что вам нечего терять, проверьте свои способности прямо сейчас.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *