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

JavaScriptのTypedArray.copyWithin()関数の使い方を徹底解説

TypedArrayオブジェクトのcopyWithin()メソッドは、同じ型付き配列の内部で要素をコピーするための関数です。このメソッドは3つの数値を引数として受け取ります。1つ目の数値は要素のコピーを開始する位置（コピー先）のインデックスを表し、残りの2つの数値はコピー元となるデータの開始位置と終了位置のインデックスを表します。

構文

copyWithin()メソッドの基本的な構文は以下の通りです。

obj.copyWithin(target, start, end);

引数の説明

  • target： 要素をコピーする先の開始インデックス（必須）
  • start： コピー元データの開始インデックス（必須）
  • end： コピー元データの終了インデックス（省略可能）。省略した場合は配列の末尾までコピーされます。

サンプルコード①

以下の例では、Int32Arrayオブジェクトに対してcopyWithin()メソッドを使用し、インデックス0から5までの要素を、インデックス5以降の位置へコピーしています。

<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);
      int32View.copyWithin(5, 0, 5);
      document.write("<br>");
      document.write("Contents of the typed array after copy: "+int32View);
   </script>
</body>
</html>

実行結果

Contents of the typed array: 21,64,89,65,33,66,87,55
Contents of the typed array after copy: 21,64,89,65,33,21,64,89

上記の出力を見ると、コピー先のインデックス5以降の要素（66, 87, 55）が、コピー元であるインデックス0〜4の要素（21, 64, 89）で上書きされていることがわかります。なお、配列全体の長さは変わりません。

サンプルコード②（第3引数を省略した場合）

copyWithin()メソッドでは、第3引数（コピー元データの終了インデックス）を渡すことは必須ではありません。第3引数を省略した場合、コピー元の開始位置から配列の末尾までがすべてコピーされます。

<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);
      int32View.copyWithin(5, 0);
      document.write("<br>");
      document.write("Contents of the typed array after copy: "+int32View);
   </script>
</body>
</html>

実行結果

Contents of the typed array: 21,64,89,65,33,66,87,55
Contents of the typed array after copy: 21,64,89,65,33,21,64,89

補足ポイント

  • copyWithin()メソッドは元の配列を直接変更しますが、配列の長さは変更されません。コピーによって末尾を超える分のデータは切り捨てられます。
  • 引数に負の値を指定した場合、配列の末尾からの相対的な位置として解釈されます（例：-1は最後の要素を指します）。
  • コピー範囲が重なっている場合でも、正しく動作するように内部で一時的にデータが処理されます。
  1. JavaScriptのarray.includes()メソッドとは？配列に特定の要素が含まれているか判定する方法

    JavaScriptのarray.includes()メソッドは、配列の中に指定した要素が含まれているかどうかを判定するために使用します。戻り値はブール値（true / false）で、要素が見つかればtrue、見つからなければfalseを返します。 構文 array.includes(ele, start) 各パラメータの意味は以下のとおりです。 ele：検索したい要素（必須） start：検索を開始する位置（省略可能）。デフォルトは0で、配列の先頭から検索が始まります それでは、JavaScriptでarray.includes()メソッドを実際に実装してみましょう。 例1：数値の配列

  2. JavaScriptのarray.toLocaleString()関数の使い方｜配列をロケール形式の文字列に変換する方法

    array.toLocaleString()関数とはJavaScriptのarray.toLocaleString()関数は、配列の要素を文字列として返し、各要素をカンマなどロケール固有の区切り文字で連結します。引数としてロケール（言語タグ）を指定することもでき、指定した言語・地域の書式に従って文字列へ変換されます。例えば、日付オブジェクトが含まれる配列に対してこの関数を使用すると、「en-GB」や「ja-JP」などのロケールに応じた形式で日付が表示されます。ロケールを省略した場合は、実行環境のデフォルトのロケールが使用されます。主な特徴配列のすべての要素を文字列化し、区切り文字で連結して返す