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

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>
ついでのメモ

“getElementsByClassName()”で返ってくるHTMLCollectionは配列っぽいけれど配列では無いので、Array.from( elements )等を使って配列に変換しないとforEachは使えない。
(だけど何故か”querySelectorAll()”は対応している…ややこしや)

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つの値にまとめあげる

構文

配列.reduce(コールバック関数[, 初期値])

要素の合計値を計算
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を返す

すべての要素が10以上? → true
すべての要素が50以上? → false

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を返す

いずれかの要素が10以上? → true
いずれかの要素が50以上? → true
いずれかの要素が300以上? → false

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
ポイント

everyが”AND(&&)”、someが”OR(||)”検索といったトコロです。

スプレッド演算子

例)

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

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

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ