JavaScript 配列（追加・削除・置換・コピー）

本日はJavaScriptの配列の追加・削除・置換・コピーするやり方を解説していきたいと思います。

それではいってみましょう(^O^)

配列に要素を追加

先頭に要素を追加する unshift()

unshiftメソッド

・配列の先頭に要素を追加します（複数可）

・追加後の配列数が取得できます。

【サンプル】

//配列作成

let food = ['牛丼', 'カツ丼'];

//先頭に追加（unshift）

let foodLength = food.unshift('親子丼','まぐろ丼');

//追加後の配列

console.log(food);

//【結果】Array(4) [ "親子丼", "まぐろ丼", "牛丼", "カツ丼" ]

//要素数

console.log(foodLength);

//【結果】4

末尾に要素を追加する push()

pushメソッド

・配列の末尾に要素を追加します（複数可）

・追加後の配列数が取得できます。

【サンプル】

//配列作成

let food = ['牛丼', 'カツ丼'];

//末尾に追加（push）

let foodLength = food.push('親子丼','まぐろ丼');

//追加後の配列

console.log(food);

//【結果】Array(4) [ "牛丼", "カツ丼", "親子丼", "まぐろ丼" ]

//要素数

console.log(foodLength);

//【結果】4

配列の要素を削除

先頭の要素を削除する shift()

shiftメソッド

・配列から最初の要素を削除します。

・削除した要素を取得します。

【サンプル①】

//配列作成

let food = ['牛丼', 'カツ丼','親子丼'];

//先頭を削除（shift）

let foodDel = food.shift();

//先頭の要素削除後の配列

console.log(food);

//【結果】Array [ "カツ丼", "親子丼" ]

//削除した要素を取得します。

console.log(foodDel);

//【結果】牛丼

【サンプル②】

//配列作成

let food = ['牛丼', 'カツ丼','親子丼'];

//要素がなくなるまでループして削除した要素名を取得

while( (foodDel = food.shift()) !== undefined ) {

console.log(foodDel);

}

//【結果】

//牛丼

//カツ丼

//親子丼

末尾の要素を削除する pop()

popメソッド

・配列から末尾の要素を削除します。

・削除した要素を取得します。

【サンプル】

//配列作成

let food = ['牛丼', 'カツ丼','親子丼'];

//末尾を削除（pop）

let foodDel = food.pop();

//末尾の要素削除後の配列

console.log(food);

//【結果】Array [ "牛丼", "カツ丼" ]

//削除した要素を取得します。

console.log(foodDel);

//【結果】親子丼

位置指定して要素を追加・削除・置換

splice()

spliceメソッド

・要素の追加ができます。

・要素の削除ができます。

・要素の置換ができます。

・削除した要素を取得します。

構文

splice(インデックス指定[,削除数[,要素1[,要素2[, …]]]])

指定した位置に追加

//配列作成

let food = ['牛丼','カツ丼','親子丼'];

//インデックスの1番目に追加;

let foodRem = food.splice(1,0,'まぐろ丼');

//追加後の配列

console.log(food);

//【結果】Array(4) [ "牛丼", "まぐろ丼", "カツ丼", "親子丼" ]

//削除はしてないので空の配列取得

console.log(foodRem);

//【結果】Array []

指定した位置を削除

//配列作成

let food = ['牛丼','カツ丼','親子丼'];

//インデックスの0番目から2個削除;

let foodRem = food.splice(0,2);

//削除後の配列

console.log(food);

//【結果】Array [ "親子丼" ]

//削除した要素を取得

console.log(foodRem);

//【結果】Array [ "牛丼", "カツ丼" ]

指定した位置を置換

//配列作成

let food = ['牛丼','カツ丼','親子丼'];

//インデックスの0番目から1個削除し豚丼を追加;

let foodRem = food.splice(0,1,'豚丼');

//実行後の配列

console.log(food);

//【結果】Array(3) [ "豚丼", "カツ丼", "親子丼" ]

//削除した要素を取得

console.log(foodRem);

//【結果】Array [ "牛丼" ]

配列をコピー

コピーする slice()

sliceメソッド

・引数を指定しない場合は全コピーされます。

・引数に指定インデックス（開始）から指定インデックス（終了）の (インデックス（終了）は含まない) 選択した範囲をコピーします。

・コピーは新しく作成した配列に作成されます。

・元の配列は変更されません。

構文

slice([開始位置[, 最後位置]])

全コピー

//配列作成

let food = ['牛丼','カツ丼','親子丼'];

//配列をコピー

let foodCopy = food.slice();

//コピー後の配列

console.log(foodCopy);

//【結果】Array(3) [ "牛丼", "カツ丼", "親子丼" ]

指定位置からすべてコピー

//配列作成

let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼'];

//インデックス(3)から全てコピー

let foodCopy = food.slice(3);

//コピー後の配列

console.log(foodCopy);

//【結果】Array [ "豚丼", "まぐろ丼" ]

// //

末尾をコピー

//配列作成

let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼'];

//末尾をコピー

let foodCopy = food.slice(-3);

//コピー後の配列

console.log(foodCopy);

//【結果】Array(3) [ "親子丼", "豚丼", "まぐろ丼" ]

// //

指定範囲をコピー

//配列作成

let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼'];

//インデックス（2）からインデックス（4）までコピー

//※インデックス（4）は含まないので注意

let foodCopy = food.slice(2,4);

//コピー後の配列

console.log(foodCopy);

//【結果】Array [ "親子丼", "豚丼" ]

配列に要素を追加

先頭に要素を追加する unshift()

末尾に要素を追加する push()

配列の要素を削除

先頭の要素を削除する shift()

末尾の要素を削除する pop()

位置指定して要素を追加・削除・置換

splice()

構文

指定した位置に追加

指定した位置を削除

指定した位置を置換

配列をコピー

コピーする slice()

構文

全コピー

指定位置からすべてコピー

末尾をコピー

指定範囲をコピー

配列関連

応用

JavaScript/jQuery