配列のメソッド一覧
個人的に実務で使用頻度が高いと思うメソッドには *（アスタリスク）を付与しています。こちらを参考に優先度をつけて学習するのがオススメです。
基本メソッド
isArray(obj)
指定したobjが配列であるかどうかをBooleanで返す
const ary = ['a', 'b', 'c'];
console.log(Array.isArray(ary)); // true
includes(el)*
elが配列に含まれているかどうかをBooleanで返す
const ary = ['a', 'b', 'c'];
console.log(ary.includes('c')); // true
indexOf(el, [index])
引数に指定した要素と合致する最初の要素のキーを取得する（indexは検索の開始位置、省略可能）
const ary = ['a', 'b', 'c'];
console.log(ary.indexOf('b')); // 1
toString()
配列を文字列に変換する
const ary = ['a', 'b', 'c'];
console.log(ary.toString()); // a, b, c
要素追加メソッド
push(el)
配列の末尾に要素を追加する
const ary = ['a', 'b', 'c'];
console.log(ary.push('d')); // ['a', 'b', 'c', 'd']
unshift(el)
配列の先頭に要素を追加する
const ary = ['b', 'c', 'd'];
console.log(ary.unshift('a')); // ['a', 'b', 'c', 'd']
要素削除メソッド
pop()
配列の末尾の要素を削除する
const ary = ['a', 'b', 'c'];
console.log(ary.pop()); // ['a', 'b']
shift()
配列の先頭の要素を削除する
const ary = ['a', 'b', 'c'];
console.log(ary.shift()); // ['b', 'c']
配列加工メソッド
concat(Array)
引数に指定した配列を後方に連結する
const ary1 = ['a', 'b', 'c'];
const ary2 = ['d', 'e', 'f'];
console.log(ary1.concat(ary2)); // ['a', 'b', 'c', 'd', 'e', 'f']
slice(start, [end])
start+1番目からend番目までの要素を取り出す（endは省略可能、省略した場合は末尾まで）
const ary = ['a', 'b', 'c', 'd', 'e'];
console.log(ary.slice(2)); // ['c', 'd', 'e']
console.log(ary.slice(1, 3)); // ['b', 'c']
splice(start, end, [el, ...])
start+1番目からstart+end番目までの要素をelで置き換える
const ary = ['a', 'b', 'c', 'd', 'e'];
console.log(ary.splice(1, 2, 'x', 'y')); // ['a', 'x', 'y', 'd', 'e'];
endの値を0にするとstartで指定した位置にelを挿入する
const ary = ['a', 'b', 'c'];
console.log(ary.splice(1, 0, 'x')); // ['a', 'x', 'b', 'c'];
elを指定しないとstart+1番目からstart+end番目までの要素を削除する
const ary = ['a', 'b', 'c', 'd', 'e'];
console.log(ary.splice(1, 3)); // ['a', 'e'];
fill(el, [start, end])
start+1番目からend番目までの要素をelで置き換える
const ary = ['a', 'b', 'c', 'd', 'e'];
console.log(ary.fill('x', 1, 3)); // ['a', 'x', 'x', 'd', 'e']
要素並べ替えメソッド
sort()
要素を昇順に並び替える
const ary = ['c', 'b', 'a'];
console.log(ary.sort()); // x['a', 'b', 'c']
reverse()
要素を逆順に並び替える
const ary = ['a', 'b', 'c'];
console.log(ary.reverse()); // ['c', 'b', 'a']
コールバック系メソッド
コールバック関数では共通して引数を3つまで取ることが可能です。
- 第1引数value＝要素の値
- 第2引数index＝要素のインデックス
- 第3引数array＝元の配列
もちろん使用しない引数は省略して問題ありません。
forEach(callback)*
配列の要素をcallbackで順に処理する（返り値ナシ）
const ary = [1, 2, 3];
ary.forEach((value) => {
console.log(value + value); // 2, 4, 6
});
map(callback)*
配列の要素をcallbackで順に処理する（返り値アリ）
const ary = [1, 2, 3];
const result = ary.map((value) => {
return value + value;
});
console.log(result); // 2, 4, 6
filter(callback)*
条件callbackに合致した要素で新しく配列を生成する
const ary = [3, 4, 5, 6];
const result = ary.filter((value) => {
return value % 3 === 0;
});
console.log(result); // [3, 6]
find(callback)*
関数callbackが初めてtrueを返した要素を取得する
const ary = [3, 4, 5, 6];
const result = ary.find((value) => {
return value > 5;
});
console.log(result); // 6
every(callback)*
配列のすべての要素が条件callbackに一致するかをBooleanで返す
const ary = [3, 6, 9];
const result = ary.every((value) => {
return value % 3 === 0;
});
console.log(result); // true
some(callback)*
配列のいづれかの要素が条件callbackに一致するかをBooleanで返す
const ary = [1, 3, 5, 7];
const result = ary.some((value) => {
return value % 2 === 0;
});
console.log(result); // false
まとめ
すべてのメソッドを網羅しているわけではないのであしからず。やはり使用頻度が高いメソッドはコールバック系のメソッドですね。もし頻出なメソッドが抜けていたら教えていただけるとありがたいです。
Twitterアカウント
Twitterも更新していますので、よかったらフォローお願いします！
Twitterアカウントはこちら