Explication détaillée des objets de tableau JavaScript et des instances d'arguments-js tutoriel-php.cn

Explication détaillée des objets de tableau JavaScript et des instances d'arguments

巴扎黑

Libérer： 2017-08-16 10:55:50

original

1343 Les gens l'ont consulté

Objet de type tableau

L'objet dit de type tableau :

a un attribut de longueur et plusieurs attributs d'index Objet

Par exemple :

var array = [&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;];
  
var arrayLike = {
    0: &#39;name&#39;,
    1: &#39;age&#39;,
    2: &#39;sex&#39;,
    length: 3
}

Copier après la connexion

Même ainsi, pourquoi est-il appelé un objet de type tableau ?
Regardons ensuite ces deux objets sous trois aspects : la lecture et l'écriture, l'obtention de la longueur et le parcours.

Lire et écrire

console.log(array[0]); // name
console.log(arrayLike[0]); // name
  
array[0] = &#39;new name&#39;;
arrayLike[0] = &#39;new name&#39;;

Copier après la connexion

Longueur

console.log(array.length); // 3
console.log(arrayLike.length); // 3

Copier après la connexion

Traverse

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

Copier après la connexion

Ce n'est pas similaire ?
Ce type d'objet tableau peut-il utiliser des méthodes de tableau ? Par exemple :

arrayLike.push(&#39;4&#39;);

Copier après la connexion

Cependant, le code ci-dessus signalera une erreur : arrayLike.push n'est pas une fonction
C'est donc toujours une classe tableau après tout. Maintenant...

Appelez la méthode tableau

Et si la La méthode de type tableau veut-elle utiliser la méthode tableau de manière arbitraire ?
Comme il ne peut pas être appelé directement, nous pouvons utiliser Function.call pour appeler indirectement :

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
  
Array.prototype.join.call(arrayLike, &#39;&&#39;); // name&age&sex
  
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到类数组转数组
  
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]

Copier après la connexion

Objet de conversion de type tableau

Dans l'exemple ci-dessus, une méthode de conversion d'un tableau en tableau a été mentionnée. Trois autres méthodes sont ajoutées :
.

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

Copier après la connexion

Alors pourquoi parlons-nous d'objets de type tableau ? Et quelles sont les applications des tableaux de classes ?
En parlant d'objets de type tableau, l'objet Arguments est un objet de type tableau. Dans JavaScript côté client, certaines méthodes DOM (document.getElementsByTagName(), etc.) renvoient également des objets de type tableau.

Objet Arguments

Ensuite, nous nous concentrerons sur l'objet Arguments.
L'objet Arguments est uniquement défini dans le corps de la fonction, y compris les paramètres et autres propriétés de la fonction. Dans le corps d'une fonction, arguments fait référence à l'objet Arguments de la fonction.
Par exemple :

function foo(name, age, sex) {
    console.log(arguments);
}
  
foo(&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;)

Copier après la connexion

Le résultat de l'impression est le suivant :
Explication détaillée des objets de tableau JavaScript et des instances d'arguments

Nous pouvons voir qu'en plus de l'attribut index et de l'attribut length du tableau, il existe également un attribut appelé. Ensuite, nous les présenterons un par un.

attribut length

L'attribut length de l'objet Arguments représente la longueur du paramètre réel, par exemple :

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}
  
console.log("形参的长度为：" + foo.length)
  
foo(1)
  
// 形参的长度为：3
// 实参的长度为：1

Copier après la connexion

attribut appelé

L'attribut appelé de l'objet Arguments, à travers lequel la fonction lui-même peut être appelé.
Parlez-moi d'une solution à une question d'entretien de clôture classique utilisant l'appelé :

var data = [];
  
for (var i = 0; i < 3; i++) {
    (data<i> = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}
  
data[0]();
data[1]();
data[2]();
  
// 0
// 1
// 2</i>

Copier après la connexion

Parlons ensuite de quelques points clés de l'objet arguments :

Liaison des arguments et des paramètres correspondants

function foo(name, age, sex, hobbit) {
  
    console.log(name, arguments[0]); // name name
  
    // 改变形参
    name = &#39;new name&#39;;
  
    console.log(name, arguments[0]); // new name new name
  
    // 改变arguments
    arguments[1] = &#39;new age&#39;;
  
    console.log(age, arguments[1]); // new age new age
  
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
  
    sex = &#39;new sex&#39;;
  
    console.log(sex, arguments[2]); // new sex undefined
  
    arguments[3] = &#39;new hobbit&#39;;
  
    console.log(hobbit, arguments[3]); // undefined new hobbit
  
}
  
foo(&#39;name&#39;, &#39;age&#39;)

Copier après la connexion

Les valeurs des paramètres, les paramètres et arguments réels transmis seront partagés. Lorsqu'ils ne seront pas transmis, les valeurs des paramètres et arguments réels seront partagées. ne pas être partagé
De plus, ce qui précède est en mode non strict. S'il est en mode strict, les paramètres et arguments réels ne seront pas partagés.

Passer des paramètres

Passer des paramètres d'une fonction à une autre
// 使用 apply 将 foo 的参数传递给 bar function foo() { bar.apply(this, arguments); } function bar(a, b, c) { console.log(a, b, c); } foo(1, 2, 3)
Copier après la connexion
Puissant ES6

En utilisant l'opérateur ES6..., nous pouvons facilement convertir en tableau.
function func(...arguments) { console.log(arguments); // [1, 2, 3] } func(1, 2, 3);
Copier après la connexion
Applications

Il existe en fait de nombreuses applications pour les arguments , comme suit Dans cette série, qui est la série spéciale JavaScript, nous verrons les arguments dans l'implémentation d'extension de jQuery, le currying de fonctions, la récursivité et d'autres scénarios. Cet article n'entrera pas dans les détails.
Si vous souhaitez résumer ces scénarios, ceux auxquels on peut penser pour le moment incluent :

Paramètres de longueur variable

Currying de fonctions

Appel récursif

surcharge de fonctions ...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!