Heim Web-Frontend js-Tutorial Eine kurze Diskussion über die Array.prototype.slice.call_javascript-Technik von Javascript

Eine kurze Diskussion über die Array.prototype.slice.call_javascript-Technik von Javascript

May 16, 2016 pm 03:41 PM
javascript

Vor dem Schreiben

In js sehen wir oft die Schreibmethode Array.prototype.slice.call(arguments,0). Natürlich kann jeder die Rolle dieser Methode verstehen, die darin besteht, ein Array-ähnliches Objekt in ein echtes Array umzuwandeln . Lassen Sie mich in Bezug auf diese Methode über mein Verständnis sprechen.

Dabei handelt es sich um die Methode „slice()“ und die Methode „call()“. Lassen Sie uns zunächst kurz auf diese beiden Methoden eingehen.

slice()-Methode

Arrays und Strings verfügen beide über diese Slice-Methode. Die Funktion dieser Methode besteht darin, ein Datenelement abzufangen. Der erste Parameter ist der abzufangende Positionsindex. Der zweite Parameter ist optional und gibt die abzufangende Endposition an. In einem Array ist der Rückgabewert dieser Methode ein Array, das die abgefangenen Elemente enthält. In einer Zeichenfolge ist der Rückgabewert dieser Methode eine Zeichenfolge, die die abgefangene Zeichenfolge enthält.

Diese Methode kann auch negative Werte übergeben. Wenn der Parameter eine negative Zahl ist, wird die positive Zahl, die durch Addition des Parameters und der Länge des Arrays oder Strings erhalten wird, als tatsächlicher Parameter verwendet.

lautet wie folgt:

[1,2,3,4,5,6].slice(2,4);

[1,2,3,4,5,6].slice(-4,-2);

Nach dem Login kopieren

Die Rückgabewerte sind alle [3,4], bei denen es sich um Arrays handelt.

'everything'.slice(2,4);

'everything'.slice(-4,-2);

Nach dem Login kopieren

Die Rückgabewerte sind „er“ bzw. „hi“, bei denen es sich um Zeichenfolgen handelt.

Wenn ein Parameter übergeben wird, werden alle Elemente von der Startposition bis zur Endposition ausgegeben. Keine weiteren Beispiele.

Andere ähnliche Methoden für Strings

In Strings gibt es zwei weitere Methoden vom Typ Slice():

substring()- und substr()-Methoden.

Unter anderem bedeutet die Methode substring(), dass substr() zwei Parameter von der Startposition an die Endposition zurückgibt. Der erste Parameter gibt die Anzahl der Zeichen an abgefangen und Die ersten beiden Methoden unterscheiden sich geringfügig.

Wenn der an die Methode übergebene Parameter eine negative Zahl ist, unterscheiden sich diese drei Methoden geringfügig.

Wenn der an die Methode übergebene Parameter eine negative Zahl ist:

slice() addiert, wie oben erwähnt, die negative Zahl zur Länge der Zeichenfolge, um den entsprechenden positiven Wert zu erhalten;

Die Parameter der Methode substring() sind alle auf Null gesetzt;

Der erste Parameter der substr()-Methode ist ein positiver Wert, der durch Addition des negativen Werts plus der Länge der Zeichenfolge erhalten wird, und der zweite Parameter wird auf Null gesetzt.

call()- und apply()-Methoden


Die Methoden call() und apply() werden hauptsächlich zur Erweiterung des Funktionsumfangs verwendet.

Die Methoden call() und apply() erhalten zwei Parameter:

apply(): Der erste Parameter ist der Bereich und der zweite das Parameterarray. Der zweite Parameter kann eine Array-Instanz oder ein Argumentobjekt sein.

Die Methode call() empfängt ebenfalls zwei Parameter, die Methode zum Übergeben von Parametern unterscheidet sich jedoch von apply(): Die Parameter der übergebenen Funktion müssen einzeln geschrieben werden.

Da dies nicht der Schwerpunkt ist, werde ich hier nicht auf Details eingehen.

Array.prototype.slice.call(arguments,0)
Nach dem Login kopieren
In Array.prototype.slice.call(arguments,0) ruft Array.prototype.slice die Prototyp-Methode von Array auf. Für echte Arrays gibt es die Slice()-Methode, aber für Dinge wie Argumente oder self -definiert Obwohl einige Array-ähnliche Objekte mehrere Attribute wie die Länge haben, verfügen sie nicht über eine Slice()-Methode. Daher müssen Sie für solche Array-ähnlichen Objekte die Prototyp-Methode verwenden, um die Slice()-Methode zu verwenden ist, Array.prototype.slice (wenn in der Anpassung Die Slice()-Methode wird im Array-ähnlichen Objekt angepasst, sodass sie direkt aufgerufen werden kann).

Die Bedeutung von Array.prototype.slice.call(arguments,0) kann also wie folgt verstanden werden: Für das Array der Argumentklasse rufen wir die Prototypmethode Array.prototype.slice auf und verwenden dazu die Methode call() Beschränken Sie den Bereich auf In Argumenten kann Array.prototype hier als Argument verstanden werden, und Parameter 0 ist der erste Parameter der Slice()-Methode, der der Startpositionsindex ist. Auf diese Weise wird das Array der Argumentklasse in ein echtes Array umgewandelt.

Natürlich können Sie Traversal auch verwenden, um Argumente in ein Array umzuwandeln, sodass der Code natürlich mehr und nicht direkt genug ist.

Wir wissen, dass Array.prototype.slice.call(arguments) Objekte mit Längenattributen in Arrays konvertieren kann, mit Ausnahme der Knotensammlung unter IE (da das DOM-Objekt unter IE in Form eines COM-Objekts, js, implementiert ist). Objekte und COM-Objekte können nicht konvertiert werden)

Zum Beispiel:



 var a={length:2,0:'first',1:'second'};
 Array.prototype.slice.call(a);// ["first", "second"]
 var a={length:2};
 Array.prototype.slice.call(a);// [undefined, undefined]
Nach dem Login kopieren
Vielleicht verstehen diejenigen, die gerade erst angefangen haben, js zu lernen, nicht ganz, warum dieser Satz eine solche Funktion erfüllen kann. Ich bin zum Beispiel einer, also lasst es uns erkunden.

Slice hat zunächst zwei Verwendungszwecke, eine ist String.slice und die andere ist Array.slice. Die erste gibt einen String zurück und die zweite gibt ein Array zurück.

Array.prototype.slice.call(arguments) kann Argumente in ein Array konvertieren, dann ist es arguments.toArray().slice(); Können wir an dieser Stelle einfach Array.prototype.slice.call(arguments) sagen? ) Der Prozess besteht darin, den ersten übergebenen Parameter in ein Array umzuwandeln und dann Slice aufzurufen?

Schauen wir uns noch einmal die Verwendung von Anrufen an, wie im folgenden Beispiel gezeigt


可以看出,call了后,就把当前函数推入所传参数的作用域中去了,不知道这样说对不对,但反正this就指向了所传进去的对象就肯定的了。
到这里,基本就差不多了,我们可以大胆猜一下slice的内部实现,如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

Nach dem Login kopieren

大概就是这样吧,理解就行,不深究。

最后,附个转成数组的通用函数

var toArray = function(s){
  try{
    return Array.prototype.slice.call(s);
  } catch(e){
      var arr = [];
      for(var i = 0,len = s.length; i < len; i++){
        //arr.push(s[i]);
        arr[i] = s[i]; //据说这样比push快
      }
       return arr;
  }
}
Nach dem Login kopieren

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems Dec 17, 2023 am 08:41 AM

JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann

See all articles