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

JavaScriptのTypedArray.entries()関数とは？使い方とサンプルコードを解説

TypedArray.entries()関数とは

entries()は、TypedArray（型付き配列）オブジェクトが持つメソッドの一つで、その型付き配列のキー（インデックス）と値（要素）のペアを順番に取り出せる新しいArray Iteratorオブジェクトを返します。

このイテレーターを利用することで、配列内の各要素だけでなく、その要素が配列のどの位置（インデックス）にあるのかも同時に取得できます。戻り値の各要素は「[インデックス, 値]」という形式の配列になっています。

構文

typedArray.entries()

このメソッドは引数を受け取らず、呼び出すだけで新しいイテレーターオブジェクトを返します。

基本的な使用例

次の例では、Int32Arrayを作成し、entries()メソッドで取得したイテレーターからnext()メソッドを呼び出して、各インデックスと要素のペアを1つずつ表示しています。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var int32View = new Int32Array([21, 64, 89, 65, 33, 66, 87, 55]);
      document.write("Contents of the typed array: "+int32View);
      document.write("<br>");
      var it = int32View.entries();
      for(i=0; i<int32View.length; i++) {
         document.write(it.next().value);
         document.write("<br>");
      }
   </script>
</body>
</html>

実行結果

Contents of the typed array: 21,64,89,65,33,66,87,55
0,21
1,64
2,89
3,65
4,33
5,66
6,87
7,55

出力を見ると、各行が「インデックス, 値」という形式になっていることが分かります。たとえば最初の行の「0,21」は、「インデックス0には21という値が格納されている」ことを意味しています。

イテレーターが末尾に達した場合の挙動

イテレーターがすでに配列の末尾まで進んだ状態で、さらにnext()メソッドを呼び出して次の要素へアクセスしようとすると、戻り値はundefinedになります。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var int32View = new Int32Array([21, 64, 89, 65, 33, 66, 87, 55]);
      document.write("Contents of the typed array: "+int32View);
      document.write("<br>");
      var it = int32View.entries();
      for(i=0; i<int32View.length; i++) {
         document.write(it.next().value);
         document.write("<br>");
      }
      document.write(it.next().value);
   </script>
</body>
</html>

実行結果

Contents of the typed array: 21,64,89,65,33,66,87,55
0,21
1,64
2,89
3,65
4,33
5,66
6,87
7,55
undefined

ループで8つの要素をすべて取得した後に、もう一度it.next().valueを呼び出しているため、最終行にundefinedが出力されています。このことから、entries()のイテレーターは配列の範囲外を読み取ろうとしてもエラーにはならず、単にundefinedを返す仕組みになっていることが分かります。

補足：for...ofループとの組み合わせ

entries()が返すイテレーターは反復可能（iterable）なオブジェクトなので、for...ofループと組み合わせると、より簡潔で読みやすいコードを書くことができます。

const int32View = new Int32Array([21, 64, 89]);
for (const [index, value] of int32View.entries()) {
  console.log(index, value);
}

なお、entries()メソッドは通常のArrayにも同様に用意されており、どちらの配列でも同じ考え方でインデックスと値のペアを扱えます。

  1. JavaScript TypedArray values()メソッドの使い方とサンプルコード解説

    TypedArray.values()メソッドとはTypedArrayオブジェクトが持つvalues()メソッドは、型付き配列（typed array）に格納されている各要素の値を保持するイテレーターオブジェクトを返します。返されたイテレーターオブジェクトに対してnext()メソッドを呼び出すたびに、{ value: 値, done: 真偽値 }という形式のオブジェクトが1つずつ返され、配列内の要素を先頭から順番に取り出すことができます。すべての要素を取り出し終えると、doneプロパティがtrueになります。構文values()メソッドの基本的な構文は以下の通りです。typedArray.va

  2. JavaScriptで配列を関数の引数として渡す方法【apply()とスプレッド構文の比較】

    JavaScriptでは、配列の各要素を関数の個別の引数として渡したい場面がよくあります。本記事では、従来のapply()メソッドを使う方法と、ES6（ECMAScript 2015）で導入されたスプレッド構文（...）を使うモダンな方法を、コード例とともにわかりやすく解説します。 従来の方法：apply()とnullを使った配列の受け渡し かつては、配列を関数の引数として展開して渡すためにapply()メソッドが使われていました。このとき、thisの参照先としてnullを指定するのが一般的でした。 しかし、本来不要なnullを引数に含めるため、コードの意図が分かりにくくなり、可読性が損なわれ