Maison > interface Web > js tutoriel > Une exploration approfondie des méthodes de tableau Javascript_Connaissances de base

Une exploration approfondie des méthodes de tableau Javascript_Connaissances de base

WBOY
Libérer: 2016-05-16 16:21:33
original
1005 Les gens l'ont consulté

En JavaScript, les tableaux peuvent être créés à l'aide du constructeur Array, ou créés rapidement à l'aide de [], qui est également la méthode préférée. Array est le prototype hérité de Object, et il n'a pas de valeur de retour spéciale pour typeof, il renvoie uniquement « objet ».

1. Méthode Array.prototype.slice
La méthode slice du tableau est généralement utilisée pour extraire une tranche d’un tableau. Cependant, il a également la capacité de convertir des objets « de type tableau » (tels que des arguments et HTMLCollection) en tableaux réels.

Copier le code Le code est le suivant :

var nodesArr = Array.prototype.slice.call(document.forms);
var argsArr = Array.prototype.slice.call(arguments);

Je suis simplement curieux de savoir pourquoi la méthode slice du tableau a une telle capacité et comment est-elle implémentée dans le moteur javascript ? La méthode de tranche fraternelle a-t-elle une telle capacité ?

Avec curiosité, téléchargez localement le code source du moteur javascript V8 de Google. L'adresse de téléchargement du code source V8 : https://github.com/v8/v8.

Recherchez "Array.prototype.slice" dans v8-master/src/array.js :

Copier le code Le code est le suivant :

function ArraySlice (début, fin) {
CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
...
var result = []; // Cette phrase est la clé
if (end_i < start_i) renvoie le résultat ;
if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
...
SparseSlice(array, start_i, end_i - start_i, len, result);
} autre {
SimpleSlice(array, start_i, end_i - start_i, len, result);
>
...
Résultat de retour ;

Ensuite, j'ai deviné que la méthode SimpleSlice devait être utilisée pour appeler le "tableau de classes", puis j'ai recherché "SimpleSlice" dans le code source et j'ai découvert que la méthode SimpleSlice était également appelée dans la source Array.prototype.splice code, et la variable de résultat a également été initialisée sur un tableau vide. Cependant, si vous souhaitez utiliser la méthode splice pour convertir le "array-like" en un véritable tableau, vous devez passer le paramètre de position de départ à 0, c'est-à-dire :

Copier le code Le code est le suivant :

var nodesArr = Array.prototype.splice.call(document.forms, 0);

Parce que son principe de mise en œuvre est de former un nouveau tableau à partir des éléments du tableau supprimés. Les enfants intéressés peuvent jeter un œil à l’implémentation du code source d’Array.prototype.splice.
De plus, slice peut également cloner un tableau :

Copier le code Le code est le suivant :

var arr = [1, 2, 3];
var cloneArr = arr.slice(); // cloneArr : [1, 2, 3]

2. Méthode Array.prototype.push
Les tableaux peuvent être fusionnés en utilisant la méthode push :

Copier le code Le code est le suivant :

var arr1 = [1, 'str', {nom : 'lang'}];
var arr2 = [2, 'ing'];
Array.prototype.push.apply(arr1, arr2);
// Renvoie le résultat : [1, "str", {name: 'lang'}, 2, "ing"]

3. Méthode Array.prototype.sort
Entrez d'abord le code :

Copier le code Le code est le suivant :

var arr = ['1', '2', '10', '12'];
arr.sort();
// Renvoie les résultats : ["1", "10", "12", "2"]

Les résultats ci-dessus ne correspondent généralement pas à ce que nous souhaitons, alors comment trier par valeur numérique :

Copier le code Le code est le suivant :

arr.sort(fonction(a, b) {
retourner a - b;
})
// Renvoie les résultats : ["1", "2", "10", "12"]

Grâce à la fonction comparateur de tri, vous pouvez personnaliser de nombreux comparateurs pour réaliser un tri personnalisé.

4. attribut de longueur
L'attribut length du tableau n'est pas en lecture seule, ce qui signifie qu'il peut également être écrit. Par exemple, utilisez l'attribut length pour tronquer le tableau :

.

Copier le code Le code est le suivant :

var arr = [1, 2, 3, 4];
arr.longueur = 2;
//arr: [1, 2]
arr.length = 0;
//arr: []

Dans le même temps, si l'attribut length est agrandi, la valeur de longueur du tableau augmentera et undefined sera utilisé comme nouvel élément à remplir.

Copier le code Le code est le suivant :

var arr = [];
arr.longueur = 3;
// arr : [indéfini, indéfini, indéfini]

D'accord, c'est tout pour aujourd'hui. Il est déjà tôt le matin. J'ajouterai ici si je trouve de nouvelles découvertes dans le futur.
Avant, je n'avais pas l'habitude de bloguer. J'avais seulement l'habitude de mettre mes résumés habituels dans Youdao Cloud Notes. Je ne m'attendais pas à ce qu'il faille beaucoup de réflexion pour rédiger mes opinions, car je dois réfléchir à comment. de les exprimer pour que les autres puissent mieux comprendre.

S'il y a une expression incorrecte ou un malentendu, aidez-moi à le corriger.

Vous trouverez également ci-joint quelques méthodes de tableau javascript couramment utilisées

concat() concatène deux ou plusieurs tableaux et renvoie le résultat.
join() place tous les éléments du tableau dans une chaîne. Les éléments sont séparés par le délimiteur spécifié.
pop() supprime et renvoie le dernier élément du tableau
push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur.
reverse() inverse l'ordre des éléments dans un tableau.
shift() supprime et renvoie le premier élément du tableau
slice() renvoie les éléments sélectionnés d'un tableau existant
sort() trie les éléments du tableau
splice() supprime des éléments et ajoute de nouveaux éléments au tableau.
toSource() renvoie le code source de l'objet
toString() convertit le tableau en chaîne et renvoie le résultat.
toLocaleString() convertit le tableau en tableau local et renvoie le résultat.
unshift() ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur.
valueOf() renvoie la valeur d'origine de l'objet tableau

É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