JavaScript学習メモ：array_html/css_WEB-ITnoseの最大値と最小値の取得

実際の業務では、配列の最大値や最小値を取得する必要がある場合があります。ただし、arr.max() や arr.min() などのメソッドは配列では提供されません。では、このようなメソッドを他の方法で実装することは可能でしょうか?そこで今日は、配列の最大値と最小値を抽出するいくつかの方法を整理します。

配列内の最大値を取得します

まずそれについて考えてみましょう:

• 配列内の最初の要素を変数に代入し、この変数を使用します最大値として
• 2 番目の要素から開始して配列の走査を開始し、シーケンス内の最初の要素と比較します。
• 現在の要素が現在の最大値より大きい場合は、現在の要素を割り当てます。要素値 最大値
• を与え、次の要素に移動して前のステップを続行します
• 配列要素の走査が終了すると、この変数には最大値

が格納されます

コードは次のとおりです:

Array.prototype.max = function () {    // 将数组第一个元素的值赋给max    var max = this[0];    // 使用for 循环从数组第一个值开始做遍历    for (var i = 1; i < this.length; i++) {        // 如果元素当前值大于max,就把这个当前值赋值给max        if (this[i] > max) {            max = this[i];        }    }    // 返回最大的值    return max;}

例を見てみましょう:

var arr = [1,45,23,3,6,2,7,234,56];arr.max(); // 234

上記の例では、配列にはすべての数値が含まれています。配列がすべて数値でない場合に影響しますか?まずテストしてみましょう:

var arr = [1,45,23,3,6,2,7,234,56,'2345','a','c'];arr.max(); // 'c'

これは私たちが望む結果ではありません。 (これが解決策です)

これまでの研究により、for ループのパフォーマンスが forEach() よりも悪いことがわかっているため、上記のメソッドを forEach() メソッドに変更できます。 :

Array.prototype.max = function (){    var max = this[0];    this.forEach (function(ele,index,arr){        if(ele > max) {            max = ele;        }    })    return max;}var arr = [1,45,23,3,6,2,7,234,56];arr.max(); // 234

配列内の最小値を取得します

最大値を取得するというアイデアと同様に、最小値を取得する arr.min() メソッドを簡単に実装できます。配列内の値:

Array.prototype.min = function () {    var min = this[0];    this.forEach(function(ele, index,arr) {        if(ele < min) {            min = ele;        }    })    return min;}var arr = [1,45,23,3,6,2,7,234,56];arr.min(); // 1

その他のメソッド

上記の解決策に加えて、配列のreduce()メソッドを使用するなど、他の方法もあります。以前に学習した知識を思い出してください。reduce() メソッドはコールバック関数 callbackfn を受け取ることができ、配列内の初期値 (preValue) を、配列内で現在処理されている配列項目 (curValue) と比較できます。 curValue よりも preValue を返し、それ以外の場合は curValue を返すなどして、配列内の最大値を取得します。

Array.prototype.max = function() {    return this.reduce(function(preValue, curValue,index,array) {        return preValue > curValue ? preValue : curValue;    })}var arr = [1,45,23,3,6,2,7,234,56];arr.max(); // 234

同様に、同様のメソッドを使用して arr.mix() メソッドを実装することもできます。最小値を取得します:

Array.prototype.min = function() {    return this.reduce(function(preValue, curValue,index,array) {        return preValue > curValue ? curValue : preValue;    })}var arr = [1,45,23,3,6,2,7,234,56];arr.min(); // 1

組み込み関数 Math.max() および Math.min() メソッド

純粋な数値配列の場合は、組み込み関数を使用できます。 JavaScript Math.min() メソッドの Math.max() および Math.max()。これら 2 つの組み込み関数を使用して、配列内の最大値と最上位の値をそれぞれ見つけます。これら 2 つの組み込み関数を使用して配列の最大値と最小値を取得する前に、まず Math.max() と Math.min() の 2 つの関数について学習してください。

Math.max()

Math.max() 関数は、一連の数値の最大値を返します。

Math.max(1,32,45,31,3442,4); // 3442Math.max(10, 20);   //  20Math.max(-10, -20); // -10Math.max(-10, 20);  //  20

Math.min()

Math.min() 関数は、一連の数値の最小値を返す Math.max() 関数の逆です。 :

Math.min(10,20); //10Math.min(-10,-20); //-20Math.min(-10,20); //-10Math.min(1,32,45,31,3442,4); //1

これらの関数にパラメータがない場合、結果は -Infinity になります。パラメータが数値に変換できない場合、結果は NaN になります。最も重要なことは、これら 2 つの関数を数値の配列に直接使用できないことです。ただし、同様の方法がいくつかあります。

Function.prototype.apply() を使用すると、提供された this 配列とパラメーター配列を使用してパラメーターを呼び出すことができます。

// 取出数组中最大值Array.max = function( array ){    return Math.max.apply( Math, array );}; // 取出数组中最小值Array.min = function( array ){    return Math.min.apply( Math, array );};var arr = [1,45,23,3,6,2,7,234,56];Array.max(arr); // 234Array.min(arr); // 1

Math オブジェクトもオブジェクトであり、次のようなオブジェクト リテラルを使用して記述することができます。

Array.prototype.max = function () {    return Math.max.apply({},this);}Array.prototype.min = function () {    return Math.min.apply({},this);}var arr = [1,45,23,3,6,2,7,234,56];arr.max(); // 234arr.min(); // 1

実際、より簡単な方法があります。これを実現する ES2015 ベースの方法は、拡散演算子を使用することです:

var numbers = [1, 2, 3, 4];Math.max(...numbers) // 4Math.min(...numbers) // 1

この演算子により、関数呼び出しの位置で配列内の値が拡散されます。

概要

この記事では、配列から最大値と最小値を抽出するいくつかの方法をまとめました。これらのメソッドは数値配列のみを対象としていますが、配列に他のデータ型が含まれている場合、最大値と最小値のみを抽出する方法（実装方法をご存知の場合は、アドバイスをお願いします）。このうち、JavaScript の組み込み関数 Math.max() および Math.min() と Function.prototype.apply() を併用すると、配列内の最大値と最小値を簡単に取得できます。もちろん、最も簡単な方法は ES2015 の表示演算子を使用することです。より良い解決策がある場合は、以下のコメント欄で共有していただければ幸いです。

参考

• 配列の最大値と最小値を取得する
• JavaScript: 配列の最小値と最大値
• の最大値を計算します。配列 /最小値

初心者向けの勉強メモです。間違っている点があれば専門家の方にご指導いただければ幸いです。誤解を招いてしまい申し訳ございません。

Da Mo

通称「Da Mo」、W3CPlus の創設者で、現在はモバイル タオバオで働いています。中国の Drupal コミュニティの中心メンバーの 1 人。彼は、HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。