Heim > Web-Frontend > js-Tutorial > Hauptteil

Anwendung von Call und Apply in Javascript

php中世界最好的语言
Freigeben: 2018-03-14 13:30:03
Original
1411 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen die Anwendung von Call and Apply in Javascript Was sind die Vorsichtsmaßnahmen für die Anwendung von Call and Apply in Javascript? . Werfen wir einen Blick darauf.

Finden Sie die Maximal- und Minimalwerte des Arrays

Definieren Sie ein Array:

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
Nach dem Login kopieren

Sortieren und dann Wertmethode

Zuerst geben Das Array ist sortiert (klein -> groß), der erste und der letzte sind die minimalen und maximalen Werte, die wir wollen.

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
Nach dem Login kopieren

Hypothesemethode

Gehen Sie davon aus, dass der erste Wert im aktuellen Array der Maximalwert ist, und vergleichen Sie diesen Wert nacheinander mit den folgenden Elementen ​​ist besser als der angenommene Wert. Es muss noch eingegeben werden, was darauf hinweist, dass die Annahme falsch ist. Wir ersetzen den angenommenen Wert ...

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
Nach dem Login kopieren

Die Max/Min-Methode in Mathematik wird implementiert (durch apply )

Mathe direkt verwenden.

var min = Math.min(ary); 
console.log(min); // NaN 
console.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));
Nach dem Login kopieren

Wenn Sie Math.min direkt verwenden, müssen Sie den zu vergleichenden Zahlenstapel einzeln weitergeben, damit Sie das Endergebnis erhalten Nachteil: Es ist nicht möglich, ein Ary-Array auf einmal einzufügen.

Versuchen Sie es: Verwenden Sie 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)”
Nach dem Login kopieren

Kümmern Sie sich zunächst um nichts anderes, ändern Sie zunächst den letzten Code, den wir ausführen möchten, in String, und dann Der Wert jedes Elements im Array wird separat in diese Zeichenfolge gespleißt.

eval: Konvertieren Sie eine Zeichenfolge in einen JavaScript-Ausdruck zur Ausführung
Zum Beispiel: eval(“12+23+34+45”) // 114

Call through apply max/min in Math

var max = Math.max.apply(null, ary); 
var min = Math.min.apply(null, ary); 
console.log(min, max);
Nach dem Login kopieren

Wenn im nicht-strikten Modus der erste anzuwendende Parameter null ist, wird dieser in max/min auf das Fenster verwiesen und dann wird der Parameter ary übergeben max/min.

Berechnen Sie den Durchschnitt

Simulieren Sie nun eine Szene und führen Sie einen bestimmten Wettbewerb durch. Nachdem die Jury Punkte erzielt hat, müssen sie die höchste und die niedrigste Punktzahl sowie den Durchschnitt ermitteln die restlichen Punkte bilden das Endergebnis.

Vielleicht denken viele Schüler darüber nach, eine Methode zu schreiben, um alle Ergebnisse zu erhalten, und dann die integrierten Attributargumente der Funktion zu verwenden, um die Argumente zu sortieren, indem sie die Sortiermethode aufrufen, und dann ..., aber Es ist zu beachten, dass Argumente nicht vorhanden sind. Ein echtes Array-Objekt ist nur eine Sammlung von Pseudo-Arrays. Daher wird beim direkten Aufrufen der Sortiermethode mit Argumenten ein Fehler gemeldet:

arguments.sort(); // Uncaught TypeError: arguments.sort is not a function
Nach dem Login kopieren


Also zu diesem Zeitpunkt Können Sie die Argumente zuerst in ein echtes Array umwandeln und dann Operationen ausführen, um die Anforderungen der Frage zu erfüllen:

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
Nach dem Login kopieren

Wir Ich habe festgestellt, dass die von uns implementierte avgFn-Methode einen Schritt enthält. Die Argumente werden geklont und in ein Array generiert. Wenn Sie mit der Slice-Methode von Arrays vertraut sind, können Sie wissen, dass das aktuelle Array geklont wird, wenn keine Parameter an die Slice-Methode übergeben werden, was wie folgt simuliert werden kann:

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
Nach dem Login kopieren

Also im avgFn Bei der Methode werden die Argumente konvertiert. Für Operationen an Arrays können Sie die Slice-Methode in Array über die Call-Methode ausleihen.

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

Unser aktueller Ansatz besteht darin, zuerst die Argumente in ein Array umzuwandeln und dann das konvertierte Array zu verarbeiten. Können wir die Argumente also einfach direkt verwenden, anstatt sie zuerst in ein Array umzuwandeln? Natürlich ist es möglich, die Array-Methode durch einen Aufruf auszuleihen.

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
Nach dem Login kopieren

Array-ähnliches Objekt in Array konvertieren

Ich habe bereits erwähnt, dass die Slice-Methode zum Ausleihen eines Arrays verwendet wird, um arrayähnliche Objekte in ein Array umzuwandeln, und zwar durch getElementsByTagName usw. Kann das durch die Methode erhaltene Array-ähnliche Objekt auch mithilfe der Slice-Methode in ein Array-Objekt umgewandelt werden?

var oLis = document.getElementsByTagName('div');
var ary = Array.prototype.slice.call(oLis);
console.log(ary); Es kann tatsächlich auf diese Weise unter dem Browser verwendet werden, aber unter IE6 ~ 8 wird es eine Tragödie sein und ein Fehler wird gemeldet:

SCRIPT5014: Array.prototype.slice: 'this' is not a JavaScript-Objekt (Fehlerbericht)

Dann können Sie sie unter IE6~8 nur einzeln über eine Schleife zum Array hinzufügen:

for (var i = 0; i < oLis.length; i++) { 
ary[ary.length] = oLis[i]; 
}
Nach dem Login kopieren
Hinweis: Es gibt kein Kompatibilitätsproblem mit der Methode Arrays für Argumente auszuleihen.


Basierend auf dem Unterschied zwischen IE6~8 und Standardbrowsern extrahieren Sie die Toolklasse zum Konvertieren arrayähnlicher Objekte in Arrays:

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
Nach dem Login kopieren
Der Browser wird in diesem Tool verwendet Methode Ausnahmeinformationserfassung, also stellen wir sie hier vor.

console.log(num);

Wenn wir eine undefinierte Variable ausgeben, wird ein Fehler gemeldet: Uncaught ReferenceError: In JavaScript wird diese Zeile einen Fehler melden und Folgendes Code wird nicht erneut ausgeführt.

Aber wenn try..catch zum Erfassen von Ausnahmeinformationen verwendet wird, hat dies keinen Einfluss auf die Ausführung des folgenden Codes. Wenn während der Ausführung des Codes in try ein Fehler auftritt, wird der Versuch in Catch ausgeführt standardmäßig {


console.log(num); 
} catch (e) { // 形参必须要写,我们一般起名为e 
console.log(e.message); // –> num is not defined 可以收集当前代码报错的原因 
} 
console.log(‘ok’);
Nach dem Login kopieren
Das Verwendungsformat von try...catch ist also (sehr ähnlich zu Java):


try { 
// 
} catch (e) { 
// 如果代码报错执行catch中的代码 
} finally { 
// 一般不用:不管try中的代码是否报错,都要执行finally中的代码 
}
Nach dem Login kopieren
Zu diesem Zeitpunkt habe ich Ich möchte die Informationen erfassen, möchte aber nicht zulassen, dass die folgende Diamante ausgeführt wird. Was ist also zu tun?

try {    console.log(num);
} catch (e) {    // console.log(e.message); // --> 可以得到错误信息,把其进行统计    // 手动抛出一条错误信息,终止代码执行    throw new Error(&#39;当前网络繁忙,请稍后再试&#39;);    // new ReferenceError --> 引用错误    // new TypeError --> 类型错误    // new RangeError --> 范围错误
}console.log(&#39;ok&#39;);
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Was sind die Unterschiede zwischen Aufruf, Anwendung und Bindung in JavaScript?

Detaillierte Erklärung des Aufrufs in Javascript

Das obige ist der detaillierte Inhalt vonAnwendung von Call und Apply in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage