Heim > Web-Frontend > js-Tutorial > Detaillierter Beispielcode, der die Funktionsmethoden von JavaScript-Array-Operationen erläutert

Detaillierter Beispielcode, der die Funktionsmethoden von JavaScript-Array-Operationen erläutert

黄舟
Freigeben: 2017-03-16 14:49:18
Original
1366 Leute haben es durchsucht

1. concat() verbindet zwei oder mehr Arrays

Diese Methode ändert nicht das vorhandene Array, sondern gibt nur eine Kopie des verbundenen Arrays zurück.
Zum Beispiel:

1 <script type="text/javascript">
2        var arr = [1, 2, 3];
3        var arr1 = [11, 22, 33];
4        document.write(arr.concat(4, 5, arr1));
5 </script>
Nach dem Login kopieren

Ausgabeergebnis:

1,2,3,4,5,11,22,33

2.

Fügen Sie alle Elemente des Arrays in einen String ein. Elemente werden durch das angegebene Trennzeichen getrennt.

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;];
3       var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;
4 </script>
Nach dem Login kopieren

Listenergebnis:

'

  • item 1
  • item 2item 3
'

Dies ist bei weitem die schnellste Methode! Die Verwendung von nativem Code (z. B. join()) ist unabhängig davon, was das System intern tut, normalerweise viel schneller als die Verwendung von nicht nativem Code. ——James Padolsey, james.padolsey.com

3. pop() Löschen und geben Sie das letzte Element des Arrays zurück

Die Methode pop() löscht das letztes Element des Arrays Ein Element, dekrementiert die Array-Länge um 1 und gibt den Wert des Elements zurück, das es löscht.

Wenn das Array bereits leer ist, ändert pop() das Array nicht und gibt einen undefinierten Wert zurück

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.pop() + "<br/>");
5       document.write(arr);
6 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
Thomas
George,John
Nach dem Login kopieren

4. push() fügt ein oder mehrere Elemente am Ende des Arrays hinzu und gibt die neue Länge zurück

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.push("James") + "<br/>");
5       document.write(arr);
6 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
4
George,John,Thomas,James
Nach dem Login kopieren

5. unshift() fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge zurück

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.unshift("James") + "<br/>");
5       document.write(arr);
6 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
4
James,George,John,Thomas
Nach dem Login kopieren

6. reverse() kehrt die Reihenfolge der Elemente im Array um

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.reverse());
5 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
Thomas,John,George
Nach dem Login kopieren

7. Shift() löscht das erste Element des Arrays und gibt es zurück

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.shift() + "<br/>");
5       document.write(arr);
6 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
George
John,Thomas
Nach dem Login kopieren

8. Slice(start, end) Gibt das ausgewählte Element aus einem vorhandenen Array zurück

Bitte beachten Sie, dass diese Methode das Array nicht ändert, sondern ein Unterarray zurückgibt

Zum Beispiel:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
5       document.write(arr);
6 </script>
Nach dem Login kopieren

Ausgabeergebnis:

George,John,Thomas
John,Thomas
George,John,Thomas
Nach dem Login kopieren

9 sort() Sortieren Sie die Elemente des Arrays

< 🎜 des Arrays >Quote. Bitte beachten Sie, dass das Array nach dem Original-Array sortiert wird und keine Kopie generiert wird

Diese Methode sortiert standardmäßig in der Reihenfolge der Zeichenkodierung (ASCII)

Zum Beispiel:

1 <script type="text/javascript">
2     var arr = new Array(6);
3     arr[0] = "John";
4     arr[1] = "George";
5     arr[2] = "Thomas";
6     document.write(arr + "<br/>");
7     document.write(arr.sort());
8 </script>
Nach dem Login kopieren
Ausgabeergebnis:

John,George,Thomas
George,John,Thomas
Nach dem Login kopieren
Sehen wir uns ein anderes Beispiel an:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort());
11 </script>
Nach dem Login kopieren
Ausgabeergebnis:

10,5,40,25,1000,1
1,10,1000,25,40,5
Nach dem Login kopieren
Wir können sehen, dass dies nicht der Fall ist Was wir denken: Sortieren nach numerischer Größe. Wenn Sie nach numerischer Größe sortieren möchten, müssen Sie die Standardsortiermethode ändern und die Sortierregeln selbst festlegen.

lautet wie folgt:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>
Nach dem Login kopieren
Ausgabeergebnis:

10,5,40,25,1000,1
1,5,10,25,40,1000
Nach dem Login kopieren
Was ist, wenn Sie in absteigender Reihenfolge sortieren möchten?

Ändern Sie die Sortierregel in:

Funktion (a, b) {return b – a;}

Es ist OK

10. Elemente löschen und neue Elemente zum Array hinzufügen

Die splice()-Methode hat andere Funktionen als die Slice()-Methode. Die splice()-Methode ändert das Array direkt

(1) Löschen die Array-Elemente im angegebenen Bereich:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3    arr[0] = "George"; 
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
12    document.write(arr);
13 </script>
Nach dem Login kopieren
Ausgabeergebnis:

George,John,Thomas,James,Adrew,Martin
George,John,Martin
Nach dem Login kopieren
(2) Füge das angegebene Element beginnend mit dem angegebenen Index ein (die Anzahl der Elemente ist nicht begrenzt) :

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
12    document.write(arr);
13 </script>
Nach dem Login kopieren
Ausgabeergebnis:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin
Nach dem Login kopieren
(3) Löschen Sie die Array-Elemente im angegebenen Bereich und ersetzen Sie sie durch die angegebenen Elemente (die Anzahl der Elemente ist nicht begrenzt):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换
12 document.write(arr);
13 </script>
Nach dem Login kopieren
Ausgabeergebnis:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode, der die Funktionsmethoden von JavaScript-Array-Operationen erläutert. 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