Maison > interface Web > js tutoriel > le corps du texte

Exemple de code détaillé expliquant les méthodes de fonction d'opération de tableau JavaScript

黄舟
Libérer: 2017-03-16 14:49:18
original
1326 Les gens l'ont consulté

1. concat() connecte deux ou plusieurs tableaux

Cette méthode ne modifie pas le tableau existant, mais renvoie uniquement une copie du tableau connecté.
Par exemple :

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>
Copier après la connexion

Résultat de sortie :

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

2.

Mettez tous les éléments du tableau dans une chaîne. Les éléments sont séparés par le délimiteur spécifié.

Par exemple :

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>
Copier après la connexion

résultat de la liste :

'

  • élément 1
  • élément 2item 3
'

C'est de loin la méthode la plus rapide ! Utiliser du code natif (tel que join()), indépendamment de ce que fait le système en interne, est généralement beaucoup plus rapide que du code non natif. ——James Padolsey, james.padolsey.com

3. pop() Supprimer et renvoyer le dernier élément du tableau

La méthode pop() supprimera le dernier élément du tableau Un élément, décrémente la longueur du tableau de 1 et renvoie la valeur de l'élément qu'il supprime.

Si le tableau est déjà vide, pop() ne modifie pas le tableau et renvoie une valeur non définie

Par exemple :

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>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
Thomas
George,John
Copier après la connexion

4. push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur

Par exemple :

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>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
4
George,John,Thomas,James
Copier après la connexion

5. unshift() ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur

Par exemple :

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>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
4
James,George,John,Thomas
Copier après la connexion

6. reverse() inverse l'ordre des éléments dans le tableau

Par exemple :

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.reverse());
5 </script>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
Thomas,John,George
Copier après la connexion

7. shift() supprime et renvoie le premier élément du tableau

Par exemple :

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>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
George
John,Thomas
Copier après la connexion

8. slice(start, end) Renvoie l'élément sélectionné à partir d'un tableau existant

Veuillez noter que cette méthode ne modifie pas le tableau, mais renvoie un sous-tableau

Par exemple :

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>
Copier après la connexion

Résultat de sortie :

George,John,Thomas
John,Thomas
George,John,Thomas
Copier après la connexion

9 sort() Trier les éléments du tableau

<. 🎜 du tableau >Citation. Veuillez noter que le tableau est trié sur le tableau d'origine et qu'aucune copie n'est générée

Cette méthode est par défaut triée dans l'ordre de codage des caractères (ASCII)

Par exemple :

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>
Copier après la connexion
Résultat de sortie :

John,George,Thomas
George,John,Thomas
Copier après la connexion
Regardons un autre exemple :

 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>
Copier après la connexion
Résultat de sortie :

10,5,40,25,1000,1
1,10,1000,25,40,5
Copier après la connexion
On voit que ce n'est pas le cas ce que nous pensons. Trier par taille numérique. Si vous souhaitez trier par taille numérique, vous devez modifier la méthode de tri par défaut et spécifier vous-même les règles de tri.

est le suivant :

 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>
Copier après la connexion
Résultat de sortie :

10,5,40,25,1000,1
1,5,10,25,40,1000
Copier après la connexion
Et si vous souhaitez trier par ordre décroissant ?

Changez la règle de tri en :

function (a, b) {return b – a;>

C'est OK

10. Supprimez des éléments et ajoutez de nouveaux éléments au tableau

La méthode splice() a des fonctions différentes de la méthode slice() La méthode splice() modifiera directement le tableau

(1) Supprimer. les éléments du tableau dans la plage spécifiée :

 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>
Copier après la connexion
Résultat de sortie :

George,John,Thomas,James,Adrew,Martin
George,John,Martin
Copier après la connexion
(2) Insérez l'élément spécifié à partir de l'indice spécifié (le nombre d'éléments n'est pas limité) :

 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>
Copier après la connexion
Résultat de sortie :

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin
Copier après la connexion
(3) Supprimez les éléments du tableau dans la plage spécifiée et remplacez-les par les éléments spécifiés (le nombre d'éléments n'est pas limité) :

 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>
Copier après la connexion
Résultat de sortie :

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal