forEach / break / continue

Foto Dan Meyers na Unsplash

Krátké otázky a odpovědi na smyčky standardní a funkční rozmanitosti, jejich opuštění a přeskakování iterací.

Veškerý kód níže předpokládá následující záhlaví:

const { log } = console

const oneThousandItems = () =>
  Array.from({ length: 1000 })

Otázka tedy zní:

1. for vs. forEach , plné smyčky

// 1a)
function forLoop() {
  let index = 0
  let count = 0
  for (; index < 1000; index += 1) {
    count = count + 1
  }
  log('index === ', index)
  log('count === ', count)
}

// 1b)
function usingForEach() {
  let index
  let count = 0
  oneThousandItems().forEach(
    (_, _index) => {
      index = _index
      count = count + 1
    }
  )
  log('index === ', index)
  log('count === ', count) 
}

Další na řadě, vylamování smyček:

2. for vs. some vs. every , přerušené smyčky

// 2a)
function breakLoop() {
  let index = 0
  let count = 0
  for (; index < 1000; index += 1) {
    if (index > 499) { 
      break
    }
    count = count + 1
  }
  log('index === ', index)
  log('count === ', count)
}

// 2b)
function usingSome() {
  let index
  let count = 0
  oneThousandItems().some((_, _index) => {
    index = _index
    if (index > 499) { 
      return true
    }
    count = count + 1
  })
  log('index === ', index)
  log('count === ', count)
}

// 2c)
function usingEvery() {
  let index
  let count = 0
  oneThousandItems().every((_, _index) => {
    index = _index
    count = count + 1
    if (index < 499) { 
      return true
    }
  })
  log('index === ', index)
  log('count === ', count)
}

Nakonec přeskočení na další iteraci:

3. for vs. forEach , vynechané smyčky

// 3a)
function continuedLoop() {
  let index = 0
  let count = 0
  for (; index < 1000; index += 1) {
    if (index > 249) continue 
    count = count + 1
  }
  log('index === ', index)
  log('count === ', count)
}

// 3b)
function usingForEach() {
  let index
  let count = 0
  oneThousandItems().forEach(
    (_, _index) => {
      index = _index
      if (index > 249) return 
      count = count + 1
    }
  )
  log('index === ', index)
  log('count === ', count)
}

Pokud potřebujete trochu pomoci, vytvořil jsem odpovídající interaktivní verzi článku, která nabízí některé velmi základní vizuální prvky.

Nejsem si jistý, jestli pomáhají intuitivně pochopit, co se děje, ale dávají alespoň odpovědi! Splnily vaše očekávání?