Javascriptの地図アレイ最後のアイテム

Question

私はこれを持っています。 各行の後に、<div class="clearfix"></div>を挿入したいと思います。

私は何とか各行の最後のインデックスを取得できたら、それを行マップコールバックで使用できるようになると思います。誰かが私にそれをする方法を示すことができますか？

Answer 1

const rowLen = row.length; 
row.map((rank, i) => { 
    if (rowLen === i + 1) { 
    // last one 
    } else { 
    // not last one 
    } 
}) 

Answer 2

LeoYuan 袁力皓が答えたように、これは正解ですが、それは少し改善することができます。
mapは、反復配列そのものである第3のパラメータを持つ関数を受け入れます。 arr.length代わりのrow.lengthを使用して

row.map((rank, i, arr) => { 
    if (arr.length - 1 === i) { 
     // last one 
    } else { 
     // not last one 
    } 
}); 

はいくつかの理由のためのより良い、正しいアプローチです：あなたはスコープを混在する場合

1. 、それが特に悪い書かれたコードでは、予期しないバグを引き起こすことがあります。一般的に、可能な場合はスコープ間のミックスを避けるのは常に良い方法です。

2. 明示的な配列を提供したい場合は、同様に機能します。例えば。

   [1,2,3,4].map((rank, i, arr) => { 
       if (arr.length - 1 === i) { 
        // last one 
       } else { 
        // not last one 
       } 
   }); 
   

3. あなたは（主にパフォーマンス向上のため）map範囲外のコールバックを移動したい場合は、範囲外であるとしてrow.length使用することを間違っているだろう。例えば。 OPの場合：

   const mapElement = (rowIndex, state, toggled, onClick) => { 
       return (rank, i, arr) => { 
        let lastIndex = arr.length - 1; 
        return [element(rowIndex, i, state, rank, toggled, onClick, lastIndex)]; 
       }; 
   }; 
   
   map = ranks.map((row, r) => row.map(mapElement(r, state, toggled, onClick))); 
   

Answer 3

受け入れ答えに若干の改善：

const lastIndex = row.length - 1; 
row.map((rank, i) => { 
    if (i === lastIndex) { 
    // last one 
    } else { 
    // not last one 
    } 
}) 

これは、ループ内から演算を除去します。