個人的によく使うJavaScriptの配列メソッドをまとめました。
-
- ループ処理
- forEach / map / filter
-
- 要素の追加
- push / unshift / splice
-
- 要素の削除（取り出し）
- pop / shift / splice
-
- 切り取り
- slice
-
- 検索
- indexOf / lastIndexOf / findIndex / find
-
- テスト判定
- some / every
-
- ソート
- sort
全要素について処理を実施（中断しない）
- forEach(コールバック関数)
- for文の代用
- 新しい配列 = map(コールバック関数)
- コールバック関数が返した値を新しい配列に格納
- 新しい配列 = filter(コールバック関数)
- trueを返す要素のみを新しい配列に格納
const items = ["A", "B", "C", "D", "E"];
items.forEach((value, index) => {
console.log(value, index);
});
// A 0
// B 1
// C 2
// D 3
// E 4
const items1 = ["A", "B", "C", "D", "E"];
const label1 = items.map((value, index) => {
return index + ": " + value;
});
console.log(label1); // ["0: A", "1: B", "2: C", "3: D", "4: E"]
console.log(items1); // ["A", "B", "C", "D", "E"]
const items2 = [{id: 1, name: "A"},
{id: 2, name: "B"},
{id: 3, name: "C"},
{id: 4, name: "D"},
{id: 5, name: "E"}];
const label2 = items2.map((item, index) => {
return item.name;
});
console.log(label2); // ["A", "B", "C", "D", "E"]
const items3 = [{id: 1, name: "A"},
{id: 2, name: "B"},
{id: 3, name: "C"},
{id: 4, name: "D"},
{id: 5, name: "E"}];
const label3 = items3.filter((item, index) => {
return item.id > 3;
});
console.log(label3); // [{id: 4, name: "D"}, {id: 5, name: "E"}]
- push(要素)
- 配列の一番後ろに追加（複数可）
- unshift(要素)
- 配列の一番前に追加（複数可）
- 削除された要素 = splice(index, 削除する数, 追加する要素)
- 削除する数を０にすると追加のみ実施、元の配列が書き換わる
const items1 = ["A", "B", "C", "D", "E"];
items1.push("*");
console.log(items1); // ["A", "B", "C", "D", "E", "*"]
const items2 = ["A", "B", "C", "D", "E"];
items2.unshift("*");
console.log(items2); // ["*", "A", "B", "C", "D", "E"]
const items3 = ["A", "B", "C", "D", "E"];
items3.splice(1, 0, "*");
console.log(items3); // ["A", "*", "B", "C", "D", "E"]
- 一番後ろの要素 = pop()
- 配列の一番後ろを取り出す、空の場合はundefined
- 一番前の要素 = shift()
- 配列の一番前を取り出す、空の場合はundefined
- 削除された要素 = splice(index, 削除する数, 追加する要素)
- 追加する要素を省略すると削除のみ、削除する数も省略するとindex以降をすべて削除、元の配列が書き換わる
const items1 = ["A", "B", "C", "D", "E"]; items1.pop(); console.log(items1); // ["A", "B", "C", "D"] const items2 = ["A", "B", "C", "D", "E"]; items2.shift(); console.log(items2); // ["B", "C", "D", "E"] const items3 = ["A", "B", "C", "D", "E"]; items3.splice(1, 2); console.log(items3); // ["A", "D", "E"] const items4 = ["A", "B", "C", "D", "E"]; items4.splice(2); // items4[2]以降を削除 console.log(items4); // ["A", "B"]
切り取り
- 切り取った要素 = slice(開始index, 終了index(含まない))
- 終了indexを省略すると最後まで切り取り、開始indexも省略すると全要素切り取り（配列のコピー）、元の配列を書き換えない
const items1 = ["A", "B", "C", "D", "E"]; const parts1 = items1.slice(1, 2); console.log(parts1); // ["B"] console.log(items1); // ["A", "B", "C", "D", "E"] const items2 = ["A", "B", "C", "D", "E"]; const parts2 = items2.slice(1); // items2[1]以降を切り取り console.log(parts2); // ["B", "C", "D", "E"] console.log(items2); // ["A", "B", "C", "D", "E"]
Memo
直訳
- splice … 解いて組み継ぎする、つなぎ合わせる
- slice … 切る、切り取る
検索
indexOf / lastIndexOf / findIndex / find
- 見つけた要素のindex = indexOf(探す要素, 検索開始index)
- 検索開始indexは省略可、見つからない場合は-1を返す
- 見つけた要素のindex = lastIndexOf(探す要素, 検索開始index)
- 検索開始indexは省略可、見つからない場合は-1を返す
- 見つけた要素のindex = findIndex(コールバック関数)
- コールバック関数がtrueを返すまで検索、見つからない場合は-1を返す
- 見つけた要素 = find(コールバック関数)
- コールバック関数がtrueを返すまで検索、見つからない場合はundefinedを返す
const items = ["A", "B", "C", "B", "A"];
const index1 = items.indexOf("B"); // indexOf(探す値, 開始index)
console.log(index1); // 1
const index2 = items.lastIndexOf("B"); // lastIndexOf(探す値, 開始index)
console.log(index2); // 3
const index3 = items.findIndex(value => value === "B"); // findIndex(callback)
console.log(index3); // 1
const found = items.find(value => value === "B"); // find(callback)
console.log(found); // B
- true or false = some(コールバック関数)
- コールバック関数で１要素でもtrueを返す場合はtrue
- true or false = every(コールバック関数)
- コールバック関数で全要素がtrueを返す場合はtrue（１要素でもfalseを返す場合はfalse）
const items = [0, 0, 1, 0, 1]; const some1 = items.some(value => value === 1); // 0->0->1->break console.log(some1); // true const every0 = items.every(value => value === 0); // 0->0->1->break console.log(every0); // false
ソート
- sort(比較関数)
- 比較関数の戻り値の正負に従い要素を並べ替える
const items1 = [2, 0, 1, 4, 3]; items1.sort((a, b) => a - b); console.log(items1); // [0, 1, 2, 3, 4] const items2 = [2, 0, 1, 4, 3]; items2.sort((a, b) => b - a); console.log(items2); // [4, 3, 2, 1, 0]
Memo
Array/Stringオブジェクトの同名メソッド
- indexOf
- lastIndexOf
- slice