配列メソッドの実用的サンプル(JavaScript)

メソッドを短く説明

• ループ
  • forEach : 全要素に対して指定関数を実行しますが、undefinedを返します。(MDN)
  • map : 全要素に対して指定関数を実行し、それぞれの返り値からなる配列を返します。(MDN)
• 追加・削除
  • push : 配列の後尾に要素を追加して、配列を変更します。(MDN)
  • pop : 配列から最後の要素を取り除いてその値を返し、配列を変更します。(MDN)
  • unshift : 配列の先頭に要素を追加して、配列を変更します。(MDN)
  • shift : 配列から最初の要素を取り除いてその値を返し、配列を変更します。(MDN)
  • concat : 引数の配列を後ろに結合した配列を返します。(MDN)
• 取り出し
  • slice : 指定範囲の要素からなる配列を返します。(MDN)
• 探索
  • indexOf : 指定値と等しい最初の要素のインデックス番号を返します。(MDN)
  • lastIndexOf : 指定値と等しい最後の要素のインデックス番号を返します。(MDN)
  • includes : 指定値と等しい要素があるかの、booleanを返します。(MDN)
  • find : 指定関数による条件を満たす最初の要素の値を返します。(MDN)
  • findIndex : 指定関数による条件を満たす最初の要素のインデックス番号を返します。(MDN)
• 条件
  • every : 全ての要素が指定関数による条件を満たすかの、booleanを返します。(MDN)
  • some : いずれかの要素が指定関数による条件を満たすかの、booleanを返します。(MDN)
  • filter : 指定関数による条件を満たす要素からなる配列を返します。(MDN)
• 置換
  • fill : 指定範囲の要素を指定値で置き換えた、配列に変更します。(MDN)
  • splice : 要素を追加または置換または削除して、配列を変更します。(MDN)
  • copyWithin : 配列の指定場所を同じ配列内の指定範囲にある値で置き換えた、配列に変更します。(MDN)
• 平坦化
  • flat : 配列の中の配列を展開し、指定値以上の深さが無くなった配列を返します。(MDN)
  • flatMap : map()と同じ引数で全ての要素に関数を実行した後、flat()を行います。(MDN)
• 文字列化
  • join : 全要素の値を指定文字列でつなげた、文字列を返します。(MDN)
  • toString : 全要素の値を、コンマでつなげた文字列を返します。(MDN)
  • toLocaleString : 全要素の値を地域に合った形式に変換して、コンマでつなげた文字列を返します。(MDN)
• イテレーション
  • entries : それぞれの要素のインデックス番号と値が格納されたイテレータを返します。(MDN)
  • keys : それぞれの要素のインデックス番号が格納されたイテレータを返します。(MDN)
  • values : それぞれの要素の値が格納されたイテレータを返します。(MDN)
• 順序変更
  • reverse : 配列の順番を逆にしたものに変更します。(MDN)
  • sort : 全要素を並び替えて、配列を変更します。(MDN)
• 単一化
  • reduce : 先頭とその次の要素を指定関数によって単一の値にするのを、要素が1つになるまで繰り返します。(MDN)
  • reduceRight : 後尾とその前の要素を指定関数によって単一の値にするのを、要素が1つになるまで繰り返します。(MDN)

サンプルコード

forEach

以下ではHTML要素に変更を加えます。関数内で完結するので、返り値を得る必要はありません。

const elems = document.querySelectorAll('.data_table td:first-child');
[...elems].forEach((elem, i) => elem.textContent = i);

map

以下では記事一覧のデータから、記事名を取り出して配列にします。

const titles = posts.map(post => post.title);

indexOf

以下では単語の重複を除去します。new Setが使えないブラウザでも動作します。

const words = allWords.filter((cat, i, arr) => arr.indexOf(cat) === i);

findIndex

以下では、ある記事IDが何番目の記事のIDなのかを調べます。Gatsbyなどで使われやすいです。

const postIndex = posts.findIndex(post => post.slug);

filter

以下では行数カウンタを作るために、textarea要素から取得した複数行のテキストを、行ごとに配列の要素にして空行は除去します。

const inputElem = document.querySelector('.input__text__multi_line');
const contentEachLine = inputElem.value.split('\n');
const vaildLineCount = contentEachLine.filter(Boolean).length;

splice + concat + copyWithin

以下では、月初から月末までの曜日を配列にします。

const weekday = ['日', '月', '火', '水', '木', '金', '土'];
const nowDate = new Date(); // 2020-12-18
const firstWeekday = new Date(nowDate.setDate(0)).getDay();
const monthCount = new Date(nowDate.getFullYear(), nowDate.getMonth() + 2, 0).getDate(); // 31
const weekdayShift = weekday.splice(firstWeekday + 1).concat(weekday);
const monthWeekday = weekdayShift.concat(Array(monthCount - 7));
for (let day = 0; day < monthCount; day += 7) {
    monthWeekday.copyWithin(day, 0, 7);
}
// monthWeekday = ['火', '水', '木', '金', '土', '日', '月', '火', '水', '木', '金', '土', '日', '月', '火', '水', '木', '金', '土', '日', '月', '火', '水', '木', '金', '土', '日', '月', '火', '水', '木']

splice()がポイントで、配列の指定インデックス以降を取り除いた配列に変更しつつ、取り除かれた要素からなる配列が次のconcat()に繋がり、後ろに連結されます。前にあった要素を後ろに並べているのです。

entries

以下では、デバッグのためにログに出力します。

// token = ['<', 'p', '>', 'title', '<', '/', 'p', '>']
for (const [key, value] of token.entries()) {
    console.log(`${key}番目はの値は${value}です`);
}

reduce

以下では表から数字を取得して、その平均値を求めます。

const dataElems = document.querySelectorAll('.data_table td:nth-child(3)');
const nums = [...dataElems].map(elem => +elem.textContent).filter(Number.isFinite);
const average = nums.reduce((leftVal, rightVal) => leftVal + rightVal) / nums.length;

参考リンク

• Array - JavaScript | MDN