JavaScript の 様々な for 書き方

for文の書き方

最近いろいろと知ったので、様々な JavaScript の for について紹介します。

配列の中身を順次取り出す

for

const hoges = ['a', 'b', 'c']
for (let i = 0; i < hoges.length; i++) {
  console.log(hoges[i])
}

for of

const hoges = ['a', 'b', 'c']
for (const hoge of hoges) {
  console.log(hoge)
}

forEach

const hoges = ['a', 'b', 'c']
hoges.forEach((hoge) => {
  console.log(hoge)
})

配列の中のObjectの一部を取り出す

for

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (let i = 0; i < items.length; i++) {
  console.log(items[i].hoge)
}

for of

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const item of items) {
  console.log(item.hoge)
}

forEach

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach((item) => {
  console.log(item.hoge)
})

for of + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const { hoge } of items) {
  console.log(hoge)
}

forEach + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach (({hoge}) => {
  console.log(hoge)
})

for of entries() : Array.prototype.entries() + 分割代入

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const [index, { hoge }] of items.entries()) {
  console.log(hoge)
}

配列の添え字を取り出す

for

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (let i = 0; i < items.length; i++) {
  console.log(i)
}

forEach

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
items.forEach((item, index) => {
  console.log(index)
})

for of keys() : Array.prototype.keys()

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const index of items.keys()) {
  console.log(index)
}

for of entries() : Array.prototype.entries()

const items = [
  {
    hoge: 'a',
    fuga: 'b'
  },
  {
    hoge: 'a',
    fuga: 'b'
  }
]
for (const [index, item] of items.entries()) {
  console.log(index)
}

Objectの場合の備忘録

for in

const hoges = {
  hoge: 'a',
  fuga: 'b'
}
for (const item in hoges){
  console.log(item)
}

添え字の配列を取り出す Object.keys()

const hoge = ['a', 'b', 'c']
console.log(Object.keys(hoge))

KeyとValueの配列を取り出す

const items = {
  hoge: 'a',
  fuga: 'b'
}
console.log(Object.entries(items));

await async 非同期の備忘録

for await of

const asyncMethod = async () => {
  for await (const item of ['hoge', 'fuga']) {
    console.log(item);
  }
}
asyncMethod();

参考