JavaScriptでの呼び出しと適用のアプリケーション-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-14 13:30:03

オリジナル

1418 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。