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