forHver / pause / fortsæt

Foto af Dan Meyers på Unsplash

En kort Q&A om sløjfer af standard og funktionel variant, bryde ud af dem og springe gentagelser over.

Al kode nedenfor antager følgende overskrift:

const { log } = console

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

Så spørgsmålet er:

1. for vs. forEach , fuld-loops

// 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) 
}

Dernæst, udbrydning af loops:

2. for vs. some vs. every , brudte løkker

// 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)
}

Til sidst springer du til næste iteration:

3. for vs. forEach , sprang over sløjfer

// 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)
}

Hvis du har brug for lidt hjælp, har jeg lavet en tilsvarende interaktiv version af artiklen, der tilbyder nogle meget grundlæggende visuals.

Jeg er ikke sikker på, om de hjælper intuit, hvad der foregår, men de giver i det mindste svarene! Opfyldte de dine forventninger?