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

JavaScript の ArrayBuffer.slice() メソッドの使い方を解説

JavaScript の arrayBuffer.slice() メソッドは、既存の ArrayBuffer の一部をコピーして、新しい ArrayBuffer オブジェクトを返すメソッドです。コピー範囲は「開始位置（begin）」から「終了位置（end）」までで、開始位置は含まれ、終了位置は含まれません（begin 以上 end 未満）。

基本構文

arrayBuffer.slice(begin, end)
  • begin：コピーを開始するインデックス（この位置は含まれます）。負の値を指定すると、バッファ末尾からの相対位置として扱われます。
  • end：コピーを終了するインデックス（この位置自体は含まれません）。省略した場合はバッファの末尾までが対象になります。

以下に、arrayBuffer.slice() メソッドを使用した具体的なコード例を示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
      font-size: 18px;
      font-weight: 500;
      color: red;
}
.result {
    color: black;
}
</style>
</head>
<body>
<h1>JavaScript arrayBuffer.slice() メソッド</h1>
<div class="sample">元の配列バッファ：</div>
<div class="result">スライス後の配列バッファ：</div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、配列バッファをスライスしてコピーを作成します
</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
int32View[0] = 11;
int32View[1] = 22;
int32View[2] = 33;
int32View.forEach((item) => {
    sampleEle.innerHTML += item + " , ";
});
const slicedBuffer = new Int32Array(buffer.slice(0, 8));
document.querySelector(".Btn").addEventListener("click", () => {
    slicedBuffer.forEach((item) => {
       resultEle.innerHTML += item + " , ";
    });
});
</script>
</body>
</html>

実行結果

ページを表示すると、16 バイトの ArrayBuffer に対して Int32Array ビューを作成し、先頭から「11」「22」「33」という値が格納されていることが確認できます。Int32Array は 1 要素あたり 4 バイトを使用するため、3 要素で合計 12 バイトが使用されます。

続いて「ここをクリック」ボタンをクリックすると −

buffer.slice(0, 8) によって、元のバッファの先頭から 8 バイト分（Int32Array としては 2 要素分）がコピーされ、「11」「22」の値を持つ新しい配列バッファが表示されます。

ポイントまとめ

  • slice() メソッドは元のバッファを変更せず、新しいバッファを返します。
  • 返されるのは生の ArrayBuffer なので、実際に値を読み書きするには Int32Array などの「型付き配列ビュー」でラップする必要があります。
  • 範囲外のインデックスを指定してもエラーにはならず、自動的に有効な範囲に調整されます。
  1. JavaScriptのgetTime()メソッドとは？使い方とサンプルコードを解説

    getTime()メソッドとはJavaScriptのgetTime()メソッドは、1970年1月1日0時0分0秒（UTC、いわゆる「エポック」）から経過した時間をミリ秒単位で返すDateオブジェクトのメソッドです。この値はUnixタイムスタンプとしても知られており、日付の比較や計算、有効期限の管理など、さまざまな場面で活用されています。以下に、getTime()メソッドを使った具体的なサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset=

  2. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO