Introduction aux bases du tableau Javascript_Connaissances de base

Javascript est un langage magique, et ses tableaux sont tout aussi uniques. Nous nous débarrassons des scories, extrayons l’essence et résumons les meilleures pratiques couramment utilisées. S'il y a des erreurs, veuillez les signaler.

Un tableau Javascript est un objet de type tableau qui possède les caractéristiques d'un objet. Lorsque les noms de propriétés sont de petits entiers contigus, un tableau doit être utilisé ; sinon, un objet doit être utilisé.

Source du tableau

Tous les tableaux sont construits à partir de Array. Testons la propriété constructeur.

var arr = [];
arr.constructor === Array; // true
arr.constructor === Array.prototype.constructor; // true

Créer un tableau

//数组字面量方式
var arr1 = [1, 2, 3]; // [1,2,3]

//构造函数方式
var arr2 = new Array();    // [] 空数组
var arr3 = new Array('9');   // ["9"] 一个字符串元素
var arr4 = new Array(9);    // [] 数组长度length为9
var arr5 = new Array([9]);   // [[9]] 相当于二维数组
var arr6 = new Array(1, 2, 3); // [1, 2, 3]
var arr7 = new Array(1, function f(){}, {o : 6}, null,undefined,true);
// 数组可以存储任意混合数据类型

En raison du fonctionnement de arr4, lorsqu'un seul paramètre numérique est transmis au constructeur Array, le constructeur renverra un tableau vide avec l'attribut length défini. Par conséquent, il est recommandé d’utiliser la méthode littérale du tableau, qui est courte et concise.

Détecter si l'objet est un tableau

var arr1 = [1, 2, 3];
typeof(arr1); // object

Il est bien connu que typeof ne détecte pas correctement les types.

arr1 instanceof Array; //true

La méthode instanceof n'a aucun problème dans une page Web. Une fois que d'autres pages Web sont imbriquées, il y aura deux portées globales, et il y aura des problèmes de détection lors des appels mutuels.

Array.isArray(arr1); // true

Array.isArray() est une nouvelle méthode dans ECMAScript5 et ne présente aucun défaut. Le seul problème est que le navigateur IE8 ne le prend pas en charge et que le navigateur IE9 ne le prend pas en charge en mode strict.

Object.prototype.toString.apply(arr1).slice(8, -1); // Array

La dernière méthode est la meilleure façon de détecter le type.

Longueur du tableau

La longueur du tableau est également son attribut. Augmenter la longueur ne provoquera pas d'erreur hors limites.
La valeur de longueur est égale au nom d'attribut entier le plus grand du tableau plus 1.

var arr1 = [];
arr1[9] = 1; // 长度为10，只包含一个元素的数组

Définissez une petite valeur pour supprimer les attributs dont les noms sont supérieurs ou égaux à la longueur.
Si la valeur de longueur est définie sur 0, cela équivaut à effacer le tableau.

var arr2 = [1, 2, 3, 4, 5];
arr2.length = 3; // [1, 2, 3]
arr2.length = 0; // []

Parcours de tableau

Pour parcourir le tableau, n'utilisez pas de boucle for in pour parcourir le tableau, car for in traversera toutes les propriétés de la chaîne prototype, mais nous n'en avons pas besoin d'autant. Il est recommandé d'utiliser la boucle for.

var arr1 = [1, 2, 3];
arr1.test = 9;

//for in 方式
for(var prop in arr1){
  cosole.log(prop, arr1[prop]);
}
// 输出如下
// 0 1
// 1 2
// 2 3
// test 9

//for循环方式
for(var i = 0, len = arr1.length; i < len; i++){
  console.log(arr1[i]);
}
//输出如下
// 1
// 2
// 3

Nous voyons que la méthode for in a une valeur de test supplémentaire, qui peut être éliminée à l'aide de la fonction hasOwnProperty, mais qui sera beaucoup plus lente que la méthode de la boucle for.
La mise en cache de la longueur du tableau est une étape nécessaire, et il y a une surcharge de performances pour chaque accès (les derniers navigateurs ont optimisé cet aspect).

Résumé

Une brève introduction aux connaissances de base d'Array. À ce stade, vous pouvez avoir une compréhension plus complète d'Array. L'article suivant présente la méthode Array.

Bien qu'il y ait de nombreux aspects de Javascript qui ne sont pas faciles à comprendre, au fil d'une longue période d'études, j'en suis lentement tombé amoureux (car je n'ai plus de filles à aimer maintenant).