【8/31まで 今季最大のセール開催中!】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】配列を順次処理する方法(forEachの使い方)

【Javascript】配列を順次処理する方法(forEachの使い方)

この記事では、配列の要素を順次処理する方法について説明します。

forEachの基本的な使い方

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

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
array.forEach(function(val){
    console.log(val);
});

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

実行結果

html
css
js
java
php
python

基本的には順次処理した結果を受け取ることはできません。
以下のようにreturnしてもundefindが返るだけです。

js

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

console.log(result);//undefined

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

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

js

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

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

実行結果

htmlは簡単
cssは簡単
jsは簡単
javaは簡単
phpは簡単
pythonは簡単

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

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

js

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

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

実行結果

htmlは簡単
cssは簡単
jsは簡単
javaは簡単
phpは簡単
pythonは簡単

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

forEach内であればメソッドの戻り値を別メソッドに渡すこともできます。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
array.forEach(function(val){
    let result = kantan(val);
    let result2 = desu(result);
    console.log(result2);
});

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

実行結果

htmlは簡単です。
cssは簡単です。
jsは簡単です。
javaは簡単です。
phpは簡単です。
pythonは簡単です。

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です