【JavaScript】配列の最初のn%だけを取得する関数の作り方

JavaScriptでは、「配列と0〜100の数値（両端を含む）を受け取り、その配列の先頭からn%分の要素だけを返す関数」を作りたい場面があります。たとえば、第2引数が0なら空の配列を、100なら元の配列全体を、50なら半分の要素を返す、というイメージです。

さらに、第2引数が省略された場合はデフォルト値として50を使用する仕様にします。以下がその実装コードです。

サンプルコード

const numbers = [3,6,8,6,8,4,26,8,7,4,23,65,87,98,54,32,57,87];
const byPercent = (arr, n = 50) => {
    const { length } = arr;
    const requiredLength = Math.floor((length * n) / 100);
    return arr.slice(0, requiredLength);
};
console.log(byPercent(numbers));
console.log(byPercent(numbers, 84));
console.log(byPercent(numbers, 34));

コードの解説

• デフォルト引数：n = 50 とすることで、第2引数が渡されなかった場合に自動的に50%が適用されます。
• Math.floor()：配列の長さにn%を掛けた値の小数点以下を切り捨て、取得する要素数を整数として計算します。これにより、端数が出てもインデックスとして不正な値になることを防げます。
• arr.slice(0, requiredLength)：元の配列を変更せず、先頭から必要な長さ分の要素だけを新しい配列として取り出します。

実行結果

コンソールには次のように出力されます。

[
    3, 6, 8, 6, 8,
    4, 26, 8, 7
]
[
    3, 6, 8, 6, 8, 4,
    26, 8, 7, 4, 23, 65,
    87, 98, 54
]
[ 3, 6, 8, 6, 8, 4 ]

このように、Math.floor()とslice()を組み合わせるだけで、元の配列を壊すことなく任意の割合の要素を簡単に取得できます。ページネーションのプレビュー表示やデータの一部抽出など、さまざまな場面で応用できるテクニックなので、ぜひ覚えておきましょう。