Categories: JavaScript

【JavaScript入門】配列を順次処理した結果を受け取る(mapの使い方)

この記事では、配列を順次処理した結果を受け取る方法(mapの使い方)について説明します。

mapの基本的な使い方

mapの基本的な呼び出し方は以下のとおりです。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.map(function(val){
    let moji = "は簡単";
    return val + moji;
});

console.log(result);

実行結果は以下のとおりです。

実行結果

[ 'htmlは簡単', 'cssは簡単', 'jsは簡単', 'javaは簡単', 'phpは簡単', 'pythonは簡単' ]

map内で別メソッドを呼び出す方法その1

map内で別メソッドを呼び出して処理するには次のように記述します。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.map(function(val){

    return kantan(val);
});

function kantan(val){
    let moji = "は簡単";
    return val + moji;
}

console.log(result);

実行結果は以下のとおりです。

実行結果

[ 'htmlは簡単', 'cssは簡単', 'jsは簡単', 'javaは簡単', 'phpは簡単', 'pythonは簡単' ]

map内で別メソッドを呼び出す方法その2

定義済みのメソッドを呼び出したい場合は、function内で呼び出さずにいきなり呼び出すこともできます。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.map(val => kantan(val));

function kantan(val){
    let moji = "は簡単";
    return val + moji;
}

console.log(result);

実行結果は以下のとおりです。

実行結果

[ 'htmlは簡単', 'cssは簡単', 'jsは簡単', 'javaは簡単', 'phpは簡単', 'pythonは簡単' ]

map内で呼び出したメソッドの戻り値を別メソッドに渡す

map内で複数のメソッドを呼び出すこともできます。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.map(function(val){
    let kekka = kantan(val);
    return desu(kekka);
});

function kantan(val){
    let moji = "は簡単";
    return val + moji;
}

function desu(val){
    let moji = "です。";
    return val + moji;
}

console.log(result);

実行結果は以下のとおりです。

実行結果

[ 'htmlは簡単です。',
  'cssは簡単です。',
  'jsは簡単です。',
  'javaは簡単です。',
  'phpは簡単です。',
  'pythonは簡単です。' ]

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp