Array.prototype.copyWithin() - 配列の一部分を別部分にコピーする

2017/09/26

Array.prototype.copyWithin()は、配列の一部分をコピーして、そのまま別部分に上書きするメソッドです。返り値を得られますが、元の配列も変更されます。

概要

名前: copyWithin
所属: Array.prototype
仕様書: https://tc39.github.io/ecma262/#sec-array.prototype.copywithin

説明

Array.prototype.copyWithin ( target, start [ , end ] )

第1引数(target)には、ペーストの開始位置を指定します。これ以降の要素がコピーされた新しい値に置き替わります。

第2引数(start)には、コピーの開始位置を指定します。

第3引数(end)には、コピーの終了位置を指定します。省略した場合、最後までコピーされます。

開始位置、終了位置は、それぞれ正の数、または負の数で指定できます。区切り線を入れる位置でイメージして下さい。負の数の場合、-0は指定できません。

チュートリアル

下記の配列を用いて説明していきます。

var array = [ "a", "b", "c", "d", "e", ] ;

第1引数ではコピーのペーストの開始位置を指定します。例えば、"b"を開始位置にしたい場合は正の数なら1、負の数なら-4を指定します。

// 正の数で指定
var a = array.copyWithin( 1, ?, ? ) ;

// 負の数で指定
var a = array.copyWithin( -4, ?, ? ) ;

第2引数と第3引数で、コピーしたい部分の開始位置と終了位置を指定します。例えば、"c"、"d"を指定したい場合は下記の通りです。

// 正の数で指定
var a = array.copyWithin( 1, 2, 4 ) ;

// 負の数で指定
var b = array.copyWithin( 1, -3, -1 ) ;

さて、先の通り実行した場合、コピーした要素は"c"、"d"の2つの要素です。これが"b"を開始位置にしてペーストされるので、"b"と"c"がそれぞれ"c"と"d"に上書きされます。

// 実行前
[ "a", "b", "c", "d", "e", ] ;

// 実行後
[ "a", "c", "d", "d", "e", ] ;

デモ

Array.prototype.copyWithin()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var array = [ "a", "b", "c", "d", "e" ] ;

var a = array.copyWithin( 0, -3, -1 ) ;
/** try it! **/

var results = { a:a, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>