JSの配列処理に関する便利メソッドについて調べてみた #JavaScript

JavaScriptの便利メソッドについて

JavaScriptについていろいろと調べていたらはいつの間にか便利メソッドが色々と追加されていたので調べてみました。for文で書いた場合との違いを比較してみたところ、これらのメソッドをうまく使うことができれば可読性が良くなりそうです。

Array.prototype.forEach()

与えられた関数を、配列の各要素に対して一度ずつ実行します。

Array.prototype.forEach()

const array = [0, 1, 2, 3, 4, 5, 6];
    array.forEach(value => {
    console.log(value *10);
});

//上記をfor文で書いた場合
const array = [0, 1, 2, 3, 4, 5, 6];
for(let i=0; i<array.length; i++){
    console.log(array[i]*10);
}

Array.prototype.map()

mapはある配列から新しい配列を作りたいときに使用します。
forEachの場合は配列の中の要素を順次見ていくだけですが、mapメソッドはそれを返り値として返します。

Array.prototype.map()

const array = [0, 1, 2, 3, 4, 5, 6];
const newArray = array.map(value => {
    return value * 10
});

console.log(array);  //[0, 1, 2, 3, 4, 5, 6]
console.log(newArr); //[0, 10, 20, 30, 40, 50, 60]

//上記をfor文で書いた場合
let array = [0, 1, 2, 3, 4, 5, 6];
let newArr = [];
for(var i=0; i<array.length; i++){
    newArr.push(array[i] * 10);
}

console.log(array);  //[0, 1, 2, 3, 4, 5, 6]
console.log(newArr); //[0, 10, 20, 30, 40, 50, 60]

Array.prototype.filter()

条件に一致した配列の要素をすべて抽出して新しい配列を生成します。

Array.prototype.filter()

const array = [0, 1, 2, 3, 4, 5, 6];
const newArray = array.filter(value => {
    return value % 2 === 1; //奇数だけ抽出する
});
console.log(newArray); //[1, 3, 5]

//上記をfor文で書いた場合
const array = [0, 1, 2, 3, 4, 5, 6];
let newArray = [];
for(let i=0; i<array.length; i++){
    //奇数だけ抽出する
    if(array[i] % 2 === 1){
        newArray.push(array[i]);
    }
}
console.log(newArray); //[1, 3, 5]

Array.prototype.find()

findメソッドは配列の中の条件に一致した最初の要素を一つ返します。
見つからない場合undefinedを返します。

Array.prototype.find()

const array = [0, 1, 2, 3, 4, 5, 6];
const res = array.find(element => {
    return element > 3;
});
console.log(res); //4

//上記をfor文で書いた場合
const array = [0, 1, 2, 3, 4, 5, 6];
for(let i=0; i<array.length; i++){
    if(array[i] > 3){
        let res = array[i];
        console.log(res); //4
        break;
    }
}

Array.prototype.reduce()

const array = [0, 1, 2, 3, 4, 5, 6];
const res = array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
});
console.log(res); //21

//上記をfor文で書いた場合
const array = [0, 1, 2, 3, 4, 5, 6];
let res = 0;
for(let i=0; i<array.length; i++){
    res += array[i];
}
console.log(res); //21

Array.prototype.reduceRight()

基本的にはreduceと同じです、違うのは配列を右から処理していく点でになります。

Array.prototype.reduceRight()

const array = [0, 1, 2, 3, 4, 5, 6];
const res = array.reduceRight((accumulator, currentValue) => {
    return accumulator + currentValue;
});
console.log(res); //21

//上記をfor文で書いた場合
const array = [0, 1, 2, 3, 4, 5, 6];
let newArray = array.reverse(); //配列を反転
let res = 0;
for(let i=0; i<newArray.length; i++){
    res += array[i];
}
console.log(newArray); //21

まとめ

for文でも同様な実装は可能ですが、上記メソッドを使用すると、filterやfindなどメソッド名を見るだけでそれがどういう処理をしているのか容易に判断できるようになり可読性がよくなりそうです。