Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
DataView
is a view into an ArrayBuffer, like Typed Arrays, but in this case the items in the array can have different sizes and types.
Here’s an example:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
Since this is a view over a buffer, we can specify which byte we want to start from, and the length:
const view = new DataView(buffer, 10) //start at byte 10
const view = new DataView(buffer, 10, 30) //start at byte 10, and add 30 items
If we don’t add those additional arguments, the view starts at position 0 and loads all the bytes present in the buffer.
There is a set of methods we can use to add data into the buffer:
setInt8()
setInt16()
setInt32()
setUint8()
setUint16()
setUint32()
setFloat32()
setFloat64()
This is how to call one of those methods:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)
By default data is stored using big endian notation. You can overwrite this setting and use little endian by adding a third parameter with the true
value:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019, true)
Here is how we can get data from the view:
getInt8()
getInt16()
getInt32()
getUint8()
getUint16()
getUint32()
getFloat32()
getFloat64()
Example:
const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)
view.getInt16(0) //2019
Since a DataView
is an ArrayBufferView
, we have those 3 read-only properties:
buffer
points to the original ArrayBufferbyteOffset
is the offset on that bufferbyteLength
is the length of its content in bytes
One thing to keep in mind is that typed arrays don’t let us control the endianness: it uses the endianness of the system. In general this works out fine, because the main use case as we said is to use the array locally, using one of the multimedia APIs.
If you transfer the data of a Typed Array on another system, the data might be not badly encoded if it uses Big Endian and you use Little Endian.
In case you need this kind of control, DataView is a perfect choice.
Download my free JavaScript Beginner's Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More browser tutorials:
- Some useful tricks available in HTML5
- How I made a CMS-based website work offline
- The Complete Guide to Progressive Web Apps
- The Fetch API
- The Push API Guide
- The Channel Messaging API
- Service Workers Tutorial
- The Cache API Guide
- The Notification API Guide
- Dive into IndexedDB
- The Selectors API: querySelector and querySelectorAll
- Efficiently load JavaScript with defer and async
- The Document Object Model (DOM)
- The Web Storage API: local storage and session storage
- Learn how HTTP Cookies work
- The History API
- The WebP Image Format
- XMLHttpRequest (XHR)
- An in-depth SVG tutorial
- What are Data URLs
- Roadmap to learn the Web Platform
- CORS, Cross-Origin Resource Sharing
- Web Workers
- The requestAnimationFrame() guide
- What is the Doctype
- Working with the DevTools Console and the Console API
- The Speech Synthesis API
- How to wait for the DOM ready event in plain JavaScript
- How to add a class to a DOM element
- How to loop over DOM elements from querySelectorAll
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to change a DOM node value
- How to add a click event to a list of DOM elements returned from querySelectorAll
- WebRTC, the Real Time Web API
- How to get the scroll position of an element in JavaScript
- How to replace a DOM element
- How to only accept images in an input file field
- Why use a preview version of a browser?
- The Blob Object
- The File Object
- The FileReader Object
- The FileList Object
- ArrayBuffer
- ArrayBufferView
- The URL Object
- Typed Arrays
- The DataView Object
- The BroadcastChannel API
- The Streams API
- The FormData Object
- The Navigator Object
- How to use the Geolocation API
- How to use getUserMedia()
- How to use the Drag and Drop API
- How to work with scrolling on Web Pages
- Handling forms in JavaScript
- Keyboard events
- Mouse events
- Touch events
- How to remove all children from a DOM element
- How to create an HTML attribute using vanilla Javascript
- How to check if a checkbox is checked using JavaScript?
- How to copy to the clipboard using JavaScript
- How to disable a button using JavaScript
- How to make a page editable in the browser
- How to get query string values in JavaScript with URLSearchParams
- How to remove all CSS from a page at once
- How to use insertAdjacentHTML
- Safari, warn before quitting
- How to add an image to the DOM using JavaScript
- How to reset a form
- How to use Google Fonts