在ES7中，新增加了Array.prototype.copyWithin()方法，可以更方便地在数组内部进行元素的复制和移动。本文将会介绍如何使用这个方法，让你的前端开发更加便捷和高效。
什么是Array.prototype.copyWithin方法
在ES7中，新增加了Array.prototype.copyWithin方法。此方法可以将数组中的某一段元素复制到另一段指定位置上，并返回修改后的数组，同时原数组发生变化。
语法：
arr.copyWithin(target[, start[, end]])
参数解释：
- target：必须，从该位置开始替换数据。如果是负数，表示倒数。
- start：可选，从该位置开始读取数据，默认是0。如果是负数，表示倒数。
- end：可选，到该位置前停止读取数据，默认是数组长度。如果是负数，表示倒数。
返回值：修改后的数组。
Array.prototype.copyWithin方法的应用场景
下面是一些具体的应用示例。
示例1：数组内部元素移动
对于一个数组，如果需要将指定的元素移动到其它位置，可能需要通过splice等API来实现。
比如，将数组的第2个，第3个元素依次移动到第6、7个元素：
var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; array1.splice(5, 0, array1.splice(1, 2)[0], array1.splice(1, 2)[0]); // [1, 4, 5, 6, 7, 2, 3, 8, 9]
通过使用Array.prototype.copyWithin方法，可以更加方便地实现该需求：
var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; array1.copyWithin(5, 1, 3); // [1, 2, 3, 4, 5, 2, 3, 8, 9]
这里，使用copyWithin将第2、3个元素从下标1出开始复制到下标5以后的位置，实现了元素的移动。
示例2：截断数组长度并填充默认值
假设我们有个长度为10的数组，但我们现在只需要前5个元素，因此需要把数组截断至前5个元素。同时，还需给截断后的新数组进行默认值填充：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// ES6
var newArr = Array.from({length: 5}).map((v, i) => arr[i] || i+1);
// ES7
var newArr = arr.copyWithin(0, 0, 5).fill(0, 5);这里，使用copyWithin将0到5个元素复制到数组的最前面，再用fill对新的数组末尾补0。
示例3：倒置数组
旋转数组是编程中经常用到的操作之一，可以通过Array.prototype.copyWithin方法来实现：
var arr = [1, 2, 3, 4, 5]; // ES6 var newArr = arr.reverse(); // ES7 var newArr = arr.copyWithin(0, arr.length-1).reverse();
这里，使用copyWithin将最后一个元素复制到数组最前面，再使用reverse将数组倒置，达到旋转的效果。
总结
本文介绍了ES7中新增的Array.prototype.copyWithin方法，并给出了具体的使用示例。与传统的splice等操作相比，copyWithin更加简单、便捷、高效，能够为前端开发带来诸多优势，具有一定学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1aff4b5eee0b5258f0aa9