【JavaScript】配列から偶数・奇数番目の要素を取得する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで配列から偶数番目もしくは奇数番目の要素を取得する方法をご紹介しています。

JavaScriptで配列から偶数番目・奇数番目の要素を取得したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

配列から偶数番目の要素を取得する

配列から偶数番目の要素を取得します。Arrayの下記メソッドを使って偶数番目の要素を取得してみます。

Array.forEach()

const even = (array)=>{
    
    const result = [];
    
    array.forEach((element, index)=>{
        if(index % 2 === 0){
            result.push(element);
        }
    });
    
    return result;
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(even(array));

//実行結果
[object Array] (4) ["a","c","e","g"]

Array.map()

const even = (array)=>{    
    return array.map((element, index) => {
        return index % 2 === 0 ? element: '';
    }).filter(Boolean);
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(even(array));

//実行結果
[object Array] (4) ["a","c","e","g"]

Array.filter();

const even = (array)=>{    
    return array.filter((element, index) => {
        return index % 2 === 0;
    });
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(even(array));

//実行結果
[object Array] (4) ["a","c","e","g"]

これで配列から偶数番目の要素を取得することができます。

配列から奇数番目の要素を取得する

配列から奇数番目の要素を取得します。計算式以外は前項と同様の処理を実行しています。

array.forEach()

const odd = (array)=>{
    
    const result = [];
    
    array.forEach((element, index)=>{
        if(index % 2 !== 0){
            result.push(element);
        }
    });
    
    return result;
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(odd(array));

//実行結果
[object Array] (4) ["b","d","f","h"]

array.map()

const odd = (array)=>{    
    return array.map((element, index) => {
        return index % 2 !== 0 ? element: '';
    }).filter(Boolean);
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(odd(array));

//実行結果
[object Array] (4) ["b","d","f","h"]

array.filter();

const odd = (array)=>{    
    return array.filter((element, index) => {
        return index % 2 !== 0;
    });
}

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
console.log(odd(array));

//実行結果
[object Array] (4) ["b","d","f","h"]

これで配列から奇数番目の要素を取得することができます。

最後に

プログラミングで偶数番目、奇数番目を取得する場合は余剰演算子を使うことが多いです。2で割り切れれば偶数、割り切れない場合は奇数と判断できるためですね。

CSSであればoddevenが予め用意されています。言語に組み込まれている場合はそちらを使用し、ない場合は余剰演算子を使うと良いかもしれませんね。

以上、JavaScriptで配列から偶数・奇数番目の要素を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。