Résumé de comparaison des tranches et des épissures de tableau en JavaScript

Avant-propos

Aujourd'hui, j'ai examiné Javascript et vu les méthodes de tableau. Il existe deux méthodes similaires - splice et splice. Elles se ressemblent beaucoup, mais il y a un p supplémentaire, mais l'utilisation est assez différente.

En utilisation, vous pouvez réduire les risques de confusion en choisissant une API à forte expressivité sémantique.

1. slice

slice spécifie les éléments d'un tableau pour créer un nouveau tableau, c'est-à-dire que le tableau d'origine ne changera pas

tranche du tableau (ECMAScript 5.1 La norme 15.4.4.10) est très similaire à une tranche de chaînes. Selon la spécification, slice nécessite deux paramètres, le point de départ et le point final. Il renvoie un nouveau tableau contenant tous les éléments commençant au point de départ et se terminant au point final.

Il n'est pas trop difficile de comprendre la fonction de slice :

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

Il est important de noter que cela ne modifie pas le tableau d'origine.

L'extrait de code suivant décrit ce comportement. La valeur de x n'a pas changé et y est la partie interceptée.

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2. splice

splice est la méthode de tableau la plus puissante de JS. Elle peut supprimer, insérer et remplacer des éléments de tableau, et la valeur de retour est la valeur manipulée.

suppression d'épissure : color.splice(1,2) (supprime deux éléments 1 et 2 en couleur)

insertion d'épissure : color.splice(1,0,'brown', '); pink') (insérer deux valeurs avant l'élément avec la valeur de clé de couleur 1);

remplacement d'épissure : color.splice(1,2,'brown','pink') (remplacer en couleur 1, 2 éléments);

Bien que splice (section 15.4.4.12) nécessite également (au moins) deux paramètres, sa signification est complètement différente.

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

De plus, splice modifiera également le tableau d'origine.

Ne soyez pas trop surpris, c'est exactement ce que l'épissure est censée faire.

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

Lorsque vous écrivez votre propre module, il est important de choisir une API qui risque le moins d'être confondue. En théorie, vos utilisateurs ne devraient pas toujours être en mesure de déterminer celui dont ils ont besoin en lisant la documentation. Alors, quelle convention de dénomination devrions-nous suivre ?

La convention que je connais le mieux (liée à mon expérience précédente avec QT) est de choisir le verbe correctement : le présent indique un comportement de modification possible, le passé ne modifie pas l'objet d'origine, mais en renvoie un nouveau. version. Si possible, fournissez les deux versions.

Reportez-vous à l'exemple suivant :

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

Notez que (dans un système de coordonnées cartésiennes bidimensionnelles) translation() qui déplace la position est différent de translation() qui crée uniquement un différence de coordonnées déplacée entre. L’appel de translation modifie la valeur du point p. Cependant, comme translation() ne modifie pas l'objet d'origine, l'objet q n'est pas modifié, mais seule une nouvelle copie s est renvoyée.

Résumé

Si cette spécification peut être déployée de manière très cohérente dans vos applications, la confusion mentionnée ci-dessus sera minimisée. Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il pourra apporter une certaine aide aux études ou au travail de chacun.

Pour plus d'articles connexes sur la comparaison des tranches et des épissures de tableau en JavaScript, veuillez faire attention au site Web PHP chinois !