はじめに
JavaScriptの配列操作でよく使用するメソッドについて、簡単にまとめてみたいと思います。
配列操作メソッド一覧
要素の追加
pushメソッド
配列の最後に1つまたは複数の要素を追加することができる。
let fruit = ["apple1", "apple2", "apple3"];
fruit.push("apple4", "apple5");
console.log(fruit); // ["apple1", "apple2", "apple3", "apple4", "apple5"]
unshiftメソッド
配列の先頭に1つまたは複数の要素を追加することができる。
let fruit = ["apple3", "apple4", "apple5"];
fruit.unshift("apple1", "apple2");
console.log(fruit); // ["apple1","apple2","apple3","apple4","apple5"]
要素の削除
popメソッド
配列の最後の要素を削除し、その要素を戻り値として返す。
配列が空の場合は undefined を返す。
let fruit = ["apple1", "apple2", "apple3"];
fruit.pop();
console.log(fruit); // ["apple1", "apple2"]
shiftメソッド
配列の最初の要素を削除し、その要素を戻り値として返す。
配列が空の場合は undefined を返す。
let fruit = ["apple1", "apple2", "apple3"];
fruit.shift();
console.log(fruit); // ["apple2", "apple3"]
※lengthプロパティを用いて削除することも可能。
lengthプロパティに値を設定すると、その値の数だけ要素を残し、それ以外は削除される。
let fruit = ["apple1", "apple2", "apple3", "apple4", "apple5"];
fruit.length = 2;
console.log(fruit); // ["apple1", "apple2"]
条件に一致した要素を取り出す
findメソッド
条件に一致した最初の要素を返す。
const arr = [10, 20, 30, 40, 50];
const result = arr.find(value => value > 30);
console.log(result); // 40
findIndexメソッド
条件に一致した最初の要素のindexを返す。
const arr = [10, 20, 30, 40, 50];
const index = arr.findIndex(value => value > 30);
console.log(index); // 3
繰り返し処理
forEachメソッド
配列の要素を1つずつ実行する。
const arr = [10, 20, 30, 40, 50];
arr.forEach((value) => {
console.log(value);
});
// 10 20 30 40 50
新しい配列を作成
- mapメソッド
指定した条件の結果を新しい配列として返す。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(value => value * 2);
console.log(newArr); // [2, 4, 6, 8, 10]
- filterメソッド
条件に一致した要素のみを取り出し、新しい配列を作成する。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(value => value % 2 !== 0);
console.log(newArr); // [1, 3, 5]
最後に
配列操作のメソッドを簡単に羅列してみました。
他によく使用するものがあれば、追記していきたいと思います。