JavaScriptの配列(Array) entriesメソッドの使い方

JavaScriptのArray.entries()について記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptの配列(Array)とは？
JavaScriptのArray.entries()概要
JavaScriptのArray.entries()を使ったサンプルコードの紹介
JavaScriptの他のArrayメソッドについて

JavaScriptの配列(Array)とは？

JavaScriptの配列は、異なる要素を格納するために使用される単一の変数です。
要素のリストを格納し、単一の変数でアクセスしたい場合によく使用されています。
配列が複数の変数への参照である他の多くのプログラミング言語とは異なり、JavaScriptでは、配列は複数の要素を格納する単一の変数です。

小難しい説明になりますが、JavaScriptでの配列処理は非常に多くの処理が出来るということです。そして、JavaScriptを使ってコード、システムを作っていくうえで配列処理の基本動作、JSが持っている関数を理解しておくことは非常に重要だと個人に考えています。

開発の現場でも配列処理を正しくそして深く理解していることが求められます。

JSの配列処理はES5,ES6などでアップデートが行われており、本来なら簡潔なコードで記載できるにもかかわらず、冗長なコードで記載してしまったがゆえにバグを発生してしまったり、予期せぬ動作を配列処理が起こしてしまうといったことが起こっていたりもします。

配列処理は頻繁に使用し、そして、もっともバグを生みやすい部分だとも思っているので個人的にJavaScriptで一番重要だと筆者は考えています。

次に本題の説明に移ります。

JavaScriptのArray.entries()概要

Array.entries()は、配列内の各要素をキー/値ペアとして返すメソッドです。

構文、使い方

構文：array.entries()

使い方：Array.entries()メソッドは、配列の各要素に対応するインデックスと値を含む新しいイテレーターオブジェクトを返します。

引数について

Array.entries()は引数を取りません。

返り値について

Array.entries()は、配列のインデックスと要素を含む配列を返します。

このメソッドを利用した便利なテクニック

Array.entries()を使うと、配列内のインデックスと要素を組み合わせた配列を作成できます。

これを使うと、配列内の要素を繰り返し処理する際に便利です。

現場で実際にどのように使われているか

現場では、配列の要素を反復処理するために使用されます。

例えば、以下のようなコードを使用して、配列内のすべての要素を反復処理することができます。

const array = ['a', 'b', 'c'];

const entries = array.entries();

for (const [index, element] of entries) {
console.log(`${index}: ${element}`);
}

const array = ['a', 'b', 'c'];

const entries = array.entries();

for (const [index, element] of entries) {

console.log(`${index}: ${element}`);

}

// 0: a
// 1: b
// 2: c

JavaScriptのArray.entries()と一緒によく使われる処理

Array.forEach()を使用して、Array.entries()で取得した各要素を処理することがよくあります。

なぜなら、Array.entries()は、各要素をインデックスと値のペアとして取得するため、それらを処理するのに便利であるからです。

使用する上での注意点

– Array.entries()は、配列のインデックスと値の組み合わせを返すため、配列の要素数とインデックスの数が一致している必要があります。
– 配列の要素がundefinedの場合、Array.entries()は空の配列を返します。

JavaScriptのArray.entries()と似た処理のJSメソッド、違い

keys()メソッドと似ていますが、下記違いがあります。

Array.keys()：配列のインデックスを返します。
Array.entries()：配列のインデックスと値を返します。

JavaScriptのArray.entries()を使ったサンプルコードの紹介

Array.entries()のサンプルコード1

let array1 = ['a', 'b', 'c'];
let iterator1 = array1.entries();

console.log(iterator1.next().value);

let array1 = ['a', 'b', 'c'];

let iterator1 = array1.entries();

console.log(iterator1.next().value);

[0, ‘a’]

Array.entries()のサンプルコード2

let array2 = ['a', 'b', 'c'];
let iterator2 = array2.entries();

for (let e of iterator2) {
  console.log(e);
}

let array2 = ['a', 'b', 'c'];

let iterator2 = array2.entries();

for (let e of iterator2) {

console.log(e);

}

[0, ‘a’] [1, ‘b’] [2, ‘c’]

Array.entries()のサンプルコード3

let array3 = ['a', 'b', 'c'];
let iterator3 = array3.entries();

for (let e of iterator3) {
  console.log(e[0], e[1]);
}

let array3 = ['a', 'b', 'c'];

let iterator3 = array3.entries();

for (let e of iterator3) {

console.log(e[0], e[1]);

}

0 a 1 b 2 c

JavaScriptの他のArrayメソッドについて

JavaScriptの配列のメソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名	機能	リンク
Array.concat()	既存の配列に新しい配列または値を連結するための関数	JavaScriptの配列(Array)のconcatメソッドの使い方
Array.constructor	配列オブジェクトに定義されているプロパティ	JavaScriptの配列(Array)のconstructorプロパティの使い方
Array.copyWithin()	配列内の要素を、同じ配列内の別の位置にコピーする関数	JavaScriptの配列(Array)のcopyWithinメソッドの使い方
Array.entries()	配列内の要素に対応するインデックスと要素のペアを含む新しいイテレータオブジェクトを生成する関数	JavaScriptの配列(Array)のentriesメソッドの使い方
Array.every()	配列内のすべての要素がテスト関数を満たすかどうかを判定する関数	JavaScriptの配列(Array)のeveryメソッドの使い方
Array.fill()	配列内の全てまたは一部の要素を指定の値で埋める関数	JavaScriptの配列(Array)のfillメソッドの使い方
Array.filter()	配列内の要素をテスト関数に基づいてフィルタリングする関数	JavaScriptの配列(Array)のfilterメソッドの使い方
Array.find()	配列内の要素から最初にテスト関数を満たす要素を検索する関数	JavaScriptの配列(Array)のfindメソッドの使い方
Array.findIndex()	配列内の要素から最初にテスト関数を満たす要素のインデックスを検索する関数	JavaScriptの配列(Array)のfindIndexメソッドの使い方
Array.forEach()	配列内のすべての要素に対して処理を実行する関数	JavaScriptの配列(Array)のforEachメソッドの使い方
Array.from()	配列風オブジェクトや反復可能なオブジェクトから新しい配列を生成する関数	JavaScriptの配列(Array)のfromメソッドの使い方
Array.includes()	配列内に特定の要素が含まれているかどうかを判定する関数	JavaScriptの配列(Array)のincludesメソッドの使い方
Array.indexOf()	配列内の指定された要素の最初のインデックスを検索する関数	JavaScriptの配列(Array)のindexOfメソッドの使い方
Array.isArray()	指定されたオブジェクトが配列であるかどうかを判定する関数	JavaScriptの配列(Array)のisArrayメソッドの使い方
Array.join()	配列内の要素を文字列に連結する関数	JavaScriptの配列(Array)のjoinメソッドの使い方
Array.keys()	配列内の要素に対応するインデックスを含む新しいイテレータオブジェクトを生成する関数	JavaScriptの配列(Array)のkeysメソッドの使い方
Array.lastIndexOf()	配列内の指定された要素の最後のインデックスを検索する関数	JavaScriptの配列(Array)のlastIndexOfメソッドの使い方
Array.length	配列内の要素数を表すプロパティ	JavaScriptの配列(Array)のlengthプロパティの使い方
Array.map()	配列内のすべての要素に対して関数を適用し、結果を含む新しい配列を生成する関数	JavaScriptの配列(Array)のmapメソッドの使い方
Array.pop()	配列内の最後の要素を取り除き、その要素を返す関数	JavaScriptの配列(Array)のpopメソッドの使い方
Array.prototype	配列オブジェクトのプロトタイプオブジェクト	JavaScriptの配列(Array)のprototypeプロパティの使い方
Array.push()	配列内の最後に要素を追加する関数	JavaScriptの配列(Array)のpushメソッドの使い方
Array.reduce()	配列内の要素をシンプルな値（通常は数値）に結合する関数	JavaScriptの配列(Array)のreduceメソッドの使い方
Array.reduceRight()	配列内の要素を右から左に向かって結合する関数	JavaScriptの配列(Array)のreduceRightメソッドの使い方
Array.reverse()	配列内の要素の順番を反転する関数	JavaScriptの配列(Array)のreverseメソッドの使い方
Array.shift()	配列内の最初の要素を取り除き、その要素を返す関数	JavaScriptの配列(Array)のshiftメソッドの使い方
Array.slice()	配列内の一部を切り出して、新しい配列として返す関数	JavaScriptの配列(Array)のsliceメソッドの使い方
Array.some()	配列内の要素のいずれかが特定の条件を満たすかどうかをテストする関数	JavaScriptの配列(Array)のsomeメソッドの使い方
Array.sort()	配列内の要素をソートする関数	JavaScriptの配列(Array)のsortメソッドの使い方
Array.toString()	配列を文字列に変換する関数	JavaScriptの配列(Array)のtoStringメソッドの使い方
Array.unshift()	配列内の最初に要素を追加する関数	JavaScriptの配列(Array)のunshiftメソッドの使い方
Array.valueOf()	配列のプリミティブ値を返却	JavaScriptの配列(Array)のvalueOfメソッドの使い方