Array.prototype.splice() - 配列の一部を置換する

2017/09/26

Array.prototype.splice()は、配列の一部を置換するメソッドです。配列の一部を「削除」して、その位置に新しく要素を「挿入」します。元の配列を変更します。

概要

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

説明

Array.prototype.splice ( start, deleteCount, ...items )

第1引数(start)には、開始位置を指定します。

第2引数(deleteCount)には、開始位置からの削除する個数を指定します。

第3引数以降(...items)には、開始位置に新しく挿入する要素を任意の数だけ指定します。

返り値は元の配列から削除された要素を集めた配列です。

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

チュートリアル

このメソッドは「削除」と「挿入」を分けて考えると理解しやすいです。まずは削除を考えてみましょう。下記の配列の黒丸の要素を削除したいと考えます。第1引数に開始位置、第2引数に削除する個数を指定しましょう。開始位置は正の数、または負の数で指定できます。削除する個数は3です。

var array = [ "S", "Y", "●", "●", "●", "E", "R", ] ;

// 開始位置を正の数で指定
array.splice( 2, 3 ) ;

// 開始位置を負の数で指定
array.splice( -5, 3 ) ;

次に挿入です。削除した部分に"N"と"C"という2つの要素を挿入してみましょう。次のように指定します。

array.splice( 2, 3, "N", "C" ) ;

これで実行すると、削除した3つの黒丸を返り値で得て、元の配列が変更されます。

var array = [ "S", "Y", "●", "●", "●", "E", "R", ] ;
var a = array.splice( 2, 3, "N", "C" ) ;

// 返り値: [ "●", "●", "●" ]
// 元の配列: [ "S", "Y", "N", "C", "E", "R", ]

「削除」を省略した場合、「挿入」だけを行なえます。第2引数(削除する個数)に0を指定しましょう。

var array = [ "S", "Y", "E", "R", ] ;
var a = array.splice( 2, 0, "N", "C" ) ;

// 返り値: []
// 元の配列: [ "S", "Y", "N", "C", "E", "R", ]

逆に「挿入」を省略した場合、「削除」だけを行なえます。

var array = [ "S", "Y", "N", "C", "E", "●", "●", "●", "R", ] ;
var a = array.splice( 5, 3 ) ;

// 返り値: [ "●", "●", "●", ]
// 元の配列: [ "S", "Y", "N", "C", "E", "R", ]

デモ

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

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

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var array = [ "S", "Y", "●", "●", "●", "E", "R" ] ;

var a = array.splice( 2, 3, "N", "C" ) ;
var b = array ;
/** try it! **/

var results = { a:a, b:b, } ;

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