Une brève discussion sur la technique Array.prototype.slice.call_javascript de javascript

Avant d'écrire

En js, on voit souvent la méthode d'écriture Array.prototype.slice.call(arguments,0). Bien sûr, tout le monde peut comprendre le rôle de cette méthode, qui est de convertir un objet de type tableau en un véritable tableau. . Concernant cette méthode, permettez-moi de parler de ma compréhension.

Cela implique la méthode slice() et la méthode call(), parlons donc d'abord brièvement de ces deux méthodes.

Méthode slice()

Les tableaux et les chaînes ont tous deux cette méthode slice. La fonction de cette méthode est d'intercepter une donnée. Il reçoit deux paramètres. Le premier paramètre est l'indice de position à intercepter. Le deuxième paramètre est facultatif et indique la position finale à intercepter, mais n'inclut pas la position finale. Dans un tableau, la valeur de retour de cette méthode est un tableau contenant les éléments interceptés. Dans une chaîne, la valeur de retour de cette méthode est une chaîne contenant la chaîne interceptée.

Cette méthode peut également transmettre des valeurs négatives. Lorsque le paramètre est un nombre négatif, le nombre positif obtenu en ajoutant le paramètre et la longueur du tableau ou de la chaîne est utilisé comme paramètre réel.

est le suivant :

[1,2,3,4,5,6].slice(2,4);

[1,2,3,4,5,6].slice(-4,-2);

Les valeurs de retour sont toutes [3,4], qui sont des tableaux.

'everything'.slice(2,4);

'everything'.slice(-4,-2);

Les valeurs de retour sont respectivement 'er' et 'hi', qui sont des chaînes.

Si un paramètre est transmis, tous les éléments de la position de début à la position de fin seront affichés. Plus d'exemples.

Autres méthodes similaires pour les chaînes

Dans les chaînes, il existe deux autres méthodes de type slice() :

Méthodes substring() et substr().

Parmi elles, la méthode substring() consiste à renvoyer une chaîne de la position de début à la position de fin. substr() reçoit deux paramètres : le premier paramètre indique la position de départ et le deuxième paramètre indique le nombre de caractères à contenir. intercepté, et Les deux premières méthodes sont légèrement différentes.

Lorsque le paramètre passé dans la méthode est un nombre négatif, ces trois méthodes sont légèrement différentes.

Lorsque le paramètre passé dans la méthode est un nombre négatif :

slice(), comme mentionné ci-dessus, ajoute le nombre négatif à la longueur de la chaîne pour obtenir la valeur positive correspondante

Les paramètres de la méthode substring() sont tous mis à zéro ;

Le premier paramètre de la méthode substr() est une valeur positive obtenue en ajoutant la valeur négative plus la longueur de la chaîne, et le deuxième paramètre est mis à zéro.

Méthodes call() et apply()

Les méthodes call() et apply() sont principalement utilisées pour étendre la portée de la fonction.

Les méthodes call() et apply() reçoivent deux paramètres :

apply() : Le premier paramètre est la portée et le second est le tableau de paramètres. Le deuxième paramètre peut être une instance de tableau ou un objet arguments.

La méthode call() reçoit également deux paramètres, mais la méthode de passage des paramètres est différente de apply() : les paramètres de la fonction passée doivent être écrits un par un.

Comme ce n’est pas le sujet, je n’entrerai pas dans les détails ici.

Array.prototype.slice.call(arguments,0)

Dans Array.prototype.slice.call(arguments,0), ​​​​Array.prototype.slice appelle la méthode prototype d'Array. Pour les vrais tableaux, il existe la méthode slice(), mais pour des choses comme les arguments ou self. -défini Bien que certains objets de type tableau aient plusieurs attributs tels que la longueur, ils n'ont pas de méthode slice(). Par conséquent, pour de tels objets de type tableau, vous devez utiliser la méthode prototype pour utiliser la méthode slice(), c'est-à-dire. est, Array.prototype.slice (si en personnalisation, la méthode slice() est personnalisée dans l'objet de type tableau, elle peut donc être appelée directement).

Ainsi, la signification de Array.prototype.slice.call(arguments,0) peut être comprise comme ceci : pour le tableau de classes d'arguments, nous appelons la méthode prototype Array.prototype.slice et utilisons la méthode call() pour limitez la portée aux arguments In, Array.prototype peut ici être compris comme des arguments, et le paramètre 0 est le premier paramètre de la méthode slice(), qui est l'index de position de départ. De cette façon, le tableau de classes d'arguments est converti en un véritable tableau.

Bien sûr, vous pouvez également utiliser le parcours pour convertir des arguments en tableau, donc le code sera naturellement plus long et pas assez direct.

Nous savons qu'Array.prototype.slice.call(arguments) peut convertir des objets avec des attributs de longueur en tableaux, à l'exception de la collection de nœuds sous IE (car l'objet DOM sous IE est implémenté sous la forme d'un objet com, js Les objets et les objets COM ne peuvent pas être convertis)
Tel que :

 var a={length:2,0:'first',1:'second'};
 Array.prototype.slice.call(a);// ["first", "second"]
 var a={length:2};
 Array.prototype.slice.call(a);// [undefined, undefined]

Peut-être que ceux qui viennent de commencer à apprendre le js ne comprennent pas très bien pourquoi cette phrase peut remplir une telle fonction. Par exemple, j’en suis un, alors explorons-le.

Tout d'abord, slice a deux utilisations, l'une est String.slice et l'autre est Array.slice. La première renvoie une chaîne et la seconde renvoie un tableau. Ici, nous regardons le second.

Array.prototype.slice.call(arguments) peut convertir les arguments en tableau, alors c'est arguments.toArray().slice(); À ce stade, pouvons-nous simplement dire Array.prototype.slice.call(arguments) ) Le processus consiste à convertir le premier paramètre transmis en tableau, puis à appeler slice ?

Examinons à nouveau l'utilisation de call, comme le montre l'exemple suivant

 var a = function(){
   console.log(this);  // 'littledu'
   console.log(typeof this);   // Object
   console.log(this instanceof String);  // true
 }
 a.call('littledu');

可以看出，call了后，就把当前函数推入所传参数的作用域中去了，不知道这样说对不对，但反正this就指向了所传进去的对象就肯定的了。
到这里，基本就差不多了，我们可以大胆猜一下slice的内部实现，如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

大概就是这样吧，理解就行，不深究。

最后，附个转成数组的通用函数

var toArray = function(s){
  try{
    return Array.prototype.slice.call(s);
  } catch(e){
      var arr = [];
      for(var i = 0,len = s.length; i < len; i++){
        //arr.push(s[i]);
        arr[i] = s[i]; //据说这样比push快
      }
       return arr;
  }
}