検索
ホームページウェブフロントエンドhtmlチュートリアル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: コア技術と事例実践』を出版しました。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい