Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.slice() / concat()

配列.slice() / concat()

配列の一部を取り出したり、複数の配列を結合して新しい配列を作成するメソッドです。どちらも元の配列を変更しません。

構文
// 配列の一部を取り出して新しい配列を作成します。
var newArray = 配列.slice(開始位置, 終了位置);

// 複数の配列や値を結合して新しい配列を作成します。
var newArray = 配列.concat(配列2, 配列3, ...);
メソッド一覧
メソッド概要
slice(開始, 終了)指定した範囲の要素を取り出して新しい配列を返します。終了位置の要素は含まれません。引数を省略すると配列全体のコピーを返します。
concat(値1, 値2, ...)元の配列に指定した配列や値を結合した新しい配列を返します。引数には配列と値のどちらも指定できます。
サンプルコード
var fruits = ["りんご", "みかん", "ぶどう", "バナナ", "もも"];

// インデックス1から3の手前まで取り出します。
var sliced = fruits.slice(1, 3);
console.log(sliced); // 『みかん,ぶどう』と出力されます。
console.log(fruits); // 『りんご,みかん,ぶどう,バナナ,もも』と出力されます。元の配列は変わりません。

// 負の値で末尾から数えます。
var last2 = fruits.slice(-2);
console.log(last2); // 『バナナ,もも』と出力されます。

// 引数なしで配列をコピーします。
var copy = fruits.slice();
console.log(copy); // 『りんご,みかん,ぶどう,バナナ,もも』と出力されます。

// 配列を結合します。
var arr1 = [1, 2];
var arr2 = [3, 4];
var merged = arr1.concat(arr2, [5, 6]);
console.log(merged); // 『1,2,3,4,5,6』と出力されます。

// 値を直接追加することもできます。
var added = arr1.concat(3, 4);
console.log(added); // 『1,2,3,4』と出力されます。
実行結果
["みかん", "ぶどう"]                         // slice(1, 3)
["りんご", "みかん", "ぶどう", "バナナ", "もも"] // 元の配列は変わりません。
["バナナ", "もも"]                           // slice(-2)
["りんご", "みかん", "ぶどう", "バナナ", "もも"] // slice()。コピーです。
[1, 2, 3, 4, 5, 6]                          // concat
[1, 2, 3, 4]                                // concatで値を直接追加
概要

『配列.slice()』と『配列.concat()』はどちらも元の配列を変更せず、新しい配列を返す非破壊的メソッドです。配列を安全に操作したい場合に便利です。

『配列.slice()』は第1引数で開始位置、第2引数で終了位置を指定します。終了位置の要素は含まれない点に注意してください。引数に負の値を指定すると末尾から数えた位置になり、『slice(-2)』は最後の2つの要素を取り出します。引数を省略すると配列のシャローコピー(浅いコピー)が作成されるため、元の配列に影響を与えずに操作したい場合のコピー手段としても使われます。

名前が似ている『配列.splice()』は元の配列を直接変更する破壊的メソッドです。取り出すだけなら『配列.slice()』、追加・削除・置換をしたいなら『配列.splice()』と使い分けてください。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。