DataView in ECMAScript

Handling Bytes in ECMAScript – Part 3

Writing ECMAScript Module

Foreword: . In this part of the series, I explain what DataView in ECMAScript means.

By: Chrysanthus Date Published: 24 Jul 2016

Introduction

This is part 3 of my series, Handling Bytes in ECMAScript. In this part of the series, I explain what DataView in ECMAScript means. You should have read the previous parts of the series before reaching here, as this is a continuation. In this tutorial, only unsigned nunbers are considered.

DataView is a slice of bytes in a buffer. It is different from a TypedArray in the sense that you can obtain a slice of any length of bytes, and not just 1 or 2 or 4. So you can obtain a slice of 3, 5, 6, 7, 8, 9, 10, 11, etc.

To display a slice you would have to display the slice or part of it, as a decimal number, in the order it was inserted (left to right) or in the preferred order (right to left), called littleEndian.

In ECMAScript littleEndian insertion is from left to right (with least significat byte on the left) but littleEndian reading is from right to left.

Creating a DataView
To create a dataview, you need an ArrayBuffer. The syntax to create a dataview is:

    dv = new DataView (buffer [ , byteOffset [ , byteLength ] ] )

where dv is a name of your choice and byteOffset is the index for the start of the slice. byteLength is the length of the slice (segment).

DataView Prototype Properties
You can return the byte length of a dataview as follows:

    dv.byteLength

After obtaining the dataview from the buffer, you can still get a right part of the dataview as follows:

    dv.getUint8(byteOffset)

or

    dv.getUint16(byteOffset [,'littleEndian'])

or

    dv.getUint32(byteOffset [,'littleEndian'])

where byteOffset is offset within the DataView.

You can set the bytes of the buffer as follows:

    dv.setUint8(byteOffset, value)

or

    dv.setUint16(byteOffset, value [,'littleEndian'])

or

    dv.setUint32(byteOffset, value [,'littleEndian'])

where byteOffset is offset within the DataView.

Illustration

Getting Views
In the following code, the third and fourth bypes of a buffer are read out using DataView directly, and after, in littleEndian (right to left).

    arrBuf = new ArrayBuffer(9);
    t8Arr = new Uint8Array(arrBuf);
    t8Arr[0] = 1; t8Arr[1] = 2; t8Arr[2] = 3; t8Arr[3] = 4; t8Arr[4] = 5; t8Arr[5] = 6;

    dv = new DataView(arrBuf, 2, 2);

    direct = dv.getUint16(0);

    console.log(direct);

    preferred = dv.getUint16(0, 'littleEndian');

    console.log(preferred);

The output is:

    772
    1027

In the following code, the third to sixth bypes of a buffer are read out using DataView directly, with byte-pairs, and after, in littleEndian (right to left).

    arrBuf = new ArrayBuffer(9);
    t8Arr = new Uint8Array(arrBuf);
    t8Arr[0] = 1; t8Arr[1] = 2; t8Arr[2] = 3; t8Arr[3] = 4; t8Arr[4] = 5; t8Arr[5] = 6;

    dv = new DataView(arrBuf, 2, 4);

    direct1 = dv.getUint16(0);
    direct2 = dv.getUint16(1);

    console.log(direct1);
    console.log(direct2);

    preferred1 = dv.getUint16(0, 'littleEndian');
    preferred2 = dv.getUint16(1, 'littleEndian');

    console.log(preferred1);
    console.log(preferred2);

The output is:

    772
    1029

    1027
    1284

Setting Views
In the following code, the third and fourth bytes are set with the same number in the direct and prreferred directions (order):

    arrBuf = new ArrayBuffer(9);
    t8Arr = new Uint8Array(arrBuf);
    t8Arr[0] = 1; t8Arr[1] = 2; t8Arr[2] = 3; t8Arr[3] = 4; t8Arr[4] = 5; t8Arr[5] = 6;

    dv = new DataView(arrBuf, 2, 2);

    dv.setUint16(0,10);

    console.log(dv.getUint16(0,'littleEndian'));

    dv.setUint16(0,10,'littleEndian');

    console.log(dv.getUint16(0,'littleEndian'));

The output is:

    2560
    10

That is it for this part of the series.

Chrys

Broad Network

Related Articles

DataView in ECMAScript

Handling Bytes in ECMAScript – Part 3

Writing ECMAScript Module

Introduction

Illustration

Related Links

Comments