JavaScript ES6対応 配列メソッドまとめ

Arrayメソッドと記述例をまとめてみました。

forEach

配列の各要素に処理を行う。
後から出てくるmap、filter…等もforEachで記述することができてしまうが、それぞれのメソッドを適切に使用することによりどういった処理を行っているのかがわかりやすくなる。

例1）

インデックスと値を順番に取り出す

const vegetables = ['人参', 'ピーマン', 'キャベツ'];
vegetables.forEach((vegetable, index) => {
    console.log(index, vegetable); //結果 0 人参 1 ピーマン 2 キャベツ
});

例2）

配列の各要素の値でリストを作成

HTML

<ul></ul>

JavaScript

<script>
    const members = ['田中','佐藤','高橋'];
    let html = '';
    members.forEach((member, index) => {
        html += `<li>${index + 1}番目は${member}さんです。`;
    });
    document.querySelector('ul').innerHTML = html;
</script>

map

元の配列から新しい配列を作る。
JSONデータを扱う時にすごく活躍する。

例1）

配列numbersを元に2倍した値を持つdoubledNumbers配列を作る

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); //結果 Array [2, 4, 6]

例2）

名前と点数を持つオブジェクトの配列から点数だけの配列を作る

const results = [
    {name:'田中', score: 80},
    {name:'鈴木', score: 52},
    {name:'山本', score: 97}
];    
const scores = results.map(result => result.score);
console.log(scores); //結果 Array [80, 52, 97]

例3）

WordPress REST APIから投稿一覧をJSON形式で取得してjQueryの$.getJSONを使ってリストで出力する例

$.getJSON('https://illustswitch.com/wp-json/wp/v2/posts, posts => {                
    $(セレクタ).html(`    
    <ul>
        ${posts.map(post => `<li><a href="${post.link}">${post.title.rendered}</a></li>`).join('')}
    </ul>
    `);
});

filter

元の配列から条件を満たす新しい配列を作る

例1）

0以上だけの要素を抽出して新しい配列を作る

const numbers = [1, 3, 10, 80, 135];
const numbers2 = numbers.filter(number => number >= 50);
console.log(numbers2); //結果 Array[80, 135]

例2）

赤いフルーツのみを抽出して新たにredFruits配列を作成する

const fruits = [
    {name:'いちご', color:'赤'},
    {name:'バナナ', color:'黄'},
    {name:'さくらんぼ', color:'赤'},
    {name:'メロン', color:'緑'}
];
const redFruits = fruits.filter(fruit => fruit.color === '赤');
console.log(redFruits); //結果 [ {name:'いちご', color:'赤'}, {name:'さくらんぼ', color:'赤'}]

find

条件を満たす（= true）最初の要素を取得する

例）

配列から”バナナ”を取得

const fruits = ['いちご', 'メロン', 'バナナ', 'さくらんぼ', 'レモン'];
const fruit2 = fruits.find(fruit => fruit === 'バナナ');
console.log(fruit2); //結果　バナナ

reduce

配列の各要素を累積して1つの値にまとめあげる

例

要素の合計値を計算
0の部分はaccumulatorの初期値（0の場合は省略可）

const numbers = [10, 20, 30];
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);
console.log(sum); //結果 60　

everyとsome

every

配列のすべての要素が条件を満たせばtrueを返す

const numbers = [20, 35, 50, 120, 255];
console.log(numbers.every(number => number > 10)); //結果 true
console.log(numbers.every(number => number > 50)); //結果 false

some

配列のいずれかの要素が条件を満たせばtrueを返す

const numbers = [20, 35, 50, 120, 255];
console.log(numbers.some(number => number > 10)); //結果 true
console.log(numbers.some(number => number > 50)); //結果 true
console.log(numbers.some(number => number > 300)); //結果 false

スプレッド演算子

例）

複数の配列を結合してひとつにする

const array1 = ['みかん', 'りんご'];
const array2 = ['レモン'];
const array3 = ['すいか','キウイ','さくらんぼ'];
const array4 = [...array1, ...array2,...array3];
console.log(array4); //結果['みかん', 'りんご','レモン','すいか','キウイ','さくらんぼ']