頭脳一式 
この記事では、配列を順次処理した結果を受け取る方法(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がオススメ！同僚に差をつけよう！
