JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのArray.entries()メソッドとは？使い方を実例付きで解説

Array.entries()メソッドとは

JavaScriptのArray.entries()メソッドは、配列の各インデックス（キー）とその位置にある要素（値）のペアを格納した、新しいArray Iteratorオブジェクトを返します。このイテレータをfor...ofループなどで反復処理することで、インデックスと値をセットで簡単に取り出すことができます。

構文

array.entries();

引数は不要で、呼び出し元の配列に対してそのまま使用します。元の配列自体は変更されません。

使用例

次の例では、elements.entries()で取得したイテレータを変数に代入し、for...ofループを使って各要素へ順番にアクセスしています。ループの中で、各要素のキー（インデックス）と値のペアを出力します。

<html>
<body>
<script>
   var elements = ["Helium", "Neon", "Krypton", "Xenon", "Radon"];
   var iterator = elements.entries();
   for (let e of iterator) {
      document.write(e);
      document.write("</br>");
   }
</script>
</body>
</html>

実行結果

0,Helium
1,Neon
2,Krypton
3,Xenon
4,Radon

分割代入と組み合わせた書き方

for...ofループ内で分割代入（Destructuring）を使うと、キーと値をそれぞれ独立した変数として受け取ることができ、コードがさらに読みやすくなります。

var elements = ["Helium", "Neon", "Krypton", "Xenon", "Radon"];

for (const [index, value] of elements.entries()) {
   console.log(`インデックス ${index} : ${value}`);
}

まとめ

  • Array.entries()は、インデックスと値のペアを持つArray Iteratorオブジェクトを返す。
  • for...ofループやスプレッド構文と組み合わせて使うのが一般的。
  • 元の配列は変更されないため、安全に利用できる。
  1. JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

    JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。 popメソッドの構文 popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。 let frozen = [ Anna, Elsa, Olaf, Kristoff, Sven ]

  2. JavaScriptのArray.entries()メソッドとは？使い方とサンプルコードを解説

    Array.entries()メソッドとはJavaScript の Array.entries() メソッドは、配列内の各要素を「インデックス（キー）と値」のペアとして格納した、新しい Array Iterator オブジェクトを返します。このオブジェクトは反復可能（iterable）であるため、for...of ループやスプレッド構文などを使って、要素を一つずつ取り出すことができます。基本構文arr.entries()サンプルコード以下は、Array.entries() メソッドを使用して、配列の要素をキー／値ペアとして表示するコード例です。<!DOCTYPE html> <