forEachの使用例

forEcachの使用例

forEachの使い方を備忘録として残しておく。

使用例 その1

やりたいこと

配列に格納されている値に対して繰り返し処理したい

構文

配列.forEach( value, index, arry ){ 各配列の値ごとに行う処理 }
// 第一引数　value: 配列の値が一つずつ渡される
// 第二引数　index: 配列の添え字が一つずつ渡される
// 第三引数　arry: 配列自体が渡される

サンプルコード

// 配列を作成    
const arry1 = ["りんご","メロン","オレンジ"];


// forEachを実行
arry1.forEach( function( value, index, arry ) {
    console.log( "大もとの配列は " + arry )
    console.log( "添え字が" + index + "番目の値は" + value )    
})

arry1.forEach( function( value ) {
    console.log( "好きな果物は" + value )    
})

出力結果

使用例 その2

やりたいこと

配列の各値に対して、関数を適用させたい

構文

配列.forEach( 関数 ) { 各配列の値ごとに行う処理 }

サンプルコード

// 配列を作成    
const arry1 = ["りんご","メロン","オレンジ"];

// 関数を定義
function sampleFunc( arg ){
    console.log( "好きな果物は" + arg ) 
}

// forEachの引数に関数を渡す
arry1.forEach( sampleFunc )

出力結果

使用例 その3

やりたいこと

配列（値がオブジェクト）を繰り返し処理したい

構文

配列.forEach(配列) { 繰り返し処理 }

// 配列を作成    
const arryProductData = [
    {id:1, pdname:"iPhone15", price:2000},
    {id:2, pdname:"iPhone14", price:1500},
    {id:3, pdname:"iPhone13", price:1000},
]


// forEachを実行
arryProductData.forEach( function( arry ) {
    console.log( 
        "製品 " + arry.id ,
        "製品名 " + arry.pdname ,
        "価格 " + arry.price
    )    
})

出力結果

使用例 その4

やりたいこと

• 配列の各値を編集する
• 編集した値を配列に追加する

構文

配列.push(配列に格納する値)

// 配列を作成    
const arryProductData2 = [
    {id:1, pdname:"iPhone15", price:2000},
    {id:2, pdname:"iPhone14", price:1500},
    {id:3, pdname:"iPhone13", price:1000},
]


// 配列の値の個数を取得（この場合は3）
addId = arryProductData2.length


// forEachを実行
arryProductData2.forEach( function( arry ) {
    // 3をベースにして1ずつ加算する
    addId += 1
    // 編集した値を配列に追加する
    arryProductData2.push(
        // 配列の各値を編集する
        { 
            id: addId,
            pdname: arry.pdname + "半額;", 
            price: arry.price/2 
        }
    )
})

console.log(arryProductData2)

出力結果