为何Uint8Array调用map方法表现异常？

我尝试从图像Buffer/ArrayBuffer获取mimeType时遇到异常，用这段代码把签名字节转十六进制字符串：

const uint8Array = new Uint8Array([137, 80, 78, 71]);
const signatureLength = 4;
const signature1 = uint8Array.slice(0, signatureLength).map(byte => {
  const signature = byte.toString(16).padStart(2, "0");
  console.log("signature --- ", signature, byte, typeof signature);
  return signature;
});
const signature = signature1.join("").toUpperCase();
console.log("signature 1 --- ", signature1, signature);

控制台显示78转成了'4e'，但map结果里却存成0，这是怎么回事？

核心问题出在Uint8Array的map方法返回的还是Uint8Array类型，而非普通数组。

当你在map回调里返回字符串（比如'4e'），Uint8Array会强制把这个字符串转换为8位无符号整数：

• 字符串'4e'转数字时，Number('4e')会得到NaN（因为'e'在这里不属于有效数字格式）
• Uint8Array无法存储NaN，会自动将其转换为0

这就是map结果里出现0的根本原因。

解决办法很直接，把Uint8Array转换成普通数组后再调用map：

const uint8Array = new Uint8Array([137, 80, 78, 71]);
const signatureLength = 4;
// 先转成普通数组再处理
const signature1 = Array.from(uint8Array.slice(0, signatureLength)).map(byte => {
  const signature = byte.toString(16).padStart(2, "0");
  console.log("signature --- ", signature, byte, typeof signature);
  return signature;
});
const signature = signature1.join("").toUpperCase();
console.log("signature 1 --- ", signature1, signature);

或者用普通数组的map方法来处理Uint8Array：

const signature1 = Array.prototype.map.call(uint8Array.slice(0, signatureLength), byte => {
  const signature = byte.toString(16).padStart(2, "0");
  console.log("signature --- ", signature, byte, typeof signature);
  return signature;
});

这样就能得到存储字符串的普通数组，不会出现转成0的异常。

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari