Tips for compressing a compressed array

Question

Tips for compressing a compressed array

Currently, I am facing a challenge in attempting to flatten a Uint8ClampedArray.

The initial array structure is data = [227, 138, 255…] and after creating an array from that like

enc = [Uint8ClampedArray[900], Uint8ClampedArray[900], Uint8ClampedArray[900]...]

, my goal is to flatten it.

I have tried various methods and solutions, including:

the method suggested by MDN

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);

using concat

data = [].concat.apply([], enc);

and utilizing a function

function flatten(arr) {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
  }, []);
}

However, none of these approaches have been successful so far. The array keeps returning in its original form. Can anyone provide guidance on the right approach and explain why this is happening?

-EDIT- In essence, I need it to be converted into a regular Array object, similar to the starting one without a specified type.

javascript arrays multidimensional-array flatten

Answer 1

Answer №1

If the variable enc is an array of Uint8ClampedArray types, you can use this concise statement to flatten it:

var flattened = Uint8ClampedArray.from(enc.reduce((a, b) => [...a, ...b], []));

This code snippet achieves the same result as the following traditional approach:

var flattened = Uint8ClampedArray.from(enc.reduce(function(a, b){
  return Array.from(a).concat(Array.from(b));
}, []));

In response to your query on why the reduce function did not work as expected:

[].concat(Uint8ClampedArray([1, 2, 3, 4]));

Regrettably, this code does not yield [1, 2, 3, 4], instead it produces [Uint8ClampedArray[4]]. Typed Arrays do not play well with the concat method.

Answer 2

If the variable enc is an array of Uint8ClampedArray types, you can use this concise statement to flatten it:

var flattened = Uint8ClampedArray.from(enc.reduce((a, b) => [...a, ...b], []));

This code snippet achieves the same result as the following traditional approach:

var flattened = Uint8ClampedArray.from(enc.reduce(function(a, b){
  return Array.from(a).concat(Array.from(b));
}, []));

In response to your query on why the reduce function did not work as expected:

[].concat(Uint8ClampedArray([1, 2, 3, 4]));

Regrettably, this code does not yield [1, 2, 3, 4], instead it produces [Uint8ClampedArray[4]]. Typed Arrays do not play well with the concat method.

Answer 3

Answer №2

To start, I recommend calculating the total length before using the set method. One advantage of using set is

If the source array is a typed array, the two arrays may share the same underlying ArrayBuffer; the browser will intelligently copy the source range of the buffer to the destination range.

function flatten(arrays, TypedArray) {
  var arr = new TypedArray(arrays.reduce((n, a) => n + a.length, 0));
  var i = 0;
  arrays.forEach(a => { arr.set(a,i); i += a.length; });
  return arr;
}
console.log(flatten(
  [new Uint8ClampedArray([1,2,3]), new Uint8ClampedArray([4,5,6])],
  Uint8ClampedArray
));

Another approach is to use blobs, as suggested by guest271314. The correct method would be

function flatten(arrays, TypedArray, callback) {
  var reader = new FileReader();
  reader.onload = () => {
    callback(new TypedArray(reader.result));
  };
  reader.readAsArrayBuffer(new Blob(arrays));
}
flatten(
  [new Uint8ClampedArray([1,2,3]), new Uint8ClampedArray([4,5,6])],
  Uint8ClampedArray,
  result => console.log(result)
);

Answer 4

To start, I recommend calculating the total length before using the set method. One advantage of using set is

If the source array is a typed array, the two arrays may share the same underlying ArrayBuffer; the browser will intelligently copy the source range of the buffer to the destination range.

function flatten(arrays, TypedArray) {
  var arr = new TypedArray(arrays.reduce((n, a) => n + a.length, 0));
  var i = 0;
  arrays.forEach(a => { arr.set(a,i); i += a.length; });
  return arr;
}
console.log(flatten(
  [new Uint8ClampedArray([1,2,3]), new Uint8ClampedArray([4,5,6])],
  Uint8ClampedArray
));

Another approach is to use blobs, as suggested by guest271314. The correct method would be

function flatten(arrays, TypedArray, callback) {
  var reader = new FileReader();
  reader.onload = () => {
    callback(new TypedArray(reader.result));
  };
  reader.readAsArrayBuffer(new Blob(arrays));
}
flatten(
  [new Uint8ClampedArray([1,2,3]), new Uint8ClampedArray([4,5,6])],
  Uint8ClampedArray,
  result => console.log(result)
);

Answer 5

Answer №3

Upon reviewing the MDN documentation, it is clear that TypedArrays do not have access to several standard JavaScript array functions.

One workaround for this limitation is to gather the values from the clamped array and create a new one using the following method:

var enc = [Uint8ClampedArray.of(1, 2), Uint8ClampedArray.of(4, 8), Uint8ClampedArray.of(16, 32)];

var flattened = Uint8ClampedArray.from(enc.reduce(function(acc, uintc){
  Array.prototype.push.apply(acc, uintc);
  return acc;
}, []));

console.log(flattened); // [object Uint8ClampedArray]
console.log(flattened.join(',')); // "1,2,4,8,16,32"

Answer 6

Upon reviewing the MDN documentation, it is clear that TypedArrays do not have access to several standard JavaScript array functions.

One workaround for this limitation is to gather the values from the clamped array and create a new one using the following method:

var enc = [Uint8ClampedArray.of(1, 2), Uint8ClampedArray.of(4, 8), Uint8ClampedArray.of(16, 32)];

var flattened = Uint8ClampedArray.from(enc.reduce(function(acc, uintc){
  Array.prototype.push.apply(acc, uintc);
  return acc;
}, []));

console.log(flattened); // [object Uint8ClampedArray]
console.log(flattened.join(',')); // "1,2,4,8,16,32"

Answer 7

Answer №4

Revision, Upgraded

firefox, nightly currently gives

[[object Uint8ClampedArray],[object Uint8ClampedArray],[object Uint8ClampedArray]]

when using FileReader() result as highlighted by @Oriol.

An alternative method utilizing spread element, rest element, for..of, which provides identical outcomes to chromium, chrome with the use of Blob(), FileReader(); TextEncoder(), TextDecoder(); JSON.parse() methods

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var res = [];
for (let prop of enc) [...res] = [...res, ...prop];

console.log(res);

or, more concise, as recommended by @Oriol

var res = [];
var enc = [new Uint8ClampedArray(900), new Uint8ClampedArray(900)]; 
for (let prop of enc) res.push(...prop);

You can utilize Blob() to combine parameters into a single Blob object, along with FileReader(), JSON.parse()

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var blob = new Blob([enc]);

var reader = new FileReader();
reader.onload = () => {
  console.log(JSON.parse("[" + reader.result + "]"))
}
reader.readAsText(blob);

Alternatively, using TextEncoder(), TextDecoder(), JSON.parse()

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var encoder = new TextEncoder();
var arr = encoder.encode(enc);
var decoder = new TextDecoder();
var res = JSON.parse("[" + decoder.decode(arr) + "]");
console.log(res);

Answer 8

Revision, Upgraded

firefox, nightly currently gives

[[object Uint8ClampedArray],[object Uint8ClampedArray],[object Uint8ClampedArray]]

when using FileReader() result as highlighted by @Oriol.

An alternative method utilizing spread element, rest element, for..of, which provides identical outcomes to chromium, chrome with the use of Blob(), FileReader(); TextEncoder(), TextDecoder(); JSON.parse() methods

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var res = [];
for (let prop of enc) [...res] = [...res, ...prop];

console.log(res);

or, more concise, as recommended by @Oriol

var res = [];
var enc = [new Uint8ClampedArray(900), new Uint8ClampedArray(900)]; 
for (let prop of enc) res.push(...prop);

You can utilize Blob() to combine parameters into a single Blob object, along with FileReader(), JSON.parse()

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var blob = new Blob([enc]);

var reader = new FileReader();
reader.onload = () => {
  console.log(JSON.parse("[" + reader.result + "]"))
}
reader.readAsText(blob);

Alternatively, using TextEncoder(), TextDecoder(), JSON.parse()

var enc = [new Uint8ClampedArray(900)
            , new Uint8ClampedArray(900)
           , new Uint8ClampedArray(900)];

var encoder = new TextEncoder();
var arr = encoder.encode(enc);
var decoder = new TextDecoder();
var res = JSON.parse("[" + decoder.decode(arr) + "]");
console.log(res);

Tips for compressing a compressed array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for successfully implementing programmatic routing in Nuxt

filter array based on property value

How to access a particular tab in Bootstrap 5 using an external link

What is the best way to have a TypeScript function return a class?

Create a PHP array from a MySQL database using the "id" column as the key value pairs

Reveal unseen information on the webpage upon clicking a link

Tips for effectively showcasing the counter outcome amidst the increase and decrease buttons

Is there a way to automatically activate a navbar item without the user having to click on a navigation link first?

Is it better to use a canvas for a more efficient animation when changing the background image on pagescroll?

Spotlight the flaw in the card's backbone using JS

If the value is empty, opt for a different image within the array

Strategies for detecting file import failures within Angular UI Grid

What could be causing the array index to fall outside the bounds in this particular algorithm?

not getting any notifications from PHP

Using AJAX autocomplete with Sys.Serialization.JavaScriptSerializer

Mongoose currency does not display fractional values

Tips for accessing user-defined headers within CORS middleware

Attaching data to Vue model on the fly within a component

PHP - Validating the elements within an array

Choosing the subsequent element that comes before