méthode de tableau js

Le contenu de cet article est la méthode du tableau js. Maintenant, je le partage avec tout le monde, et il peut également être utilisé comme référence pour les amis dans le besoin

Création de tableaux

Il existe deux façons de créer des tableaux en JavaScript La première consiste à utiliser Array. Constructeur :

1

1 2 3

var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组

2

3

1 2 3

var arr4 = []; //创建一个空数组 var arr5 = [20]; // 创建一个包含1项的数组 var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组

var arr1 = nouveau Array(); //Créer un tableau vide

var arr2 = nouveau Array(20); // Créer un fichier contenant 20Tableau d'éléments

var arr3 = nouveau Array("lily","lucy","Tom" / / Créer un fichier contenant 3Tableau de chaînes

La deuxième façon de base de créer un tableau est Utiliser la notation littérale du tableau :

1 2 3

var arr4 = []; //Créer un Tableau vide var arr5 = [20]; // Créez un tableau contenant 1 éléments var arr6 = ["lily","lucy","Tom"]; // Créez-en un Tableau contenant 3 tableau td>

Lors de la lecture et de la définition des valeurs d'un tableau, utilisez des crochets et fournissez un index numérique basé sur 0 pour la valeur correspondante :

1

1 2 3 4

var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组 alert(arr6[0]); //lily arr6[1] = "mary"; //修改第二项为mary arr6[3] = "sean"; //增加第四项为sean

2

3

4

var arr6 = ["lily"

,

1 2 3

var arr = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组 arr[arr.length] = "sean"; //在下标为3处（也就是数组尾部）添加一项"sean" arr.length =  arr.length-1; //将数组的最后一项删除

"lucy","Tom"]; // Créez un fichier contenant 3Tableau de chaînes

alert(arr6[ 0 ]); //lily

arr6[1] = "mary"; //Modifiez le deuxième élément en marie

arr6[3] = "sean" / /Ajoutez le quatrième élément comme sean

L'attribut length du tableau en JavaScript peut être modifié, regardez l'exemple suivant :

1 2 3

var arr = ["lily","lucy","Tom"]; // Créer un tableau 3 🎜 > arr[arr.length] = " sean "; // est indice comme 3 Ajouter un élément à "sean" arr.length = arr.length-1; //Supprimer le dernier élément du tableau

Si vous devez déterminer si un objet est un objet tableau, avant ECMAScript 5, nous pouvons passer instanceof Array Pour juger, mais le problème avec l'opérateur instanceof est qu'il suppose qu'il n'y a qu'un seul environnement d'exécution global. Si la page Web contient plusieurs frames, il existe en fait plus de deux environnements d'exécution globaux différents, et il existe donc plus de deux versions différentes du constructeur Array . Si vous transmettez un tableau d'une image à une autre, le tableau que vous transmettez aura un constructeur différent de celui du tableau créé nativement dans la deuxième image.

ECMAScript 5 Ajout de la méthode Array.isArray(). Le but de cette méthode est de déterminer in fine si une valeur est un tableau, quel que soit le contexte d'exécution global dans lequel elle a été créée.

Méthodes de tableau

Ce qui suit présentera les méthodes des tableaux. Les méthodes des tableaux incluent les méthodes de prototype de tableau et. d'autres de object Méthodes héritées des objets. Ici, nous présentons uniquement les méthodes prototypes des tableaux. Les principales méthodes prototypes de tableaux sont les suivantes :

join() push()
et pop()shift()
et unshift()sort()
reverse()
concat()
slice()
splice()
indexOf()
et lastIndexOf() (ES5Nouveau)forEach()
(ES5Nouveau) map()
(ES5Nouveau) filtre ( )
(ES5Nouveau) chaque()
(ES5 Nouveau)some()
(ES5Nouveau) reduce()
et réduireRight() (nouveau dans ES5)

Nouvelle prise en charge du navigateur de méthodes pour ES5 :

Opera 11+ Firefox 3.6 +
Safari 5 +
Chrome 8+
Internet Explorer 9+

Pour les versions de navigateur prises en charge, vous pouvez transmettre l'extension ArrayPrototype à mettre en œuvre. Les fonctions de base de chaque méthode sont présentées en détail ci-dessous.

1, join()

join(separator ): combine les éléments du tableau en une chaîne, en utilisant séparateur comme séparateur En cas d'omission, la virgule par défaut est utilisée comme séparateur. ne reçoit qu'un seul paramètre : le délimiteur.

1 2 3 4

var arr = [1,2,3]; console.log(arr.join()); // 1,2,3 console.log(arr.join("-")); // 1-2-3 console.log(arr); // [1, 2, 3] (le tableau d'origine reste inchangé)

Les chaînes en double peuvent être réalisées via la méthode join(), il suffit de passer la chaîne et le plusieurs fois, la chaîne répétée peut être renvoyée. La fonction est la suivante :

1 2 3 4 5

function repeatString(str, n) { return new Array(n + 1).join(str); } console.log(repeatString("abc", 3)); // abcabcabc console.log(repeatString("Hi", 5)); // HiHiHiHiHi

12345fonction repeatString(str, n) { retour nouveau Array(n + 1).join(str); }console.log(repeatString("abc", 3)); console.log(repeatString("Salut", // HiHiHiHiHi)

2, push() et pop()

push() : peut recevoir n'importe quel nombre de paramètres, les ajouter un par un à la fin du tableau et renvoyer la longueur modifiée du tableau.
pop() : Supprime le dernier élément de la fin du tableau, réduit la longueur valeur du tableau, puis renvoyez l'élément supprimé.

1

1 2 3 4 5 6 7

var arr = ["Lily","lucy","Tom"]; var count = arr.push("Jack","Sean"); console.log(count); // 5 console.log(arr); // ["Lily",  "lucy", "Tom", "Jack", "Sean"] var item = arr.pop(); console.log(item); // Sean console.log(arr); // ["Lily",  "lucy", "Tom", "Jack"]

2

3

4

5

6

7

var arr = ["Lily","lucy","Tom"];

var count = arr.push("Jack","Sean");

console.log(count); // 5

console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

var item = arr.pop();

console.log(item); // Sean

console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3, shift() et unshift()

shift() : Supprime le premier élément du tableau d'origine et renvoie la valeur de l'élément supprimé ; si le tableau est vide, renvoie undefined .
unshift :Ajoute des paramètres au début du tableau d'origine et renvoie la longueur du tableau.

Cet ensemble de méthodes et ce qui précède push() et pop() méthodes Correspondant exactement, l'une est le début du tableau d'opérations et l'autre est la fin du tableau d'opérations.

1

1 2 3 4 5 6 7

var arr = ["Lily","lucy","Tom"]; var count = arr.unshift("Jack","Sean"); console.log(count); // 5 console.log(arr); //["Jack",  "Sean", "Lily", "lucy", "Tom"] var item = arr.shift(); console.log(item); // Jack console.log(arr); // ["Sean",  "Lily", "lucy", "Tom"]

2

3

4

5

6

7

var arr = ["Lily","lucy","Tom"];

var count = arr.unshift("Jack","Sean");

console.log(count); // 5

console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

var item = arr.shift();

console.log(item); //Jack

console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4, tri()

tri() : Organisez les éléments du tableau par ordre croissant ——, c'est-à-dire que la plus petite valeur est à l'avant et la plus grande valeur est à l'arrière.

Lors du tri, la méthode sort() appellera toString() Méthode de conversion, puis compare les chaînes résultantes pour déterminer comment trier. Même si chaque élément du tableau est une valeur numérique, la méthode sort() compare les chaînes, donc la situation suivante se produira :

1

1 2 3 4 5

var arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); // ["a",  "b", "c", "d"] arr2 = [13, 24, 51, 3]; console.log(arr2.sort()); // [13, 24, 3, 51] console.log(arr2); // [13, 24, 3, 51](元数组被改变)

2

3

4

5

var "a", "d", "c", "b"];

console.log(arr1.sort()); /); / ["a", "b", "c", "d"]

arr2 = [13, 24, 51, 3];

console.log(arr2 .sort( )); // [13, 24, 3, 51]

console.log(arr2); // [13, 24, 3, 51 ](Le méta-tableau est modifié)

Afin de résoudre le problème ci-dessus, la méthode sort() peut recevoir une fonction de comparaison en paramètre afin que nous puissions spécifier quelle valeur se trouve devant quelle valeur. La fonction de comparaison reçoit deux paramètres et renvoie un nombre négatif si le premier paramètre doit être avant le second. Si les deux paramètres sont égaux, elle renvoie 0 si le premier paramètre doit être. Après le second, un nombre positif est renvoyé. Ce qui suit est une fonction de comparaison simple :

1

1 2 3 4 5 6 7 8 9 10 11

function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } arr2 = [13, 24, 51, 3]; console.log(arr2.sort(compare)); // [3, 13, 24, 51]

2

3

4

5

6

7

8

9

10

11 td>

fonction compare(value1, value2) {

if (value1 < value2) {<🎜><🎜>

< strong>retour<🎜> -1;<🎜><🎜>

} <🎜>else<🎜> if<🎜> (value1 > value2) {

retour 1;

} else {

retour 0;

}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare)); // [3, 13 , 24, 51]

如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：

table>5、reverse()reverse()：反转数组项的顺序。

1

1 2 3 4 5 6 7 8 9 10 11

function compare(value1, value2) { if (value1 < value2) { return 1; } else if (value1 > value2) { return -1; } else { return 0; } } arr2 = [13, 24, 51, 3]; console.log(arr2.sort(compare)); // [51, 24, 13, 3]

2

3

4

5

6

7

8

9

1 2 3

var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原数组改变)

10

11

fonction compare(value1, value2) {

if (value1 < value2) {<🎜><🎜>

<🎜>retour<🎜><🎜> 1;<🎜><🎜>

} <🎜><🎜>else<🎜> if<🎜><🎜> ( valeur1 > valeur2) {

retour -1;

} autre {

retour 0;}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare)); // [51, 24, 13, 3]

1 2 3

var arr = [13, 24, 51, 3]; console. log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原数组改变)

6, concat()

concat() : Ajoutez des paramètres au tableau d'origine. Cette méthode créera d'abord une copie du tableau actuel, puis ajoutera les paramètres reçus à la fin de la copie et enfin renverra le tableau nouvellement construit. Sans passer d'arguments à la méthode concat(), elle copie simplement le tableau actuel et renvoie la copie.

1

1 2 3 4

var arr = [1,3,5,7]; var arrCopy =  arr.concat(9,[11,13]); console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // [1, 3, 5, 7](原数组未被修改)

2

3

1 2 3

var arrCopy2 =  arr.concat([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7, 9,  Array[2]] console.log(arrCopy2[5]); //[11, 13]

4

var arr = [1,3,5,7];

var arrCopy = arr.concat( 9,[11,13]);

console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]

console.log(arr); // [1, 3, 5, 7 ](Le tableau d'origine n'a pas été modifié)

À partir des résultats des tests ci-dessus, nous pouvons constater que : si le transmis n'est pas un tableau, alors les paramètres seront être ajouté directement à l'arrière du tableau. Si le transmis est un tableau, ajoute chaque élément du tableau au tableau. Mais que se passe-t-il si un tableau à deux dimensions est transmis ?

1 2 3

var arrCopy2 = arr.concat ([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]] console.log(arrCopy2[5]); //[ 11, 13]

Dans le code ci-dessus, le cinquième élément du tableau arrCopy2 est un tableau contenant deux éléments, c'est-à-dire concat ne peut ajouter que chaque élément du tableau entrant au tableau. Si certains éléments du tableau entrant sont des tableaux, alors cet élément du tableau sera également ajouté à arrCopy2 en tant qu'élément . dans.

7, slice()

slice()  : renvoie un nouveau tableau composé d'éléments de l'index de début spécifié à l'index de fin dans le tableau d'origine. La méthode slice() peut accepter un ou deux paramètres, qui sont les positions de début et de fin des éléments à renvoyer. Avec un seul paramètre, la méthode slice() renvoie tous les éléments commençant à la position spécifiée par ce paramètre et se terminant à la fin du tableau actuel. Si on lui donne deux arguments, cette méthode renvoie les éléments entre les positions de début et de fin - mais sans inclure la position de fin.

tr> tbody>

1

1 2 3 4 5 6 7 8 9 10

var arr = [1,3,5,7,9,11]; var arrCopy = arr.slice(1); var arrCopy2 = arr.slice(1,4); var arrCopy3 =  arr.slice(1,-2); var arrCopy4 =  arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变) console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9]

2

3

4

5

6

7

8

9

10

var arr = [1,3,5,7,9,11];

var arrCopy = arr.slice(1);

var arrCopy2 = arr.slice(1,4);

var arrCopy3 = ​​​​arr.slice(1,-2);

var arrCopy4 = arr.slice(-4,-1 );

console.log(arr); rgb( 0,130,0);">//[1, 3, 5, 7, 9, 11](Le tableau d'origine n'a pas changé )

console.log (arrCopy); //[3, 5, 7, 9, 11]

console.log(arrCopy2); //[ 3, 5, 7]

console.log(arrCopy3); //[3, 5, 7]

console .log(arrCopy4); //[5, 7, 9]

arrCopy ne définit qu'un seul paramètre, c'est-à-dire que l'indice de départ est 1, donc le tableau renvoyé est l'indice 1 (y compris l'indice 1) commence à la fin du tableau.
arrCopy2 définit deux paramètres et renvoie l'indice de début (y compris 1) à l'indice de fin (pas le sous-tableau incluant 4).
arrCopy3 définit deux paramètres. L'indice de terminaison est un nombre négatif. Lorsqu'un nombre négatif apparaît, ajoutez le nombre négatif à la valeur de la longueur du tableau (<.>6) pour remplacer le numéro à cette position, donc il commence de 1 à 4 ( exclusif). arrCopy4
Les deux paramètres sont des nombres négatifs, ajoutez donc la longueur du tableau 6 pour convertir en un nombre positif, donc il équivaut à slice(2,5).

8, splice()

splice()  : Une méthode de tableau très puissante. Elle a de nombreuses utilisations et peut implémenter la suppression, l'insertion et le remplacement.

Supprimer : Vous pouvez supprimer n'importe quel nombre d'éléments, il suffit de spécifier 2 paramètres : la position et le contenu du premier élément à supprimer Le nombre d'éléments supprimés. Par exemple, splice(0,2) supprimera les deux premiers éléments du tableau.

Insérer : Vous pouvez insérer n'importe quel nombre d'éléments dans la position spécifiée, il suffit de fournir 3 paramètres : position de départ, 0 (le nombre d'éléments à supprimer) et les éléments à insérer. Par exemple, splice(2,0,4,6) insérera 2 >4 et 6.
Remplacement : vous pouvez insérer n'importe quel nombre d'éléments à la position spécifiée et supprimer n'importe quel nombre d'éléments en même temps. Spécifiez simplement 3 Paramètres : position de départ, nombre d'éléments à supprimer et nombre illimité d'éléments à insérer. Le nombre d'éléments insérés ne doit pas nécessairement être égal au nombre d'éléments supprimés. Par exemple, splice (2,1,4,6) supprimera l'élément à la position actuelle du tableau 2 , puis supprimer l'élément de la position actuelle du tableau 2 commencer à insérer 4 et 6 . La méthode splice()

renvoie toujours un tableau contenant les éléments supprimés du tableau d'origine, ou une valeur vide si aucun élément n'a été supprimé.

1

2 3 4 5 6 7 8 9 10

var arr = [1,3,5,7,9,11]; var arrRemoved =  arr.splice(0,2); console.log(arr); //[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] var arrRemoved2 =  arr.splice(2,0,4, 6); console.log(arr); // [5, 7, 4, 6, 9, 11] console.log(arrRemoved2); // [] var arrRemoved3 =  arr.splice(1,1,2,4); console.log(arr); // [5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3); //[7]

9、indexOf()和 lastIndexOf()

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置0）开始向后查找。 
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回- 1. ="825">

1 2 3 4 5 6

var arr = [1,3,5,7,7,5,3,1]; console.log(arr.indexOf(5)); //2 console.log(arr.lastIndexOf(5)); //5 console.log(arr.indexOf(5,2)); //2 console.log(arr.lastIndexOf(5,4)); //2 console.log(arr.indexOf("5")); //-1

123456 var arr = [1,3,5,7,7,5,3,1];console.log(arr.indexOf(5)); //2console.log(arr.lastIndexOf(5)); //5console.log(arr.indexOf(5,2)); //2console.log(arr.lastIndexOf(5,4)); //2console.log(arr.indexOf("5" )); //-1

10, forEach()

forEach() : Parcourez le tableau et exécutez la fonction donnée sur chaque élément du tableau. Cette méthode n'a aucune valeur de retour. Les paramètres sont tous de type fonction Par défaut, les paramètres sont passés : le contenu du tableau parcouru ;

1

1 2 3 4 5 6 7 8 9 10

var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a){ console.log(x + '|' + index + '|' + (a === arr)); }); // 输出为： // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true

2

3

4

5

6

7

8

9

10

var arr = [1, 2, 3, 4, 5];

arr.forEach(

fonction(x, index, a){

console.log( x + '|'

+ index +

1 2 3 4 5

var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(function(item){ return item*item; }); console.log(arr2); //[1, 4, 9, 16, 25]

'|' + (a === arr));

});

// Le résultat est :

// 1|0|true

// 2|1|true

// 3|2| vrai

// 4|3|true// 5|4|true

11, map()map( )  : fait référence à " mappage " , exécute la fonction donnée sur chaque élément du tableau et renvoie each Un tableau composé des résultats de l'appel de fonction. Le code suivant utilise la méthode map pour mettre au carré chaque nombre du tableau.

1 2 3 4 5 td>

var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(fonction(élément){ retour item*item; }); console.log(arr2); //[1, 4, 9, 16, 25]

12, filtre()

filtre() :"Filtre" fonction, chaque élément du tableau exécute la fonction donnée et renvoie un tableau qui répond aux conditions de filtrage.

1

1 2 3 4 5

var arr = [1, 2, 3, 4, 5, 6,  7, 8, 9, 10]; var arr2 = arr.filter(function(x, index) { return index % 3 === 0 || x >=  8; }); console.log(arr2); //[1, 4, 7, 8, 9, 10]

2

3

4

5

td>

var

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var arr2 = arr.filter( fonction

1 2 3 4 5 6 7 8 9

var arr = [1, 2, 3, 4, 5]; var arr2 = arr.every(function(x) { return x < 10; }); console.log(arr2); //true var arr3 = arr.every(function(x) { return x < 3; }); console.log(arr3); // false

(x, index) {

return index % 3 === 0 || p style="text-align:left;">console.log(arr2); ;"> //[1, 4, 7, 8, 9, 10]

13 , every()every() : Déterminez si chaque élément du tableau répond aux conditions, uniquement Ce n'est que lorsque tous les articles remplissent les conditions que true sera retourné.

1 2 3 4 5 6 7 8 9

var arr = [1, 2, 3, 4, 5] ; var arr2 = arr.every(fonction(x) { retour x <10; }); console.log(arr2); //true var arr3 = arr.every(fonction(x) { retour x <3; }); console.log(arr3); // false

14、certains()

certains() ：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回vrai。

1

1 2 3 4 5 6 7 8 9

var arr = [1, 2, 3, 4, 5]; var arr2 = arr.some(function(x) { return x < 3; }); console.log(arr2); //true var arr3 = arr.some(function(x) { return x < 1; }); console.log(arr3); // false

2

3

4

5

6

7

8

9

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.some(fonction(x) {

return x < 3;

});

console.log(arr2); //true

var arr3 = arr.some(fonction(x) {

retour x <1;

});

console.log(arr3); // false

15, reduce() et réduireRight()

Les deux méthodes parcourront tous les éléments du tableau, puis construiront une valeur finale renvoyée. La méthode reduce() commence à partir du premier élément du tableau et parcourt jusqu'à la fin un par un. Et réduireRight() commence à partir du dernier élément du tableau et passe au premier élément.

Les deux méthodes acceptent deux paramètres : une fonction à appeler sur chaque élément et (éventuellement) une valeur initiale à utiliser comme base pour la fusion.

Les fonctions passées à réduire() et réduireRight() reçoivent 4 paramètres : valeur précédente, valeur actuelle, index de l'élément et de l'objet tableau. Toute valeur renvoyée par cette fonction est automatiquement transmise à l'élément suivant en tant que premier paramètre. La première itération se produit sur le deuxième élément du tableau, donc le premier argument est le premier élément du tableau et le deuxième argument est le deuxième élément du tableau.

Le code suivant utilise reduce() pour implémenter la sommation du tableau. Une valeur initiale est ajoutée au tableau au début . 10 .

tr>

1

1 2 3 4 5

var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; },10); console.log(sum); //25

2

3

4

5

td>

var

values ​​​​= [1,2,3,4,5];

var sum = valeurs.reduceRight(

fonction

(prev, cur, index, array){

retour

prev + cur;

},10);

console.log(sum); //25

Cet article est reproduit à partir de http://www.jb51.net/article/87930.htm Recommandations associées : Tri de tableaux JSEncapsulation de fonctions js

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!