Une brève discussion sur les objets JavaScript Array_Connaissances de base

Tableau

1. Introduction

Un tableau est une collection ordonnée de valeurs. Chaque valeur est appelée un élément et chaque élément a une position dans le tableau, représentée par un nombre, appelé index. Les tableaux JavaScript ne sont pas typés : les éléments du tableau peuvent être de n'importe quel type et différents éléments d'un même tableau peuvent avoir des types différents. --"Le guide définitif de JavaScript (6e édition)"

2. Définition

Copier le code Le code est le suivant :

var noms = new Array("Zhang San", "Li Si", "Wang Wu");
//ou
var noms = ["Zhang San", "Li Si", "Wang Wu"];

3. Attributs

length : Indique la longueur des éléments du tableau.

4. Méthodes d'instance

Méthodes courantes :

1) unshift() : Insérer des éléments en tête du tableau

2) shift() : Supprime et renvoie le premier élément du tableau

3) push() : Insérer des éléments à la fin du tableau

4) pop() : Supprime et renvoie le dernier élément du tableau

4.1 concat() : Connecte des éléments à un tableau. Le tableau d'origine ne sera pas modifié et un nouveau tableau sera renvoyé
Paramètres :

①value1,value2....valueN : n'importe quel nombre de valeurs

Valeur de retour :

{Array} Un nouveau tableau, contenant le tableau d'origine et les éléments nouvellement ajoutés.

Exemple :

Copier le code Le code est le suivant :

var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
console.log(demoArray); // => demoArray:['a','b','c'] Le tableau d'origine ne change pas
console.log(demoArray2); // => ['a','b','c','e']

4.2 each() : parcourez les éléments dans l'ordre et déterminez si chaque élément est vrai
Paramètres :

①function(value,index,self){} : Chaque élément utilisera cette fonction pour déterminer si elle est vraie. Lorsqu'il est déterminé qu'elle est fausse, le parcours se terminera immédiatement.

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour :

{Boolean} : renvoie vrai uniquement si chaque élément est vrai ; renvoie faux tant qu'un élément est faux.

Exemple :

Copier le code Le code est le suivant :

var demoArray = [1, 2, 3];
var rs = demoArray.every (fonction (valeur, index, soi) {
Valeur de retour > 0 ;
});
console.log(rs); // => vrai

4.3 filter() : parcourt les éléments dans l'ordre et renvoie un nouveau tableau contenant des éléments qui remplissent les conditions.
Paramètres :

①function(value,index,self){} : Appelez cette fonction sur chaque élément tour à tour et renvoie un nouveau tableau contenant des éléments qui remplissent les conditions.

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour :

{Array} Un nouveau tableau contenant des éléments qui répondent aux critères

Exemple :

Copier le code Le code est le suivant :

var demoArray = [1, 2, 3];
var rs = demoArray.filter (fonction (valeur, index, soi) {
Valeur de retour > 0 ;
});
console.log(rs); // => [1, 2, 3]

4.4 forEach() : parcourt les éléments dans l'ordre et exécute la fonction spécifiée sans valeur de retour ;
Paramètres :

①function(value,index,self){} : Appelez cette fonction pour chaque élément tour à tour

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour : Aucune

Exemple :

Copier le code Le code est le suivant :

var demoArray = [1, 2, 3];
demoArray.forEach (fonction (valeur, index, soi) {
Console.log(value); // => Sortie dans l'ordre : 1 2 3
});

4.5 indexOf() : Rechercher les éléments correspondants dans le tableau. S'il n'y a aucun élément correspondant, -1 est renvoyé. Utilisez l'opérateur "===" lors de la recherche, vous devez donc faire la distinction entre 1 et "1"
Paramètres :

①value : La valeur à trouver dans le tableau.

②start : La position du numéro de série pour commencer la recherche. S'il est omis, il sera 0.

Valeur de retour :

{Int} : renvoie le numéro de série de la première valeur correspondante dans le tableau. S'il n'existe pas, renvoie -1

.

Exemple :

Copier le code Le code est le suivant :

['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1 : '===' méthode de correspondance utilisée

4.6 join() : Collez tous les éléments du tableau en une chaîne à l'aide d'un séparateur.
Paramètres :

①sparator {String} : Le séparateur entre chaque élément s'il est omis, il sera séparé par des virgules anglaises ',' par défaut.

Valeur de retour :

{String} : chaque élément est fusionné en une chaîne avec sparator comme séparateur.

Exemple :

Copier le code Le code est le suivant :

['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // =>

4.7 lastIndexOf : recherche les éléments correspondants dans le tableau inversé. S'il n'y a aucun élément correspondant, -1 est renvoyé. Utilisez l'opérateur "===" lors de la recherche, vous devez donc faire la distinction entre 1 et '1'

Paramètres :

①value : La valeur à trouver dans le tableau.

②start : La position du numéro de série pour commencer la recherche. En cas d'omission, la recherche commencera à partir du dernier élément.

Valeur de retour :

{Int} : Recherchez de droite à gauche le numéro de série de la première valeur correspondante dans le tableau. S'il n'existe pas, renvoyez -1

.

Exemple :

Copier le code Le code est le suivant :

['a', 'b', 'c'].lastIndexOf('a'); // => ['a', 'b', 'c'].lastIndexOf('a', 1); // => ['a', 'b', 'c'].lastIndexOf('d'); // => [1, 2, 3].lastIndexOf('1'); // => -1 : '===' méthode de correspondance utilisée



4.8 map() : parcourez et calculez chaque élément dans l'ordre, et renvoyez un tableau d'éléments calculés
Paramètres :

①function(value,index,self){} : Chaque élément appelle cette fonction à son tour et renvoie l'élément calculé

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour :

{Array} Un nouveau tableau contenant de bons éléments

Exemple :

Copier le code

Le code est le suivant : [1, 2, 3].map(function (value, index, self) { Valeur de retour * 2 ;

}); // => [2, 4, 6]

4.9 pop() : Supprime et renvoie le dernier élément du tableau
Paramètres : Aucun

Valeur de retour :

{Object} Le dernier élément du tableau ; si le tableau est vide, undefined

est renvoyé

Exemple :

Copier le code

Le code est le suivant : var demoArray = ['a', 'b', 'c']; demoArray.pop(); // => demoArray.pop(); // => demoArray.pop(); // => demoArray.pop(); // => non défini

4.10 push() : Ajouter des éléments à la fin du tableau
Paramètres :

①value1,value2....valueN : Ajoutez n'importe quel nombre de valeurs à la fin du tableau

Valeur de retour :

{int} nouvelle longueur du tableau

Exemple :

Copier le code

Le code est le suivant :

var demoArray = ['a', 'b', 'c']; demoArray.push('d'); // => 4, demoArray : ['a', 'b', 'c', 'd'] demoArray.push('e', 'f'); // => 6, demoArray : ['a', 'b', 'c', 'd', 'e', ​​​​'f'] console.log(demoArray); // => ['a', 'b', 'c', 'e', ​​​​'f']

4.11 reverse() : Inverse l'ordre des éléments du tableau.
Paramètres : Aucun

Valeur de retour : Aucune (inverser l'ordre des éléments dans le tableau d'origine).

Exemple :

Copier le code Le code est le suivant :

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

4.12 shift() : Supprime et renvoie le premier élément du tableau
Paramètres : Aucun

Valeur de retour :

{Object} Le premier élément du tableau ; si le tableau est vide, undefined est renvoyé.

Exemple :

Copier le code Le code est le suivant :

var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => demoArray.shift(); // => demoArray.shift(); // => demoArray.shift(); // => non défini



4.13 slice(startIndex,endIndex) : Renvoie une partie du tableau.

Paramètres :

①startIndex : Le numéro de série au début ; s'il s'agit d'un nombre négatif, cela signifie compter à partir de la fin, -1 représente le dernier élément, -2 représente l'avant-dernier élément, et ainsi de suite.

②endIndex : Le numéro de série après l'élément à la fin. S'il n'est pas spécifié, c'est la fin. L'élément intercepté ne contient pas ici l'élément avec le numéro de série, et se termine ici par l'élément avant le numéro de série.

Valeur de retour :

{Array} Un nouveau tableau contenant tous les éléments de startIndex à l'élément précédent de endIndex.

Exemple :

Copier le code Le code est le suivant : [1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] : commencer à partir du numéro de séquence 1

[1, 2, 3, 4, 5, 6].slice(0, 4); [1, 2, 3, 4] : intercepter le numéro de séquence 0 au numéro de séquence 3 (celui précédant le numéro de séquence 4) Élément
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] : intercepte les 2 éléments suivants



4.14 sort(opt_orderFunc) : Trier selon certaines règles

Paramètres :

①opt_orderFunc(v1,v2) {Fonction} : fonction de règle de tri facultative. En cas d'omission, les éléments seront triés par ordre alphabétique du plus petit au plus grand.

v1 : L'élément précédent lors du parcours.

v2 : Les éléments suivants lors de la traversée.

Trier :

Comparez v1 et v2 et renvoyez un nombre pour représenter les règles de tri de v1 et v2 :

Inférieur à 0 : v1 est plus petit que v2, v1 est classé devant v2.

Égal à 0 : v1 est égal à v2, v1 est classé devant v2.

Supérieur à 0 : v1 est supérieur à v2, v1 est classé derrière v2.

Valeur de retour : Aucune (opération de tri dans le tableau d'origine).

Exemple :

Copier le code Le code est le suivant : [1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] : Tous les éléments ici sont convertis en caractères, Le le caractère de 11 vient avant 2

[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {

Retourner v1 - v2 ;
}); // => [1, 2, 3, 4, 5, 11, 22] : Trier du petit au grand
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
Return -(v1 - v2); //Si vous le annulez, vous pouvez le convertir en De grand à petit
}); // => [22, 11, 5, 4, 3, 2, 1]



4.15 splice() : Insérer et supprimer des éléments de tableau

Paramètres :

①start {int} : Le numéro de séquence de départ pour commencer l'insertion, la suppression ou le remplacement.

②deleteCount {int} : Le nombre d'éléments à supprimer, en comptant depuis le début.

③value1,value2 ... valueN {Object} : paramètre facultatif, indiquant l'élément à insérer, à partir du début. Si le paramètre ② n'est pas 0, alors l'opération de suppression est effectuée en premier, puis l'opération d'insertion est effectuée.

Valeur de retour :

{Array} Renvoie un nouveau tableau contenant les éléments supprimés. Si le paramètre ② est 0, cela signifie qu'aucun élément n'est supprimé et qu'un tableau vide est renvoyé.

Exemple :

Copier le code Le code est le suivant :

// 1. Supprimer
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // Supprime 2 éléments à partir de 0 et renvoie un tableau contenant les éléments supprimés : ['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
// 2. Insérer
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②Le paramètre est 0 et un tableau vide est renvoyé
console.log(demoArray2); // => console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
// 3. Supprimez d'abord puis insérez
var demoArray = ['a', 'b', 'c', 'd', 'e'];
// Lorsque le paramètre ② est différent de 0, effectuez d'abord l'opération de suppression (supprimez les 4 éléments à partir de 0 et renvoyez un tableau contenant les éléments supprimés), puis effectuez l'opération d'insertion
var demoArray2 = demoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd']
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']

4.16 toString() : Concatène tous les éléments du tableau en une chaîne via une virgule anglaise ','.

Paramètres : Aucun

Valeur de retour :

{String} Tous les éléments du tableau sont concaténés en une chaîne via une virgule anglaise ',' et renvoyés. Identique à appeler la méthode join() sans paramètres.

Exemple :

Copier le code Le code est le suivant :

[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'

4.17 unshift() : Insérer des éléments en tête du tableau

Paramètres :

①value1,value2....valueN : Ajoutez n'importe quel nombre de valeurs à la tête du tableau

Valeur de retour :

{int} nouvelle longueur du tableau

Exemple :

Copier le code Le code est le suivant :

var demoArray = [];
demoArray.unshift('a'); // => demoArray:['a']
demoArray.unshift('b'); // => demoArray:['b', 'a']
demoArray.unshift('c'); // => demoArray:['c', 'b', 'a']
demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a']
demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']

5. Méthode statique

5.1 Array.isArray() : Déterminer si l'objet est un tableau

Paramètres :

①value {Object} : n'importe quel objet

Valeur de retour :

{Boolean} Renvoie le résultat du jugement. Quand c'est vrai, cela signifie que l'objet est un tableau ; quand c'est faux, cela signifie que l'objet n'est pas un tableau

Exemple :

Copier le code Le code est le suivant :

Array.isArray([]); // => vrai
Array.isArray(['a', 'b', 'c']); // => Array.isArray('a'); // => faux
Array.isArray('[1, 2, 3]'); // =>

6. Fonctionnement pratique

Indice 6.1 Description : Chaque élément a une position dans le tableau, représentée par un nombre, appelé index. L'index commence à 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite ;

Lors de l'obtention d'un index qui n'existe pas dans le tableau, undefined est renvoyé.

Exemple :

Copier le code

Le code est le suivant : var demoArray = ['a', 'b', 'c', 'd', 'e']; demoArray[0]; // => Récupère le premier élément : 'a'

demoArray[0] = 1; // Définit le premier élément sur 1

console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => undefined : Lorsque l'index obtenu n'existe pas, renvoie undefined



6.2 pour la déclaration
Remarque : Vous pouvez parcourir le tableau un par un via l'instruction for

Exemple :

Copier le code

Le code est le suivant : var demoArray = ['a', 'b', 'c', 'd', 'e']; pour (var i = 0, length = demoArray.length; i < length; i ) {

console.log(demoArray[i]); // => Afficher les éléments du tableau un par un

>

6.3 Copie superficielle
Remarque : Le type Array est un type référence ; lorsque le tableau a est copié dans le tableau b, si les éléments du tableau b sont modifiés, le tableau a sera également modifié.

Exemple :

Copier le code Le code est le suivant :

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA; // Attribue le tableau A au tableau B
demoArrayB[0] = 1; // Modifier les éléments du tableau B
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e'] : Les éléments du tableau A ont également changé

6.4 Copie approfondie
Description : utilisez la méthode concat() pour renvoyer un nouveau tableau ; pour éviter une copie superficielle, modifiez les éléments du tableau b et le tableau a ne changera pas.

Exemple :

Copier le code Le code est le suivant :

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA.concat(); // Utilisez la méthode concat() pour renvoyer un nouveau tableau
demoArrayB[0] = 1; // Modifier les éléments du tableau B
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e'] : Les éléments du tableau A n'ont pas changé
console.log(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e'] : Les éléments du tableau B ont changé