情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

ECMAScript 6の新機能(18)バッファ/型付き配列

バッファ

ECMAScript 6でバッファが追加され、ArrayBufferクラスとして提供されています。

バッファはバイナリデータを格納するのに使用します。

そして、バッファに格納されているバイナリデータは型付き配列かDataViewクラスのインスタンスによりアクセスします

コンストラクタ

第1引数にバッファの長さをバイト単位で指定します。

バッファの全てのバイトの値は0となります。

C:\work\node>node
> var ab = new ArrayBuffer(16)
undefined
> ab
ArrayBuffer { byteLength: 16 }

byteLength

バッファの長さを返します。

> ab.byteLength
16

isView

オブジェクトがバッファにアクセスするためのものであるかチェックします。

第1引数にオブジェクトを指定します。

オブジェクトが型付き配列かDataViewクラスのインスタンスである場合にはtrueを返し、そうでない場合にはfalseを返します。

slice

バッファのバイトの範囲を指定して新しいバッファを作成します。

第1引数に範囲の開始インデックスを指定します。

第2引数に範囲の終了インデックスに1を加えたものを指定します。

返り値として新しいバッファが得られます。

> ab.slice(4, 8)
ArrayBuffer { byteLength: 4 }

型付き配列

ECMAScript 6で型付き配列が追加され、主に下のようなクラスとして提供されています。

  • Int8Arrayクラス・・・要素が1バイトの符号付き整数である配列です。
  • Uint8Arrayクラス・・・要素が1バイトの符号なし整数である配列です。
  • Int16Arrayクラス・・・要素が2バイトの符号付き整数である配列です。
  • Uint16Arrayクラス・・・要素が2バイトの符号なし整数である配列です。
  • Int32Arrayクラス・・・要素が4バイトの符号付き整数である配列です。
  • Uint32Arrayクラス・・・要素が4バイトの符号なし整数である配列です。
  • Float32Arrayクラス・・・要素が4バイトの浮動小数点数である配列です。
  • Float64Arrayクラス・・・要素が8バイトの浮動小数点数である配列です。

型付き配列は内部でバッファを保持し、バッファのデータを特定の数値型の配列と見做してアクセスします。

数値がオーバーフローやアンダーフローした場合には循環します(たとえば、1バイトの符号付き整数の場合、128-128となり、-129127となります)。

また、型付き配列はプラットフォームが採用しているのと同じエンディアンを使用します。

BYTES_PER_ELEMENT

型付き配列の1つの要素が何バイトのデータで表されるかを表します。

> Int8Array.BYTES_PER_ELEMENT
1
> Uint8Array.BYTES_PER_ELEMENT
1
> Int16Array.BYTES_PER_ELEMENT
2
> Uint16Array.BYTES_PER_ELEMENT
2
> Int32Array.BYTES_PER_ELEMENT
4
> Uint32Array.BYTES_PER_ELEMENT
4
> Float32Array.BYTES_PER_ELEMENT
4
> Float64Array.BYTES_PER_ELEMENT
8

コンストラクタ

型付き配列を表すクラスのコンストラクタは5種類あります。

  • 引数を何も指定しなかった場合には空の型付き配列が作成されます。
> new Int32Array()
Int32Array [  ]
  • 第1引数に整数を指定した場合には指定した長さの型付き配列が作成されます。全ての要素の値は0となります。
> new Int32Array(8)
Int32Array [ 0, 0, 0, 0, 0, 0, 0, 0 ]
  • 第1引数にバッファを指定した場合にはそのバッファを使って型付き配列が作成されます。第2引数にバッファの何バイト目からのデータを使用するか(オフセット)を指定します。第3引数に配列の長さを指定します。第3引数は指定しなくても構いません。
> new Int32Array(new ArrayBuffer(32), 16)
Int32Array [ 0, 0, 0, 0 ]
  • 第1引数に型付き配列を指定した場合にはその型付き配列を基にして型付き配列が作成されます。
> new Int32Array(new Int32Array(new ArrayBuffer(32), 16))
Int32Array [ 0, 0, 0, 0 ]
  • 第1引数に配列や配列に似たオブジェクトを指定した場合にはその配列や配列に似たオブジェクトを基にして型付き配列が作成されます。
> new Uint8Array([100, 200, 300, 400])
Uint8Array [ 100, 200, 44, 144 ]

of

引数に指定した値を順番に使って型付き配列を作成します。

第1引数以降に値を指定します。

> Uint8Array.of(100, 200, 300, 400)
Uint8Array [ 100, 200, 44, 144 ]

from

引数に指定したイテラブルを使って型付き配列を作成します。

第1引数にイテラブルを指定します。

第2引数にイテラブルの要素を変換する関数を指定します。この引数は指定しなくても構いません。この関数の第1引数は変換前の要素であり、返り値として変換後の要素を返すようにします。

第2引数が指定された場合にはイテラブルの全ての要素を変換関数を使って変換し、変換後の要素を順番に使って型付き配列を作成します。指定されなかった場合にはイテラブルの全ての要素をそのまま順番に使って作成します。

> Uint8Array.from([100, 200, 300, 400], function (x) { return x / 2; })
Uint8Array [ 50, 100, 150, 200 ]

buffer

バッファを返します。

> var ta = new Int32Array([100, 200, 300, 400])
undefined
> ta.buffer
ArrayBuffer { byteLength: 16 }

byteLength

バッファの長さを返します。

> ta.byteLength
16

byteOffset

バッファのオフセットを返します。

> ta.byteOffset
0

set

配列や別の型付き配列の要素の値をコピーします。

第1引数に配列や型付き配列を指定します。配列である場合には全ての要素を一旦数値に変換してからコピーします。

第2引数にコピー先の型付き配列のコピーの開始インデックスを指定します。

> ta
Int32Array [ 100, 200, 300, 400 ]
> ta.set([777, 888], 1)
undefined
> ta
Int32Array [ 100, 777, 888, 400 ]

subarray

型付き配列の要素の範囲を指定して新しい型付き配列を作成します。

第1引数に範囲の開始インデックスを指定します。

第2引数に範囲の終了インデックスに1を加えたものを指定します。

返り値として新しい型付き配列が得られます。

> ta
Int32Array [ 100, 777, 888, 400 ]
> ta.subarray(2, 3)
Int32Array [ 888 ]

配列と同様の関数

型付き配列は配列と同様の下のような関数を有します。

  • copyWithin
  • entries
  • every
  • fill
  • filter
  • find
  • findIndex
  • forEach
  • indexOf
  • join
  • keys
  • lastIndexOf
  • length
  • map
  • reduce
  • reduceRight
  • reverse
  • slice
  • some
  • sort
  • toLocaleString
  • toString
  • values

配列との比較

  • 配列には穴(値が設定されていない要素)が存在する可能性がありますが、型付き配列には穴は存在しません。
  • 配列はイテラブルですが、型付き配列もイテラブルです。

DataView

DataViewクラスのインスタンスは内部でバッファを保持し、バッファのデータを任意のインデックスから任意の数値型の値と見做してアクセスします。

コンストラクタ

第1引数にバッファを指定します。

第2引数にオフセットを指定します。

第3引数にデータの長さをバイト単位で指定します。

> var dv = new DataView(new Int32Array([100, 200, 300, 400]).buffer, 4, 8)
undefined
> dv
DataView {
  byteLength: 8,
  byteOffset: 4,
  buffer: ArrayBuffer { byteLength: 16 } }

buffer

バッファを返します。

> dv.buffer
ArrayBuffer { byteLength: 16 }

byteLength

バッファの長さを返します。

> dv.byteLength
8

byteOffset

バッファのオフセットを返します。

> dv.byteOffset
4

値の取得

任意のインデックスから任意の数値型の値を取得するために下のような関数が提供されています。

  • getInt8関数
  • getUint8関数
  • getInt16関数
  • getUint16関数
  • getInt32関数
  • getUint32関数
  • getFloat32関数
  • getFloat64関数

第1引数にオフセットを指定します。

第2引数にリトルエンディアンかビッグエンディアンかを真偽値として指定します。リトルエンディアンの場合にはtrueを指定し、ビッグエンディアンの場合にはfalseを指定します。

返り値として数値が得られます。

> dv.getInt32(0, true)
200
> dv.getInt32(1, true)
738197504
> dv.getInt32(2, true)
19660800
> dv.getInt32(3, true)
76800
> dv.getInt32(4, true)
300
> dv.getInt32(0, false)
-939524096
> dv.getInt32(4, false)
738263040
> dv.getUint32(0, false)
3355443200
> dv.getUint32(1, false)
44
> dv.getUint32(2, false)
11265
> dv.getUint32(3, false)
2883840
> dv.getInt8(0, false)
-56
> dv.getInt8(1, false)
0
> dv.getInt8(2, false)
0
> dv.getInt8(3, false)
0
> dv.getInt8(4, false)
44
> dv.getUint8(0, false)
200
> dv.getUint8(1, false)
0
> dv.getUint8(2, false)
0
> dv.getUint8(3, false)
0
> dv.getUint8(4, false)
44

値の設定

任意のインデックスから任意の数値型の値を設定するために下のような関数が提供されています。

  • setInt8関数
  • setUint8関数
  • setInt16関数
  • setUint16関数
  • setInt32関数
  • setUint32関数
  • setFloat32関数
  • setFloat64関数

第1引数にオフセットを指定します。

第2引数に数値を指定します。

第3引数にリトルエンディアンかビッグエンディアンかを真偽値として指定します。リトルエンディアンの場合にはtrueを指定し、ビッグエンディアンの場合にはfalseを指定します。

> dv.getInt32(0, true)
200
> dv.setInt32(0, 777, true)
undefined
> dv.getInt32(0, true)
777
> dv.getInt8(0, true)
9
> dv.getInt8(1, true)
3
> dv.getInt8(2, true)
0
> dv.getInt8(3, true)
0
> dv.setInt8(0, 0, true)
undefined
> dv.setInt8(1, 1, true)
undefined
> dv.setInt8(2, 2, true)
undefined
> dv.setInt8(3, 3, true)
undefined
> dv.getInt8(0, true)
0
> dv.getInt8(1, true)
1
> dv.getInt8(2, true)
2
> dv.getInt8(3, true)
3
pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ecmascript 2015, ecmascript 6, Javascript