【JavaScript】配列内の最小値を持つ要素のすべてのインデックスを取得する方法
JavaScriptで数値の配列を扱う際、「配列の中で最も小さい値(最小値)が、どの位置に存在するのか」を知りたいケースがあります。
まず、次のような数値の配列を例に考えてみましょう。
const arr = [1,2,3,4,1,7,8,9,1];
最小値のインデックスを1つだけ取得する基本的な方法
配列内の最小要素のインデックスを求めるだけであれば、Math.min()とindexOf()を組み合わせることで簡単に実現できます。
const min = Math.min.apply(Math, arr); const ind = arr.indexOf(min);
このコードを実行すると、変数indには0が代入されます。確かに正しい結果です。
しかし、ここで問題があります。indexOf()は最初に見つかった要素のインデックスしか返さないため、上記の配列のように最小値1が3つ存在する場合、残りの2つのインデックスは取得できません。
最小値のインデックスをすべて取得するには
今回実現したいのは、配列内に最小値となる要素が複数存在する場合に、そのすべてのインデックスを配列として返すことです。
先ほどの配列の場合、期待する出力は次のようになります。
const ind = [0, 4, 8]
そこで、数値の配列を受け取り、最小値を持つすべての要素のインデックスを配列で返すJavaScript関数を作成します。
実装コード
処理の流れは以下のとおりです。
- ステップ1:
reduce()を使って配列全体から最小値を求める - ステップ2: ループで各要素を走査し、最小値と一致する要素のインデックスを収集する
- ステップ3: 収集したインデックスの配列を返す
const arr = [1,2,3,4,1,7,8,9,1];
const minArray = arr => {
// reduce()で最小値を求める
const min = arr.reduce((acc, val) => Math.min(acc, val), Infinity);
// 最小値と一致する要素のインデックスを格納する配列
const res = [];
for(let i = 0; i < arr.length; i++){
// 最小値でなければスキップ
if(arr[i] !== min){
continue;
};
res.push(i);
};
return res;
};
console.log(minArray(arr));実行結果
コンソールに出力される結果は以下のとおりです。
[ 0, 4, 8 ]
補足:filter()とmap()を使った別の書き方
より関数型らしいアプローチとして、filter()やmap()を活用することもできます。例えば、次のように一度map()で「値とインデックス」のペアに変換し、条件に合うものだけを抽出する方法もあります。
const arr = [1,2,3,4,1,7,8,9,1];
const getMinIndices = arr => {
const min = Math.min(...arr);
return arr
.map((val, idx) => ({ val, idx }))
.filter(({ val }) => val === min)
.map(({ idx }) => idx);
};
console.log(getMinIndices(arr)); // [ 0, 4, 8 ]どちらの方法でも同じ結果が得られますが、ループベースの実装の方が大きな配列ではパフォーマンス面で有利な傾向があります。用途に応じて使い分けるとよいでしょう。
-
JavaScriptでオブジェクトの列挙可能なプロパティ値を配列として取得する方法
JavaScriptでは、Object.keys() や for...in ループなどを使ってオブジェクトからキーや値を取り出すことができますが、これらの方法だけでは値を配列として直接取得することはできません。配列形式のデータは、フィルタリングやマップ処理など、さまざまな場面で非常に便利です。そこで活躍するのが Object.values() メソッドです。このメソッドを使うと、オブジェクトが持つ列挙可能なプロパティの値を要素とする配列を受け取ることができます。構文Object.values(obj);Object.values() は引数としてオブジェクトを受け取り、そのオブジェクトのプロパ
-
JavaScriptで配列の要素を同じ配列内に複製する方法
JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont