深入理解 copyWithin：提升JavaScript图形处理中数组数据的复用与变换能力

引言

copyWithin 是 JavaScript 中数组对象的一个实例方法，用于在数组内部进行元素的复制和移动。从数组的指定位置拷贝元素到另一个指定位置，覆盖原数组中的相应位置。它不会改变数组的长度。

`copyWithin` 方法解析

语法：

arr.copyWithin(target, start[, end])

参数：

target（必填）：整数，指定复制操作的目标起始位置（索引），复制的元素将被放置在这个位置及其之后。如果 target 为负数，将从数组尾部开始计算，即 -1 表示最后一个元素的位置。
start（必填）：整数，指定复制操作的源起始位置（索引），复制操作将从此位置开始读取元素。如果 start 为负数，同样从数组尾部开始计算。
end（可选）：整数，指定复制操作的源结束位置（不包含），默认为数组长度。如果 end 为负数，从数组尾部开始计算。

行为：

copyWithin 方法将从 start 到 end 之间的源数组元素（左闭右开区间）复制到 target 位置及其之后。如果 target 位于 start 与 end 之间，被复制的元素会被覆盖。复制操作不会改变数组的长度。

常规的应用场景

1.数组元素移动与重排：

const arr = [1, 2, 3, 4, 5];// 将数组的前两个元素移动到末尾
arr.copyWithin(2, 0, 2);
console.log(arr); // 输出：[1, 2, 3, 4, 5]// 交换数组的第一和最后一个元素
arr.copyWithin(0, arr.length - 1, arr.length);
arr.copyWithin(arr.length - 1, 0, 1);
console.log(arr); // 输出：[5, 2, 3, 4, 1]

2.数组部分区域复制：

const source = [0, 1, 2, 3, 4, 5];
const target = new Array(10).fill(null);// 将源数组的部分区域复制到目标数组的指定位置
target.copyWithin(2, 0, 4, source);
console.log(target); // 输出：[null, null, 0, 1, 2, null, null, null, null, null]

3.数组填充与初始化：

const arr = new Array(5).fill(0);// 使用数组自身的元素填充数组
arr.copyWithin(0, 2, 4);
console.log(arr); // 输出：[2, 3, 2, 3, 0]// 使用数组的某个元素初始化数组
const pattern = [1, 2, 3];
const repeatedPattern = new Array(9).fill(null).map((_, i) => pattern[i % pattern.length]);
console.log(repeatedPattern); // 输出：[1, 2, 3, 1, 2, 3, 1, 2, 3]

4.数据结构调整与转换：

const data = [1, 2, 3, 4, 5, 6];// 将数组的奇数位置元素复制到偶数位置，形成交错数组
data.copyWithin(1, 0, data.length, 2);
console.log(data); // 输出：[1, 1, 3, 2, 5, 4]

图形编程应用场景

JavaScript 中的 copyWithin 方法虽然是数组操作的一部分，但其本身并不直接与图形应用程序相关联。然而，考虑到图形应用程序通常会涉及大量的数据结构操作，特别是与像素、顶点、颜色、纹理坐标等相关的数组，copyWithin 方法可以在某些特定场景下为图形编程提供便利。以下是一些可能的应用示例：

1. 图像像素数据操作：

在处理 Canvas 或 WebGL 中的图像像素数据时，通常会使用类型化数组（如 Uint8ClampedArray、Float32Array）表示图像的二维像素矩阵。copyWithin 方法可以帮助快速复制或移动图像的部分区域，实现图像裁剪、复制、平移等效果。

// 假设 imageData 是 CanvasRenderingContext2D.getImageData() 返回的 ImageData 对象
const pixelData = imageData.data; // 类型化数组，表示像素数据// 将图像左上角 10x10 区域复制到右下角
pixelData.copyWithin(pixelData.length - 100, 0, 100);

2. 顶点数据重用与变换：

在 WebGL 程序中，顶点数据通常存储在数组或缓冲对象中。当需要创建相似形状的几何体（如多个位置稍有不同的立方体）时，可以先定义一个基础顶点数组，然后使用 copyWithin 方法复制并稍作调整，避免重复定义相同的顶点数据。

const baseVertices = new Float32Array([// 基础立方体顶点数据...
]);function createTranslatedCube(x, y, z) {const vertices = new Float32Array(baseVertices.length);// 复制基础顶点数据并平移vertices.copyWithin(0, 0, baseVertices.length);for (let i = 0; i < vertices.length; i += 3) {vertices[i] += x;vertices[i + 1] += y;vertices[i + 2] += z;}return vertices;
}// 创建两个位置不同的立方体顶点数据
const cube1Vertices = createTranslatedCube(0, 0, 0);
const cube2Vertices = createTranslatedCube(2, 0, 0);

3. 颜色或纹理数据调整：

在处理颜色数组（如用于绘制渐变或图案）或纹理坐标数组时，copyWithin 方法可用于快速复制和调整颜色序列或纹理坐标，实现重复图案的生成、颜色序列的反转等效果。

const gradientColors = [0xFF0000, 0x00FF00, 0x0000FF]; // 红绿蓝渐变// 创建一个反向的渐变颜色数组
const reversedGradient = new Uint32Array(gradientColors.length);
reversedGradient.copyWithin(0, gradientColors.length - 1, 0, gradientColors);

copyWithin 是JavaScript数组的一个内置方法，它允许我们直接在数组内部执行高效的元素移动和复制操作。在图形数据处理中，如处理像素数组、顶点坐标、颜色值序列等，这种方法可以极大地简化代码并提升性能。以下是如何利用 copyWithin 实现图形数据的高效剪切、复制与反转的技巧：

4.高效剪切

在图形数据处理中，有时需要对数组的一部分进行裁剪（剪切），即提取出一个子数组并保留其内容。copyWithin 可以帮助实现这一操作，通过指定源起始索引、目标起始索引以及要复制的元素数量，实现在原数组内的“自我剪切”。

const sourceArray = [/* 图形数据... */];
const cutStart = /* 起始索引 */;
const cutEnd = /* 结束索引 */;
const cutLength = cutEnd - cutStart;sourceArray.copyWithin(0, cutStart, cutEnd);// 现在，sourceArray包含了从cutStart到cutEnd的子数组内容

5.快速复制

复制图形数据子集是常见需求，比如复制特定区域的像素到另一位置，或者复制某个几何形状的顶点信息以创建副本。copyWithin 允许我们直接将数组的一部分复制到自身或其他数组的指定位置。

const sourceArray = [/* 图形数据... */];
const copyStart = /* 要复制的起始索引 */;
const copyEnd = /* 复制结束索引 */;
const copyLength = copyEnd - copyStart;
const targetStart = /* 目标位置起始索引 */;sourceArray.copyWithin(targetStart, copyStart, copyEnd); // 同一数组内复制// 或者，如果要复制到另一个数组：
const targetArray = new Array(sourceArray.length);
sourceArray.copyWithin(targetStart, copyStart, copyEnd, targetArray, 0); // 注意：此语法为ES202½提案中的Array.prototype.copyWithin()// 现在，源数组的部分内容被复制到了目标位置

6.轻松反转

图形数据的反转（例如，沿某轴翻转图像或颠倒顶点顺序）可以通过 copyWithin 实现。只需将数组的一半元素复制到另一半，同时调整索引来确保正确的反转顺序。

const arrayToReverse = [/* 图形数据... */];
const midIndex = Math.floor(arrayToReverse.length / 2);for (let i = 0; i < midIndex; i++) {const mirroredIndex = arrayToReverse.length - 1 - i;arrayToReverse.copyWithin(mirroredIndex, i, i + 1);
}// 现在，arrayToReverse已按中点对称反转

7.像素数据剪切

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');// 获取整个画布的像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixelData = imageData.data;// 剪切左上角100x100像素区域的数据
const cutSize = 100 * 4; // 像素数据每像素占4个字节（RGBA）
pixelData.copyWithin(0, 0, cutSize);// 重新设置剪切后的图像数据
imageData.data = pixelData.slice(0, cutSize);
ctx.putImageData(imageData, 0, 0);

8.像素数据复制与平移

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');// 获取源像素数据
const srcImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const srcPixelData = srcImageData.data;// 创建目标图像数据并复制源数据
const dstImageData = new ImageData(canvas.width, canvas.height);
const dstPixelData = dstImageData.data;
dstPixelData.set(srcPixelData);// 将源图像数据的左上角100x100区域复制到目标图像右下角
const copySize = 100 * 4;
const dstStartIndex = (canvas.width - 100) * 4 + (canvas.height - 100) * canvas.width * 4;
dstPixelData.copyWithin(dstStartIndex, 0, copySize);ctx.putImageData(dstImageData, 0, 0);

9.顶点数据复制与平移

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 假设vertices是包含顶点数据的Float32Array
const vertices = new Float32Array([...]); // 顶点数据// 将顶点数据的前一半复制到后一半，实现水平镜像
const halfLength = vertices.length / 2;
vertices.copyWithin(vertices.length - halfLength, 0, halfLength);// 上传调整后的顶点数据到缓冲区
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

虽然 copyWithin 方法并非图形应用程序特有，但在处理与图形相关的数组数据时，它能够简化数据复制与移动的操作，提高代码的可读性和执行效率。实际应用中，应结合具体图形编程库或API的特性，合理利用 copyWithin 方法和其他数组操作方法来满足特定图形处理需求。

写在最后

总结来说，JavaScript 中的 copyWithin 方法主要用于数组内部的元素复制和移动操作，它简化了数组元素位置调整、部分区域复制、填充与初始化等场景的代码实现，增强了数组操作的灵活性和效率。在实际应用中，copyWithin 与数组的其他方法（如 slice、splice 等）结合使用，可以实现更复杂的数组数据处理逻辑。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~