sliceメソッド

広告

sliceメソッドは配列の中の指定された範囲の部分配列を返します。 

slice(start[, end])

配列の中から開始位置から終了位置までの部分配列を取り出し新しい配列として
返します。

パラメータ:
  start  開始インデックス
  end  終了インデックス
戻り値:
  指定された範囲の部分配列

対象の配列の開始インデックスの位置にある要素から終了インデックスの位置にある要素の前の要素までの部分配列を新しい配列として返します。

["伊藤", "東京都", 24, "男性"]という配列を例に考えてみます。配列は4個の要素が含まれており各要素に対するインデックスは次の通りです。 

"伊藤"     0
"東京都"   1
24         2
"男性"     3

この時、sliceメソッドを使用すると次のような部分配列を取得できます。 

slice(0, 1) --> ["伊藤"]
slice(0, 2) --> ["伊藤", "東京都"]
slice(0, 3) --> ["伊藤", "東京都", 24]
slice(0, 4) --> ["伊藤", "東京都", 24, "男性"]
slice(1, 3) --> ["東京都", 24]

sliceメソッドの2番目の引数を省略した場合、開始インデックスの文字から最後の要素までの部分配列を返します。

先ほどの文字列を対象とした場合、sliceメソッドによって次のような部分文字列を取得できます。 

slice(0) --> ["伊藤", "東京都", 24, "男性"]
slice(2) --> [24, "男性"]

インデックスには負の整数を指定することもできます。負の値の場合は配列の最後の要素から位置を数えます。 

"伊藤"     0  -4
"東京都"   1  -3
24         2  -2
"男性"     3  -1

例えばこの配列の場合、インデックス1とインデックス-3は同じ要素を指します。

sliceメソッドの引数に負の値を指定すると次のような部分配列を取得できます。 

slice(-4, 2)  --> ["伊藤", "東京都"]
slice(-3, -1) --> ["東京都", 24]

なおsliceメソッドでは1番目の引数によって決まる要素のインデックスが、2番目の引数によって決まる要素のインデックスよりも大きい場合には何も返しません。

注意して頂きたいのは対象となる配列そのものを変化させるのではなく、新しく部分配列を作成して返すという点です。sliceメソッドを呼び出しても対象のオブジェクトそのものは変化しません。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script8_1.js">
</script>

</body>
</html>

function print(str){
  document.write(str + "<br />");
}

document.write("<p>");

var ary = new Array("伊藤", "東京都", 24, "男性");

print(ary);

print("slice(0, 1) --> " + ary.slice(0, 1));
print("slice(0, 2) --> " + ary.slice(0, 2));
print("slice(0, 3) --> " + ary.slice(0, 3));
print("slice(1, 3) --> " + ary.slice(1, 3));
print("slice(0) --> " + ary.slice(0));
print("slice(2) --> " + ary.slice(2));
print("slice(-4, 2) --> " + ary.slice(-4, 2));
print("slice(-3, -1) --> " + ary.slice(-3, -1));
print("slice(5, 0) --> " + ary.slice(5, 0));

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p8-1

( Written by Tatsuo Ikura )