如何展平钳位数组

Question

此刻我发现自己被困在试图展平 Uint8ClampedArray。

起始数组结构是data = [227, 138, 255…]，在从类似enc = [Uint8ClampedArray[900], Uint8ClampedArray[900], Uint8ClampedArray[900]...] 的数组创建数组后，我尝试将其展平。

为此我尝试了许多方法/解决方案，但似乎没有一种有效：

MDN 建议的方法

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

带连接

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

通过函数

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

但到目前为止没有任何乐趣，它一直按原样返回数组。任何人都可以指出我正确的方向并解释为什么会这样？

-编辑- 底线：我需要它返回一个常规的 Array 对象，比如未键入的起始对象。

Answer 1

如果enc 是Uint8ClampedArrays 的Array，则此单行语句应该有效：

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

这相当于：

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

---

回答您关于为什么reduce 不适合您的实际问题：

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

不幸的是，它没有返回[1, 2, 3, 4]，而是[Uint8ClampedArray[4]]。 concat 不适用于类型化数组。

Answer 2

我会先计算总长度，然后使用set。 set的优势是

如果源数组是类型化数组，这两个数组可以共享 相同的底层 ArrayBuffer；浏览器会智能复制 缓冲区的源范围到目标范围。

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
));

另一种方法是使用 blob，如 proposed by guest271314。正确的方法是

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 3

查看 MDN，TypedArrays 并没有共享很多正常的 JS 数组函数。

您可以从固定数组中收集值，然后像这样初始化一个新数组：

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 4

编辑、更新

firefox，正如@Oriol 所指出的，每晚目前在FileReader() result 返回[[object Uint8ClampedArray],[object Uint8ClampedArray],[object Uint8ClampedArray]]。

一种使用spread element、rest element、for..of的方法，它返回与铬相同的结果，铬使用Blob()、FileReader()； TextEncoder()，TextDecoder()； JSON.parse() 接近

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

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

console.log(res);

或者，更简洁，正如@Oriol 所建议的那样

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

---

您可以使用Blob() 将参数连接成单个Blob 对象、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);

或者，使用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);