Explication détaillée des tableaux JavaScript et des fonctions communes_Connaissances de base

1. Apprenez à connaître les tableaux

Un tableau est une collection de certains types de données. Le type de données peut être un entier, une chaîne ou même un objet.
Javascript ne prend pas en charge les tableaux multidimensionnels, mais comme les tableaux peuvent contenir des objets (un tableau est également un objet), les tableaux peuvent réaliser des fonctions similaires aux tableaux multidimensionnels en s'emboîtant les uns les autres.

1.1 Définir un tableau

Déclarer un tableau de 10 éléments :

Copier le code Le code est le suivant :

var a = new Array(10);

À ce moment, l'espace mémoire a été ouvert pour a, contenant 10 éléments. Utilisez le nom du tableau plus [indice] pour l'appeler, comme a[2], mais. l'élément n'a pas été initialisé pour le moment. L'appel retournera undefined.
Le code suivant définit un tableau de variables et attribue des valeurs.

Copier le code Le code est le suivant :

var a = new Array();
a [0] = 10;
a[1] = "aaa";
a[2] = 12,6;

Comme mentionné ci-dessus, les objets peuvent être placés dans des tableaux. Par exemple, le code suivant :

Copiez le code Le code. est la suivante :

var a = new Array();
a[0] = true;
a[1] = document.getElementById("text");
a[2] = { x:11, y:22};
a[3] = new Array();

Les tableaux peuvent également se voir attribuer des valeurs directement lorsqu'ils sont instanciés, par exemple :

Copier le code Le code est le suivant :

var a = nouveau tableau(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

a et b sont tous deux des tableaux, mais b utilise une déclaration implicite pour créer une autre instance, si alert(a==b) est utilisé, false

apparaîtra.

1.2 Tableau multidimensionnel

En fait, Javascript ne prend pas en charge les tableaux multidimensionnels. En asp, vous pouvez utiliser dim a(10,3) pour définir des tableaux multidimensionnels en Javascript, si vous utilisez var a = new Array(10,3). , une erreur sera signalée
Mais comme mentionné précédemment, les tableaux peuvent contenir des objets, vous pouvez donc déclarer un élément du tableau comme un tableau, par exemple :

Copier le code Le code est le suivant :

var a = new Array();
a [0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //Pop up 1

déclaration Lors de l'attribution

Copier le code Le code est le suivant :

var a = nouveau tableau([1, 2,3], [4,5,6],[7,8,9]);
var b = [[1,2,3], [4,5,6] , [7,8, 9]];

L'effet est le même, a utilise une instanciation régulière, b est une déclaration implicite et le résultat est un tableau multidimensionnel.

1.3 Littéraux de tableau

Je ne sais vraiment pas comment cela s'appelle en chinois, tableau de texte ?
En parlant de tableaux, nous devons parler des littéraux de tableau. Les tableaux sont en fait des objets spéciaux. Les objets ont des propriétés et des méthodes uniques. Les valeurs et les appels sont obtenus via le nom de l'objet.property, object.method() et les tableaux le sont. obtenu via la marque suivante pour obtenir la valeur. Les littéraux de tableau sont similaires aux tableaux à bien des égards. Ce sont deux collections d'un certain type de données. Cependant, les littéraux de tableau sont fondamentalement un objet. Sa déclaration et son appel sont différents des tableaux :

Copier le code Le code est le suivant :

var aa = new Object();
aa .x = "chat";
aa.y = "ensoleillé";
alerte(aa.x); //Pop up chat

Créez un objet simple. Généralement, l'appel se fait via aa.x S'il est utilisé comme littéral de tableau, l'utilisation de alert(aa["x"]) fera également apparaître cat

Copier le code Le code est le suivant :

var a = {x: "cat" , y : "ensoleillé"};
alert(a["y"]); //pop-up ensoleillé

C'est une autre façon de créer un objet, le résultat est le même

2. Fonctionnement des éléments du tableau

Comme mentionné ci-dessus, vous pouvez lire et écrire des éléments via un tableau [indice]
La plage de l'indice est 0 – (23 (exposant 2) -1), et l'indice est un nombre négatif, une virgule flottante ou même une valeur booléenne time, le tableau sera automatiquement converti en type d'objet, par exemple :

Copier le code Le code est comme suit :

var b = new Array();
b[2.2] = "XXXXX";
alert(b[2.2]); >

Cela équivaut à b["2.2"] = "XXXXX".

2.1 Boucle de tableau

Copier le code Le code est le suivant :

var a = [1,2,3,4,5,6];
for(var i =0; ialert(a[i]);
>

C'est le code le plus couramment utilisé : lors de la traversée du tableau, le code apparaîtra de 1 à 6 dans l'ordre
Il y en a un autre couramment utilisé :

Copier le code Le code est le suivant :

var a = [1,2,3,4,5 ,6];
pour(var e dans a){
alerte(e);
}

Apparaît toujours de 1 à 6 dans l'ordre. for...in est un objet de traversée (un tableau est un objet spécial). Il est utilisé sur un tableau. Parce que le tableau n'a pas de nom d'attribut, la valeur est directement affichée. . Cette déclaration structurelle est utilisée sur l'objet :

Copier le code Le code est le suivant :

var a = {x:1,y :2,z:3};
for(var e in a){
alert(e ":" a[e]);
>

À ce stade, e obtient le nom de l'attribut, c'est-à-dire x, y, x, et pour obtenir la valeur, le nom du tableau [attribut] est utilisé, donc a[e] est équivalent à a["x" ], une["y"], une["z"]

2.2 Fonctions de tableau communes

concaté

Ajoute un tableau après le tableau existant et renvoie le nouveau tableau sans affecter le tableau existant :

Copier le code Le code est le suivant :

var a = [123];
var b = "sunnycat";
var c = ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1, 2,3,4,[5,6,[7,8]]];

alerte(a.concat(b)); // -> (a) ; // - -> 123
alert(b.concat(c, d)); // -> sunnycatwww,21,ido[object Object]
alert(c.concat(b )); / / -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" # ")); 4#5, 6,7,8#11#22#33

Il convient de noter qu'il ne peut être utilisé que pour des tableaux ou des chaînes. Si la connexion (le a précédent) est une valeur numérique, une valeur booléenne ou un objet, une erreur sera signalée lorsqu'une chaîne est connectée à un. tableau, la chaîne sera suivie du premier élément du tableau en nouveaux éléments, tandis que la chaîne de connexion du tableau ajoutera de nouveaux éléments (je ne connais pas la raison, veuillez divulguer si vous le savez pour les tableaux contenant). tableaux et objets, ils resteront intacts après la connexion.

rejoindre

Concaténez les tableaux avec les séparateurs spécifiés et convertissez les tableaux en chaînes :

Copiez le code Le code est le suivant :

var a = ['a','b','c','d','e','f','g'];

lert(a.join( "," )); // -> a,b,c,d,e,f,g sont équivalents à a.toString()
alert(a.join(" x ")); >a x b x c x d x e x f x g

C'est facile à comprendre, mais il convient de noter que seuls les tableaux unidimensionnels sont convertis S'il y a des tableaux dans le tableau, la connexion de chaîne spécifiée par join ne sera pas utilisée, mais la valeur par défaut toString() le sera. utilisé, tel que

Copier le code Le code est le suivant :

var a = ['a',' b', 'c','d','e','f','g',[11,22,33]];

alert(a.join(" * ")); >a*b*c*d*e*f*g*11,22,33

Remarque : le tableau à l'intérieur du tableau n'est pas utilisé pour la * connexion

pop

Supprimez le dernier élément du tableau et renvoyez l'élément

Copier le code Le code est le suivant :

var a = ["aa","bb","cc"];
document.write(a.pop()); // -> cc
document.write(a) ); // ->aa, bb

Remarque : si le tableau est vide, undéfini est renvoyé

pousser

Ajouter un tableau à la fin du tableau et renvoyer la nouvelle longueur du tableau

Copier le code Le code est le suivant :

var a = ["aa"," bb", "cc"];
document.write(a.push("dd")); // -> 4
document.write(a); // -> aa,bb, cc,dd
document.write(a.push([1,2,3])); // -> 5
document.write(a); ,jj, 1,2,3

La différence avec concat est que concat n'affecte pas le tableau d'origine et renvoie directement un nouveau tableau, tandis que push modifie directement le tableau d'origine et renvoie la nouvelle longueur du tableau

trier

Tri des tableaux, regardons d'abord un exemple

Copier le code Le code est le suivant :

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); ,33445,5654, 654,asd,b

Le résultat n'est-il pas surprenant ? Oui, le tri ne se fait pas par taille entière, mais par comparaison de chaînes. C'est pour comparer le code ANSI du premier caractère. le deuxième caractère est pris puis Ratio, si vous souhaitez comparer par valeurs entières, vous pouvez le faire

Copier le code Le code est le suivant :

var a = [11,2,3 ,33445, 5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); // -> ,3, 11,654,5654,33445

La méthode sort() a un paramètre facultatif, qui est la fonction dans le code. Ceci est un exemple simple. Les non-nombres ne peuvent pas être triés, je n'entrerai donc pas dans les détails ici.

inverse

Le tri inversé du tableau est le même que sort(), en prenant la valeur ASCII du premier caractère pour comparaison

Copier le code Codez comme suit :

var a = [11,3,5,66,4];
alert(a.reverse()); ,5,3 ,11

Si le tableau contient également un tableau, celui-ci sera traité comme un objet et les éléments ne seront pas extraits

Copier le code Coder comme suit :

var a = ['a','b','c','d','e','f','g',[4,11 ,33] ];
alerte(a.reverse()); // -> 4,11,33,g,f,e,d,c,b,a
alerte(a.join( " * " )); // -> 4,11,33 * g * f * e * d * c * b * a

Logiquement, cela devrait être à la fin de la ligne 11, car 4, 11, 33 sont comparés ici comme des objets complets, ils sont donc classés en premier
Si vous ne comprenez pas, utilisez join() pour les enchaîner ensemble, et ce sera beaucoup plus clair

changement

Supprimez le premier élément du tableau et renvoyez l'élément, qui est similaire à pop

Copier le code Le code est le suivant suit :

var a = ["aa","bb","cc"];
document.write(a.shift()); >document.write( a); // -> bb,cc

Remarque : lorsque le tableau est vide, undéfini est renvoyé

unshift

Contrairement à Shift, ajoutez des éléments au début du tableau et renvoyez la nouvelle longueur du tableau

Copier le code Le code est le suivant :

var a = ["aa","bb","cc"];
document.write(a.unshift(11));
document.write(a); // -> 11,aa,bb,cc
document.write(a.unshift([11,22])); document.write(a); // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat")); .write(a); // -> chat,11,22,11,aa,bb,cc

Notez que cette méthode renverra undéfini sous IE. Cela semble être un bug de Microsoft. Je peux utiliser correctement la nouvelle longueur du tableau sous Firefox.

tranche

Fragment de tableau de retour

Copier le code Le code est le suivant :

var a = ['a',' b', 'c', 'd', 'e', ​​'f', 'g'];

alerte(a.slice(1,2)); a.slice (2)); // -> c,d,e,f,g
alerte(a.slice(-4)); >alerte( a.slice(-2,-6)); // -> Vide



a.slice(1,2), le nombre commençant de l'indice 1 à l'indice 2, notez que l'élément avec l'indice 2 n'est pas inclus
S'il n'y a qu'un seul paramètre, il est par défaut Le dernier

-4 du tableau représente le 4ème élément en partant du bas, donc les quatre éléments du bas sont renvoyés La dernière ligne commence à partir du 2ème en partant du bas, car elle est interceptée vers l'arrière, il est évident que les éléments précédents. ne peut pas être obtenu, donc renvoie un tableau vide s'il est modifié en a.slice(-6,-2), il renvoie b,c,d,e

épissure

Supprimer un élément d'un fragment du tableau et renvoyer l'élément supprimé

Copier le code

Le code est le suivant :var a = [1,2,3 ,4, 5,6,7,8,9];document.write(a.splice(3,2)); // -> 4,5

document.write(a); / -> ; 1,2,3,6,7,8,9

document.write(a.splice(4)); // -> 7,8,9 Remarque : sous IE, un le document est renvoyé write(a); // -> 1,2,3,6
document.write(a.splice(0,1)); .write(a); // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"])); > 3
document.write(a); // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee ").join(" #")); // -> aa,bb,cc#6
document.write(a);    // -> 2,ee,7,8,9
document.write(a. splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a) ; // ->2,cc,aa,tt,8,9



Notez que le deuxième paramètre de cette méthode est requis sous IE. S'il n'est pas renseigné, il vaut par défaut 0, comme a.splice(4), il renvoie vide et l'effet est équivalent à a. épissure(4,0 )


versChaîne

Convertir des tableaux en chaînes. Non seulement les tableaux, mais tous les objets peuvent utiliser cette méthode

Copier le code

Le code est le suivant :var a = [5,6,7,8,9,["A","BB"],100];document.write(a.toString()) ; / / -> 5,6,7,8,9,A,BB,100var b = new Date()document.write(b.toString()); Samedi 8 août 17:08:32 UTC 0800 2009

var c = function(s){

alerte(s);
}
document.write(c.toString()); -> ; fonction(s){ alerte(s); }



La valeur booléenne renvoie vrai ou faux, l'objet renvoie [nom de l'objet objet]
Par rapport à la méthode join(), join() remplace uniquement le tableau unidimensionnel, tandis que toString() remplace le tableau entier (quel que soit le tableau unidimensionnel). tableau). Dimensionnel ou multidimensionnel) complètement plat
En même temps, cette méthode peut être utilisée pour la conversion décimale, binaire, octale et hexadécimale, par exemple :

Copier le code

Le code est le suivant :var a = [5,6,7,8,9,"A","BB" ,100]; for(var i=0; idocument.write(a[i].toString() " Le système binaire est " a[i].toString (2) " et le système octal est " a[i].toString(8) ", l'hexadécimal est " a[i].toString(16));
Résultat de sortie :

Copier le code Le code est le suivant :

Le binaire de 5 est 101, le système octal est 5, le système hexadécimal est 5
Le système binaire de 6 est 110, le système octal est 6, le système hexadécimal est 6
Le système binaire de 7 est 111, l'octal le système est 7 et le système hexadécimal est 7
Le système binaire de 8 est 1000, le système octal est 10 et le système hexadécimal est 8. Le système binaire de
9 est 1001, le système octal est 11 , et le système hexadécimal est 9. Le système binaire de A
A est A, le système octal est A et le système décimal est A. L'hexadécimal est A
BB, le binaire est BB, l'octal est BB et l'hexadécimal est est BB
100 est 1100100 en binaire, octal est 144 et hexadécimal est 64

La conversion ne peut être effectuée que sur les éléments. Si l'ensemble du tableau est converti, le tableau sera renvoyé inchangé

versLocaleString

Renvoie une chaîne de format local, principalement utilisée sur les objets Date

Copier le code Le code est le suivant :

var a = new Date();
document .write(a.toString()); // -> samedi 8 août 17:28:36 UTC 0800 2009
document.write(a.toLocaleString()); , 2009 Date 17:28:36
document.write(a.toLocaleDateString()); // -> 8 août 2009

La différence est que toString() renvoie le format standard, et toLocaleString() renvoie la date complète au format local (dans [Panneau de configuration]>>[Options régionales et linguistiques], en modifiant l'[Heure] et [Long Date]), toLocaleDateString() est identique à toLocaleString(), mais cela prend moins de temps

valeurDe

Renvoie différentes valeurs d'origine en fonction de différents objets. Lorsqu'il est utilisé pour la sortie, il est similaire à toString(), mais toString() renvoie le type de chaîne, tandis que valueOf() renvoie le type d'objet d'origine

Copier le code Le code est le suivant :

var a = [1,2,3 ,[4 ,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = fonction(){
alert(" sunnycat");
};
document.write(a.valueOf()); >document.write(typeof (a.valueOf())); // -> object
document.write(b.valueOf()); b.valueOf ())); // -> numéro
document.write(c.valueOf())); ; // -> boolean
document.write(d.valueOf()); // -> alert("sunnycat"); ()) ); // -> fonction



Les tableaux sont aussi des objets, donc typeof (a.valueOf()) renvoie un objet, qui est toujours un tableau multidimensionnel

Copier le code

Le code est le suivant :var a = [1,2,3 ,[4 ,5,6,[7,8,9]]];var aa = a.valueOf();

document.write(aa[3][3][1]); /-> ;8

L'objet Date renvoie le nombre de millisecondes depuis le 1er janvier 1970. Les objets Math et Error n'ont pas la méthode valueOf.

Déclaration：

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