ホームページ ウェブフロントエンド jsチュートリアル JavaScriptでの呼び出しと適用のアプリケーション

JavaScriptでの呼び出しと適用のアプリケーション

Mar 14, 2018 pm 01:30 PM
apply javascript

今回はJavaScriptでの呼び出しと適用のアプリケーションについて説明します、JavaScriptでの呼び出しと適用のアプリケーションの注意事項は何ですか、以下は実際的なケースです、見てみましょう。

配列の最大値と最小値を見つける

配列を定義します:

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
ログイン後にコピー

ソートしてから値メソッド

最初に配列をソート(小さい -> 大きい)、最初と最後のものは必要最小限にしたいものですそして最大値。

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
ary.sort(function (a, b) {
    return a - b;
});var min = ary[0];var max = ary[ary.length - 1];
console.log(min, max);1234567
ログイン後にコピー

仮説法

現在の配列の最初の値が最大値であると仮定し、この値を次の項目と 1 つずつ比較し、後者の値のいずれかが仮定された値より大きい場合、それを仮定します。仮定が間違っていることを意味します。仮定された値を置き換えます...

var max = ary[0], min = ary[0];for (var i = 1; i < ary.length; i++) {
    var cur = ary[i];
    cur > max ? max = cur : null;
    cur < min ? min = cur : null;
}
console.log(min, max);1234567
ログイン後にコピー

Math の max/min メソッドは (apply を通じて) 実装されています

Math.min を直接使用します

var min = Math.min(ary); 
console.log(min); // NaN 
console.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));
ログイン後にコピー

Math.min を直接使用する場合は、比較する数値の山を追加するには 1 つずつ渡して、最終的なデメリットを取得します。 配列配列を一度に入れることはできません。

試してみましょう: eval

var max = eval(“Math.max(” + ary.toString() + “)”); 
console.log(max); 
var min = eval(“Math.min(” + ary.toString() + “)”); 
console.log(min); 
“Math.max(” + ary.toString() + “)” –> “Math.max(23,34,24,12,35,36,14,25)”
ログイン後にコピー

を使用します。最初は何も気にせず、実行したい最後のコードを string に変換してから、配列内の各項目の値をこの string に結合します。

eval: 文字列を実行用の JavaScript 式に変換します
例: eval("12+23+34+45") // 114

apply

var max = Math.max.apply(null, ary); 
var min = Math.min.apply(null, ary); 
console.log(min, max);
ログイン後にコピー

In non-strict を通じて Math の max/min を呼び出しますモードでは、適用する最初のパラメータが null の場合、max/min の this は window を指し、次に ary パラメータが 1 つずつ max/min に渡されます。

平均を計算します

次に、シナリオをシミュレーションし、特定の競技を実施します。審査員は得点した後、最高得点と最低得点を削除する必要があります。残りの得点の平均が最終得点となります。

おそらく多くの学生は、すべてのスコアを受け取るメソッドを作成し、関数の組み込み属性引数を使用して、sort メソッドを呼び出して引数を並べ替えてから…と考えるでしょうが、引数には注意してください。は実際の配列オブジェクトではなく、単なる疑似配列のコレクションであるため、引数を使用してsortメソッドを直接呼び出すとエラーが報告されます:

arguments.sort(); // Uncaught TypeError: arguments.sort is not a function
ログイン後にコピー


そこで、この時点で、最初に引数を実際の配列に変換できますか?このアイデアに従って、質問の要件を満たすビジネス メソッドを実装しました:

function avgFn() {
    // 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来
    var ary = [];    for (var i = 0; i < arguments.length; i++) {
        ary[ary.length] = arguments[i];
    }    // 2、给数组排序,去掉开头和结尾,剩下的求平均数
    ary.sort(function (a, b) {
        return a - b;
    });
    ary.shift();
    ary.pop();    return (eval(ary.join(&#39;+&#39;)) / ary.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);1234567891011121314151617
ログイン後にコピー

実装した avgFn メソッドに、引数を複製して配列を生成するステップがあることがわかりました。配列のスライス メソッドに精通している場合は、パラメータがスライス メソッドに渡されない場合、現在の配列が複製されることがわかります。これは次のようにシミュレートできます。 avgFnメソッドはArray内のsliceメソッドを借用することで実現できます。

function mySlice () {
    // this->当前要操作的这个数组ary
    var ary = [];    for (var i = 0; i < this.length; i++) {
        ary[ary.length] = this[i];
    }    return ary;
};var ary = [12, 23, 34];var newAry = mySlice(ary);
console.log(newAry);1234567891011
ログイン後にコピー

現在のアプローチは、最初に引数を配列に変換してから、変換された配列を操作することです。では、最初に引数を配列に変換する代わりに、引数を直接使用することはできますか? もちろん、呼び出して配列メソッドを借用することも可能です。

function avgFn() { // 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来 // var ary = Array.prototype.slice.call(arguments); var ary = [].slice.call(arguments);
// 2、给数组排序,去掉开头和结尾,剩下的求平均数....123
}
ログイン後にコピー

配列のようなオブジェクトを配列に変換する

配列のスライスメソッドを使用して配列のようなオブジェクトを配列に変換すると述べましたが、

getElementsByTagName

などを通じて取得した配列のようなオブジェクトも同様に変換できます。メソッドもスライスメソッドを借用して配列に変換できます。配列オブジェクトについてはどうでしょうか? var oLis = document.getElementsByTagName('div');

var ary = Array.prototype.slice.call(oLis);

console.log(ary); IE6~8 では悲劇となり、エラーが報告されます:

SCRIPT5014: Array.prototype.slice: 'this' is not a JavaScript object (error reports)
その後、IE6~8 では追加することしかできません。ループを通じて 1 つずつ配列に追加します:

function avgFn() {
    Array.prototype.sort.call(arguments , function (a, b) {
        return a - b;
    });
    [].shift.call(arguments);
    [].pop.call(arguments);    return (eval([].join.call(arguments, &#39;+&#39;)) / arguments.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);123456789101112
ログイン後にコピー

注: 引数として配列を借用する方法には互換性の問題はありません。

IE6~8と標準ブラウザの違いを踏まえて、配列状のオブジェクトを配列に変換するツールクラスを抽出します:

for (var i = 0; i < oLis.length; i++) { 
ary[ary.length] = oLis[i]; 
}
ログイン後にコピー

このツールメソッドはブラウザの例外情報キャプチャを利用しているので、ここで紹介しましょう。

console.log(num);

未定義の変数を出力すると、Uncaught ReferenceError: num が定義されていないというエラーが報告され、次のコードは実行されなくなります。 。

ただし、try..catch を使用して例外情報を取得した場合、次のコードの実行には影響しません。try のコードの実行でエラーが発生した場合、デフォルトで catch の try が実行されます。

function listToArray(likeAry) {
    var ary = [];    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {        for (var i = 0; i < likeAry.length; i++) {
            ary[ary.length] = likeAry[i];
        }
    }    return ary;
}1234567891011
ログイン後にコピー

それでは試してみてください ...catch の使用形式は (Java に非常によく似ています):


console.log(num); 
} catch (e) { // 形参必须要写,我们一般起名为e 
console.log(e.message); // –> num is not defined 可以收集当前代码报错的原因 
} 
console.log(‘ok’);
ログイン後にコピー

このとき、情報をキャプチャしたいのですが、次の Diamante を実行したくないので、どうすればいいですか?

try { 
// 
} catch (e) { 
// 如果代码报错执行catch中的代码 
} finally { 
// 一般不用:不管try中的代码是否报错,都要执行finally中的代码 
}
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScript の call、apply、bind の違いは何ですか

JavaScriptでの呼び出しの詳しい説明

以上がJavaScriptでの呼び出しと適用のアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles