Comment définir des objets de type tableau en javascript

La méthode de définition d'un objet de type tableau en JavaScript est la suivante : 1. Créez d'abord un objet vide ; 2. Définissez directement l'attribut d'indice numérique pour l'objet 3. Le point clé est de définir l'attribut de longueur et l'attribut d'épissure pour l'objet aux nombres et aux fonctions.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Il existe de nombreux objets de type tableau dans js. Le concept simple est qu'ils ressemblent à des tableaux, mais ne sont pas des tableaux. Ils sont accessibles à l'aide d'indices numériques et il n'y a pas de méthodes de tableau.

Exemples : arguments, NodeList, HTMLCollection, jQuery, etc.

Caractéristiques des objets de type tableau

1 Posséder l'attribut de longueur

var a=document.getElementsByTagName("p");
a.__proto__;// HTMLCollection {} 属于类数组对象a.length;//62

2 Vous pouvez utiliser des indices numériques pour accéder aux objets

a[0];//<p class="aspNetHidden">…</p>

3. les prototypes ne peuvent pas être utilisés Méthodes (telles que slice, pop, etc.)

a.slice;//undefined Error!
a.pop;//undefined Error!

4. L'utilisation de l'instance d'opération n'appartient pas à Array

[] instanceof Array;//true
a instanceof Array;//false

5 Elle peut être convertie en un véritable objet tableau

var arr = Array.prototype.slice.call(a);
arr instanceof Array;//true

PS : Remarque. que certains objets ne peuvent pas être convertis en un véritable objet tableau à l'aide de la méthode slice sous IE8.

Il est recommandé d'utiliser la méthode $.makeArray() fournie par jquery pour convertir des objets de type tableau

6 Habituellement, d'autres attributs personnalisés peuvent être définis

a.item;//function item() { [native code] }

Avantages des objets de type tableau

J'y crois. Il n'est pas nécessaire de trop décrire les avantages. Laissez js et les autres langages back-end avoir le même mode de fonctionnement.

Par exemple, certaines collections de listes en C# sont accessibles à l'aide de l'indice numérique list[0] ou du nom de chaîne list['name'] pour accéder au même objet

Il dispose également de diverses méthodes personnalisées, vous pouvez le voir. un objet si merveilleux en regardant la méthode d'accès élégante de l'objet jquery.

Comment créer manuellement un objet de type tableau

Retour au sujet, comment créer manuellement un objet de type tableau.

1. Créez d'abord un objet vide

var array_like = {};//创建一个空对象

2. Définissez directement les attributs d'indice numérique pour l'objet Ceci n'est absolument pas autorisé dans d'autres langages. Les attributs d'objet ne peuvent pas commencer par des nombres, mais c'est possible en JS, même en utilisant les deux chinois. et le chinois peuvent être utilisés

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

3. Le point clé est de définir l'attribut de longueur et l'attribut d'épissure de l'objet sur des nombres et des fonctions

//关键点
array_like.length = 4;//为对象设置length属性
array_like.splice = [].splice;//同时设置splice属性为一个函数

PS : Définir l'attribut d'épissure consiste en fait à tromper la console du navigateur et à afficher l'apparence de le tableau. Vous pouvez vous référer ici

4. Test

//设定自定义属性
array_like.test0=array_like[0];
array_like.test1=array_like[1];
//直接输出
console.log( array_like );//['test 0','test 1'...]
//类型
console.log( $.type( array_like ) );//"object"
//数字下标访问
console.log( array_like[ 0 ] );//"test 0"
//自定义属性访问
array_like.test0;//"test 0"
//不是数组对象
array_like instanceof Array;//false
//转换为真数组对象
var Arr=Array.prototype.slice.call(array_like);
Arr instanceof Array;//true

5 Tous les codes :

var array_like = {};

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

array_like.length = 4;
array_like.splice = [].splice;

console.log( array_like );
console.log( $.type( array_like ) );
console.log( array_like[ 2 ] );

[Apprentissage recommandé : Tutoriel avancé javascript]

.

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!