JavaScriptでの配列の操作方法はたくさんあり、ついついあれってどうやるんだっけ？？と、忘れがちなものです。
今回は主要な配列のメソッドについて紹介します！
※メソッドによって、元の配列を変更するもの(破壊的メソッド)と、参照の異なる新しい配列を作成して返すもの(非破壊的メソッド)とがあるので注意してしようしましょう。
配列の末尾に要素を追加する
配列.push(要素)で、対象の配列の末尾に引数に指定した要素を追加できます。返値は配列の長さになります。
メソッドを実行した配列そのものが変更されます。
const fruits = ["りんご", "バナナ"];
fruits.push('みかん'); // 配列の末尾に要素を追加
console.log(fruits); // ["りんご", "バナナ", "みかん"]となる配列の末尾の要素を削除する
配列.pop()で、対象の配列の末尾の要素を削除できます。返値は削除された要素になります。
メソッドを実行した配列そのものが変更されます。
const fruits = ["りんご", "バナナ", "みかん"];
fruits.pop(); // 配列の末尾の要素を削除
console.log(fruits); // ["りんご", "バナナ"]となる配列の先頭に要素を追加する
配列.unshift(要素)で、対象の配列の先頭に引数で指定した要素を追加できます。返値は配列の長さになります。
メソッドを実行した配列そのものが変更されます。
const fruits = ["りんご", "バナナ"];
fruits.unshift("いちご"); // 配列の先頭に要素を追加
console.log(fruits); // ["いちご", "りんご", "バナナ"]となる配列の先頭の要素を削除する
配列.shift()で、対象の配列の先頭の要素を削除できます。返値は削除された要素になります。
メソッドを実行した配列そのものが変更されます。
const fruits = ["いちご", "りんご", "バナナ"];
fruits.shift(); // 配列の先頭の要素を削除
console.log(fruits); // ["りんご", "バナナ"]となるインデックスを指定して要素を削除・追加する
配列.splice(削除する要素のインデックス, 削除する個数, 追加する要素, 追加する要素...)で、対象の配列の要素のインデックスを指定して削除したり、必要に応じて要素を置き換えたりできます。
メソッドを実行した配列そのものが変更されます。
const fruits = ["いちご", "りんご", "バナナ"];
fruits.splice(0, 1, "みかん"); // 配列の要素[0]を削除して"みかん"に置き換える
console.log(fruits); // ["みかん", "りんご", "バナナ"]となる
fruits.splice(1, 1); // 配列の要素[1]から1個分の要素を削除する
console.log(fruits); // ["みかん", "バナナ"]となる- 第一引数は必須で、削除する要素のインデックスを指定します。
- 第二引数で、第一引数で指定したインデックスから何個の要素を削除するか指定します。第二引数以降を省略すると、第一引数で指定したインデックス以降の要素を全て削除します。
- 第三以降の引数はオプションで、削除した要素の位置へ挿入する要素を指定します。
- 要素の追加のみを行いたい場合は、第二引数を
0として、第三引数以降を指定します。
配列をコピーする
配列.slice(コピーを始める要素のインデックス, コピーを終了する要素のインデックス＋１)で、配列の一部をコピーして新しい配列を返します。
メソッドを実行した配列そのものは変更されません。
二つ目の引数は、コピーする範囲の終わりを指定しますが、そのインデックスの要素は含まず、直前までを抽出するので注意が必要です。
const fruits = ["いちご", "りんご", "バナナ"];
const fruitsSlice = fruits.slice(1, 3); // 配列の要素[1]から、[3]の直前までの要素を抽出して返す
console.log(fruitsSlice); // ["りんご", "バナナ"]となる配列全体をコピーして新しい配列を作る場合はスプレット構文を使うのが便利です。
const fruits = ["いちご", "りんご", "バナナ"];
const fruitsSlice = [...fruits]; // 参照の異なる新しい配列を作成複数の配列を結合する
配列.concat(結合する配列, 結合する配列, ...)で、配列の後ろに、引数で渡した配列を順に結合して、新しい配列を返します。
メソッドを実行した配列そのものは変更されません。
const fruits = ["いちご", "りんご", "バナナ"];
const fruitsConcat = fruits.concat(["みかん","スイカ"]); // fruitsの後ろに配列結合して返す
console.log(fruitsConcat); // ["いちご", "りんご", "バナナ", "みかん", "スイカ"]となる配列の要素を並べ替える
配列.sort(比較関数)で対象の配列の要素を並べ替えます。
メソッドを実行した配列そのものが変更されます。
const fruits = ["いちご", "りんご", "バナナ", "みかん", "スイカ"];
fruits.sort();
console.log(fruits); // ["いちご", "みかん", "りんご", "スイカ", "バナナ" ]となる
const num = [1, 111, 2, 5, 223];
num.sort();
console.log(num); // [1, 111, 2, 223, 5]となる(文字列として扱われる)
num.sort(function(a, b){
// 各要素を比較し、数値の小さいものから順に並べる
return a - b;
});
console.log(num); // [1, 2, 5, 111, 223]となる
const fruitList = [
{name: "いちご", price: 300},
{name: "りんご", price: 130},
{name: "みかん", price: 200}
]
fruitList.sort(function(a, b){
return a.price - b.price; // priceプロパティを比較し、小さい順に並べる
});
console.log(fruitList);
// [
// {name: "りんご", price: 130},
// {name: "みかん", price: 200},
// {name: "いちご", price: 300}
// ]となる- 引数を省略すると、要素を文字列に変換してから文字コード順に並べ替えられます。この時、要素が数値でも、文字列として並び替えが行われるので注意が必要です。
- 引数には並べ替えを制御する関数
function(a, b){}を与えられます。引数a、bには比較する各要素が入り、この関数の返値によって次のように並び順を制御できます。
| 比較関数の返値 | ソート順 |
|---|---|
| 正の値 | aをbの後に並べる（[b, a]のようになる） |
| 負の値 | aをbの前に並べる（[a, b]のようになる） |
| 0 | aとb元の順序を維持する |
数値の並び替えや、オブジェクトの配列のソートを行いたい場合は、関数で処理を定義してsortの引数に渡します。
各要素を編集して新しい配列を返す
配列.map(関数)で、各要素に対してコールバック関数内で定義した処理を順に実行し、その結果を用いて新しい配列を返します。
メソッドを実行した配列そのものは変更されません。
const numbers = [1, 2, 3, 4, 5];
const numbers2 = numbers.map(function(num, index){
return num * 2; // 各要素を取り出して2倍にする
});
console.log(numbers2); // [2, 4, 6, 8, 10]となる- 配列の各要素を取り出して、引数に指定したコールバック関数を実行します
- コールバック関数は第一引数に配列の要素、第二引数に該当の要素のインデックスを受け取ります
- コールバック関数内で各要素を編集し、
returnすることで、新しい配列の要素を返します
条件に合う要素を抽出して新しい配列で返す
配列.filter(関数)で、各要素に対してコールバック関数で定義した処理を実行し、条件に合う要素を抽出して新しい配列を返します。
メソッドを実行した配列そのものは変更されません。
const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = numbers1.filter(function(num, index){
if (num % 2 == 0){
return true; // 取り出した要素が偶数ならnumbers2の要素に追加
}else{
return false; // 取り出した要素が奇数なら破棄
}
});
console.log(numbers2); // [2, 4]となる- 配列の各要素を取り出して、引数に指定したコールバック関数を実行します
- コールバック関数は第一引数に配列の要素、第二引数に該当の要素のインデックスを受け取ります
- コールバック関数内で
trueを返す時はその要素は新しい配列へ、falseを返す時は破棄されます
各要素の値を累積して単一の値を返す
配列.reduce(関数)で、各要素個別にコールバック関数内で定義した処理を実行し、各要素の値を累積して単一の値を返します。
メソッドを実行した配列そのものは変更されません。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue){
return accumulator + currentValue; // 配列の要素順次足していく
},0);
console.log(sum); // 15となる- 配列の各要素を取り出して、第一引数に指定したコールバック関数を実行します
- コールバック関数は第一引数に前回の要素で実行したコールバックの返値を、第二引数に順次取り出す配列の要素を受け取ります
- コールバック関数の初回実行時には、第一引数には初期値(
reduceの第二引数で指定)が入ります - コールバック関数で返した値は次の要素のコールバック関数の第一引数に入り、最後の要素の処理時には
reduceの返値となります
各要素に対して処理を実行する
配列.forEach(関数)で、各要素に対してコールバック関数で定義した処理を実行します。返値はundefinedです。
メソッドを実行した配列そのものは変更されません。
for文よりも使い勝手が良く、mapやfilter等だけでは事足りない時に便利です。
const arr = [];
const numbers = [1, 2 ,3 ,4 , 5, 6, 7, 8, 9];
numbers.forEach(function(num, index){
if(num % 2 == 0){
arr.push(num * 2); // 偶数のみを2倍にしてarrへ追加
}
});
console.log(arr); // [4, 8, 12, 16]となる- 配列の各要素を取り出して、コールバック関数を実行します
- コールバック関数は第一引数に配列の要素、第二引数に該当の要素のインデックスを受け取ります
まとめ
配列のメソッドはいろいろありますが、特によく使うものを紹介しました。
破壊的、非破壊的の区分もあるので注意して使用しましょう。