最新版！JavaScript入門配列メソッドのまとめ/初心者向け解説

JavaScriptの配列で全要素に対してアクセスを行うメソッドを使う場面が、サンプルアプリを作るときに多々ありました。

そこで、備忘録と初学者の方向けも兼ねて解説していきます。

本記事のペルソナ

JavaScript初学者の方向け
配列のメソッドを知りたい方
JavaScriptについて基礎を抑えている方

今回はサマリーという位置づけでありますので、初学者の方という向けよりは基礎を抑えている方向け寄りの解説になります。

配列メソッドまとめ
まとめ
参考文献

配列メソッドまとめ

length

let sample = [10,30,400,1,33,45,3,52,6];

console.log(sample);
console.log(sample.length);

配列の長さを取得するプロパティ。
おそらく最も使用するプロパティの一つ。

pop, push

sample = [10,30,400,1,33,45,3,52,6];

sample.pop()
console.log(sample);

配列の最後尾の要素を消去するメソッド

sample = [10,30,400,1,33,45,3,52,6];

sample.push(0)
console.log(sample);

配列の最後尾に新しく要素を追加するメソッド。

shift, unshift

sample = [10,30,400,1,33,45,3,52,6];
sample.shift();
console.log(sample);

配列の先頭を消去するメソッド。

sample = [10,30,400,1,33,45,3,52,6];
sample.unshift();
console.log(sample);

先頭に要素を追加するメソッド。
追加する要素は1つ以上。

splice

sample = [10,30,400,1,33,45,3,52,6];
sample.splice(1,2);
console.log(sample);

任意の要素を削除・追加・置換するなど、やれることが多いメソッド。
複数の要素を同時に処理することも可能。

reverse, sort

sample = [10,30,400,1,33,45,3,52,6];

console.log(sample.reverse());

要素の順序をすべて逆にするメソッド。

sample = [10,30,400,1,33,45,3,52,6];

console.log(sample.sort());

要素を文字コード単位でソートする。数字の場合大小でのソートにはならないところは注意。

forEach

sample = [10,30,400,1,33,45,3,52,6];

let sum = 0;

sample.reverse().forEach((elem) => {
    sum += elem;
})
console.log(sum);

各要素に対して定義した関数を実行する。

filter


const filterAry = sample.filter((elem)=> {
    return 10 < elem && elem < 200;
})
console.log(filterAry);

条件に一致する要素のみを抽出する。

map

sample.map((elem) => {
    console.log(elem);
})

各要素に対して処理を行った新たな配列を生成するほか、forEachのように関数も定義可能。

every

let bool = sample.every((elem)=>{
    return 0 < elem && elem <= 1000;
})

console.log(bool);

bool = sample.every((elem)=>{
    return 120 === elem;
})

console.log(bool);

配列のすべての要素が条件式に一致した場合、Trueを返す。そうでなければFalseを返す。

some

bool = sample.some((elem)=>{
    return elem < 0 ;
})

console.log(bool);

bool = sample.some((elem)=>{
    return 100 <  elem;
})

console.log(bool);

配列の要素のうち、少なくとも1つでも条件式に一致した場合、Trueを返す。そうでなければFalseを返す。