本日はJavaScriptの配列の追加・削除・置換・コピーするやり方を解説していきたいと思います。
それではいってみましょう(^O^)
Menu
配列に要素を追加
先頭に要素を追加する unshift()
unshiftメソッド
・配列の先頭に要素を追加します(複数可)
・追加後の配列数が取得できます。
【サンプル】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼', 'カツ丼']; //先頭に追加(unshift) let foodLength = food.unshift('親子丼','まぐろ丼'); //追加後の配列 console.log(food); //【結果】Array(4) [ "親子丼", "まぐろ丼", "牛丼", "カツ丼" ] //要素数 console.log(foodLength); //【結果】4 // |
末尾に要素を追加する push()
pushメソッド
・配列の末尾に要素を追加します(複数可)
・追加後の配列数が取得できます。
【サンプル】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼', 'カツ丼']; //末尾に追加(push) let foodLength = food.push('親子丼','まぐろ丼'); //追加後の配列 console.log(food); //【結果】Array(4) [ "牛丼", "カツ丼", "親子丼", "まぐろ丼" ] //要素数 console.log(foodLength); //【結果】4 // |
配列の要素を削除
先頭の要素を削除する shift()
shiftメソッド
・配列から最初の要素を削除します。
・削除した要素を取得します。
【サンプル①】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼', 'カツ丼','親子丼']; //先頭を削除(shift) let foodDel = food.shift(); //先頭の要素削除後の配列 console.log(food); //【結果】Array [ "カツ丼", "親子丼" ] //削除した要素を取得します。 console.log(foodDel); //【結果】牛丼 // |
【サンプル②】
1 2 3 4 5 6 7 8 9 10 11 12 | //配列作成 let food = ['牛丼', 'カツ丼','親子丼']; //要素がなくなるまでループして削除した要素名を取得 while( (foodDel = food.shift()) !== undefined ) { console.log(foodDel); } //【結果】 //牛丼 //カツ丼 //親子丼 // |
末尾の要素を削除する pop()
popメソッド
・配列から末尾の要素を削除します。
・削除した要素を取得します。
【サンプル】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼', 'カツ丼','親子丼']; //末尾を削除(pop) let foodDel = food.pop(); //末尾の要素削除後の配列 console.log(food); //【結果】Array [ "牛丼", "カツ丼" ] //削除した要素を取得します。 console.log(foodDel); //【結果】親子丼 // |
位置指定して要素を追加・削除・置換
splice()
spliceメソッド
・要素の追加ができます。
・要素の削除ができます。
・要素の置換ができます。
・削除した要素を取得します。
構文
splice(インデックス指定[,削除数[,要素1[,要素2[, …]]]])
指定した位置に追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼','カツ丼','親子丼']; //インデックスの1番目に追加; let foodRem = food.splice(1,0,'まぐろ丼'); //追加後の配列 console.log(food); //【結果】Array(4) [ "牛丼", "まぐろ丼", "カツ丼", "親子丼" ] //削除はしてないので空の配列取得 console.log(foodRem); //【結果】Array [] // |
指定した位置を削除
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼','カツ丼','親子丼']; //インデックスの0番目から2個削除; let foodRem = food.splice(0,2); //削除後の配列 console.log(food); //【結果】Array [ "親子丼" ] //削除した要素を取得 console.log(foodRem); //【結果】Array [ "牛丼", "カツ丼" ] // |
指定した位置を置換
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //配列作成 let food = ['牛丼','カツ丼','親子丼']; //インデックスの0番目から1個削除し豚丼を追加; let foodRem = food.splice(0,1,'豚丼'); //実行後の配列 console.log(food); //【結果】Array(3) [ "豚丼", "カツ丼", "親子丼" ] //削除した要素を取得 console.log(foodRem); //【結果】Array [ "牛丼" ] // |
配列をコピー
コピーする slice()
sliceメソッド
・引数を指定しない場合は全コピーされます。
・引数に指定インデックス(開始)から指定インデックス(終了) の (インデックス(終了)は含まない) 選択した範囲をコピーします。
・コピーは新しく作成した配列に作成されます。
・元の配列は変更されません。
構文
slice([開始位置[, 最後位置]])
全コピー
1 2 3 4 5 6 7 8 9 10 | //配列作成 let food = ['牛丼','カツ丼','親子丼']; //配列をコピー let foodCopy = food.slice(); //コピー後の配列 console.log(foodCopy); //【結果】Array(3) [ "牛丼", "カツ丼", "親子丼" ] // |
指定位置からすべてコピー
1 2 3 4 5 6 7 8 9 10 | //配列作成 let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼']; //インデックス(3)から全てコピー let foodCopy = food.slice(3); //コピー後の配列 console.log(foodCopy); //【結果】Array [ "豚丼", "まぐろ丼" ] // // |
末尾をコピー
1 2 3 4 5 6 7 8 9 10 | //配列作成 let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼']; //末尾をコピー let foodCopy = food.slice(-3); //コピー後の配列 console.log(foodCopy); //【結果】Array(3) [ "親子丼", "豚丼", "まぐろ丼" ] // // |
指定範囲をコピー
1 2 3 4 5 6 7 8 9 10 11 | //配列作成 let food = ['牛丼','カツ丼','親子丼','豚丼','まぐろ丼']; //インデックス(2)からインデックス(4)までコピー //※インデックス(4)は含まないので注意 let foodCopy = food.slice(2,4); //コピー後の配列 console.log(foodCopy); //【結果】Array [ "親子丼", "豚丼" ] // |