在前端开发中，我们通常会使用TypedArray来处理数据。其中，Uint8Array和Uint8ClampedArray是两个常用的类型，它们有些类似，但也有一些重要的区别。
Uint8Array
Uint8Array是无符号8位整数的数组，在JavaScript中以二进制补码表示。这意味着它可以存储0到255之间的整数，包括负数（以二进制补码表示）。以下是一个创建Uint8Array的简单示例：
const arr = new Uint8Array([1, 2, 3]);
在这个示例中，我们创建了一个长度为3的Uint8Array，其中包含值1、2和3。我们还可以通过下标访问数组元素：
console.log(arr[0]); // 输出1
Uint8ClampedArray
Uint8ClampedArray也是无符号8位整数的数组，但与Uint8Array不同，它使用截断方式来处理超出范围的值。如果我们尝试向Uint8ClampedArray中写入超出0到255的值，它将自动截断为最接近的有效值。以下是一个创建Uint8ClampedArray的示例：
const arr = new Uint8ClampedArray([256, 257, -1]);
在这个示例中，我们创建了一个长度为3的Uint8ClampedArray，其中包含值256、257和-1。因为这些值超出了0到255的范围，它们将被截断为255、255和0。
console.log(arr); // 输出Uint8ClampedArray [ 255, 255, 0 ]
区别与应用
那么，Uint8Array和Uint8ClampedArray之间有什么区别呢？主要区别在于它们如何处理范围之外的值。如果我们使用Uint8Array，超出0到255的值将通过二进制补码来表示，这可能会导致一些问题。例如，如果我们向Uint8Array中写入值256，它将被解释为-128，因为256的二进制补码是100000000（8位），而第一位是符号位，表示负数。
相比之下，Uint8ClampedArray通过截断方式来处理超出范围的值，这可以确保我们永远不会得到无效的结果。这在图像处理等领域中特别有用，因为它可以确保我们的像素数据始终处于0到255的范围内。
因此，当我们需要存储像素数据等涉及到0到255范围的数据时，推荐使用Uint8ClampedArray。如果我们需要存储更广泛的整数数据，可以使用Uint8Array。
示例代码
以下是一个简单的示例，演示了如何使用Uint8ClampedArray来处理像素数据：
-- -------------------- ---- -------
----- ------ - -------------------------------------
----- --- - ------------------------
----- --------- - ------------------- -- ------------- ---------------
----- --------- - ---------------
-- --------------------------
----- --------------- - --- -----------------------------
-- -------
------------------------------- ------ -- -
-- ---------------
-- ------- - -- - - --- -- -
---------------------- - ----
-
---
-- ---------------
-------------------- -------------------------- ------------- --------------- -- ---在这个示例中，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24685