Concatenates two ArrayBuffers

concat.array.buffers.js

/**
 * Creates a new Uint8Array based on two different ArrayBuffers
 *
 * @private
 * @param {ArrayBuffers} buffer1 The first buffer.
 * @param {ArrayBuffers} buffer2 The second buffer.
 * @return {ArrayBuffers} The new ArrayBuffer created out of the two.
 */
var _appendBuffer = function(buffer1, buffer2) {
  var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
  tmp.set(new Uint8Array(buffer1), 0);
  tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
  return tmp.buffer;
};

Good 👍

👍

👍

Awesome.

👍

👍

👍

👍

In ES6+ there's an easier way using the "iterator" property of TypedArrays and the spread operator:

// create three example TypedArrays
// if you just have an ArrayBuffer called `ab` you can do `new Uint8Array(ab)`
var b1 = new Uint8Array([0x01, 0x02, 0x03]);
var b2 = new Uint8Array([0x04, 0x05, 0x06]);
var b3 = new Uint8Array([0x07, 0x08, 0x09]);

// combine all three arrays into a new array buffer
// if you need the ArrayBuffer instead of a TypedArray, it's at `combined.buffer
// NOTE: square brackets in the Uint8Array constructor -- Uint8Array([...])
var combined = new Uint8Array([
    ...b1,
    ...b2,
    ...b3
]);

// combined now contains:
// 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09

Nullable version with correct jsdoc annotation. Allows to start-off from a null value accumulator and add up from there. Or to be able to concat with null which results in returning the same ArrayBuffer as input. Another option would be to create a plain copy here if you want to be "safe".

Also, I don't see any state here, no point this being "private" or any member of a class.

/**
 * Creates a new ArrayBuffer from concatenating two existing ones
 *
 * @param {ArrayBuffer | null} buffer1 The first buffer.
 * @param {ArrayBuffer | null} buffer2 The second buffer.
 * @return {ArrayBuffer | null} The new ArrayBuffer created out of the two.
 */
var concatArrayBuffers = function(buffer1, buffer2) {

  if (!buffer1) {
    return buffer2;
  } else if (!buffer2) {
    return buffer1;
  }

  var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
  tmp.set(new Uint8Array(buffer1), 0);
  tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
  return tmp.buffer;
};

@apowers313 Unfortunately, your option will work slowly when high performance is needed. And typed arrays are used in such cases.

👍

Thank you. You saved my day :)

 function concatArrayBuffers (bufs) {
                        var offset = 0;
                        var bytes = 0;
                        var bufs2=bufs.map(function(buf,total){
                            bytes += buf.byteLength;
                            return buf;
                        });
                        var buffer = new ArrayBuffer(bytes);
                        var store = new Uint8Array(buffer);
                        bufs2.forEach(function(buf){
                            store.set(new Uint8Array(buf.buffer||buf,buf.byteOffset),offset);
                            offset += buf.byteLength;
                        });
                        return buffer
                         
                    }
 var all_buffers = concatArrayBuffers([buffer1,buffer2,buffer3]);

good

Great ! 👍👍👍

👍

function concatArrayBuffers(...bufs){
	const result = new Uint8Array(bufs.reduce((totalSize, buf)=>totalSize+buf.byteLength,0));
	bufs.reduce((offset, buf)=>{
		result.set(buf,offset)
		return offset+buf.byteLength
	},0)
	return result.buffer
}

Literally saved my day. Best solution for performance

const concatenated = await new Blob([ buffer, buffer2 ]).arrayBuffer()

I like Krashdrive's solution, simple and works flawlessly!

Thanks :)

function concatArrayBuffers(...bufs){
	const result = new Uint8Array(bufs.reduce((totalSize, buf)=>totalSize+buf.byteLength,0));
	bufs.reduce((offset, buf)=>{
		result.set(buf,offset)
		return offset+buf.byteLength
	},0)
	return result.buffer
}

i meet error: Uncaught RangeError: offset is out of bounds

@fujinxiang Works well for me here -> https://jsfiddle.net/fhsn0zg9/10/

Best create fiddle to demo what you mean? :)

function concatArrayBuffers(...bufs){
	const result = new Uint8Array(bufs.reduce((totalSize, buf)=>totalSize+buf.byteLength,0));
	bufs.reduce((offset, buf)=>{
		result.set(buf,offset)
		return offset+buf.byteLength
	},0)
	return result.buffer
}

i meet error: Uncaught RangeError: offset is out of bounds

I am also getting error, "RangeError: offset is out of bounds".

👍

@rashmimhatre100 I am curious now :) Would you mind create a fiddle, and could you take a look at https://jsfiddle.net/fhsn0zg9/10/ ?
@fujinxiang

EDIT: realized you'd need to use this above func with Uint8Array wrapped inputs. That is a bit misleading, but the output will be a brand new allocated ArrayBuffer. See the example code on the fiddle.