Discussion sur la création et l'utilisation de tableaux en JavaScript

Un tableau est un ensemble de valeurs disposées dans l'ordre. En revanche, les noms de propriétés des objets ne sont pas ordonnés. Essentiellement, les tableaux utilisent des nombres comme clés de recherche, tandis que les objets ont des noms de propriétés définis par l'utilisateur. JavaScript n'a pas de véritable tableau associatif, mais les objets peuvent être utilisés pour implémenter des fonctions associées.

Array() est juste un type spécial d'Object(), c'est-à-dire qu'une instance Array() a essentiellement Instance Object() avec quelques fonctionnalités supplémentaires. Les tableaux peuvent enregistrer tout type de valeurs, qui peuvent être mises à jour ou supprimées à tout moment, et la taille du tableau est ajustée dynamiquement

En plus des objets, le type Array est peut-être le type le plus couramment utilisé en JavaScript. . De plus, les tableaux en JavaScript sont très différents des tableaux de la plupart des autres langages. Cet article présentera le type Array en javascript

Création d'un tableau

Il existe deux manières de créer un tableau : en utilisant la syntaxe littérale et en utilisant le constructeur Array()

【Literal】

Utilisation d'un tableau La quantité littérale est le moyen le plus simple de créer un tableau. Séparez simplement les éléments du tableau par des virgules entre crochets

var empty = []; //没有元素的数组
var primes = [2,3,5,7,11]; //有5个数值的数组

Bien que les tableaux javascript soient différents de ceux de ceux-ci. autres langages Les tableaux sont des listes ordonnées de données, mais contrairement à d'autres langages, chaque élément d'un tableau JavaScript peut enregistrer tout type de données

var misc = [1.1,true, "a"]; //3个不同类型的元素

Les valeurs ​​dans les littéraux de tableau ne doivent pas nécessairement être des constantes, ils peuvent être des expressions arbitraires

var base = 1024;
var table = [base,base+1,base+2,base+3];

Il peut contenir des littéraux d'objet ou d'autres littéraux de tableau Quantité

var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];

Si les éléments du tableau sont encore des tableaux, un tableau multidimensionnel est formé

var a = [[1, 2], [3, 4]];

[Remarque] Lors de l'utilisation d'une représentation littérale numérique, le constructeur de tableau

[Constructeur]

ne sera pas appelé là existe trois façons d'appeler le constructeur

　【1】Sans paramètres, créez un tableau vide

//该方法创建一个没有任何元素的空数组，等同于数组直接量[]
var a = new Array();

　【2】 Oui Un paramètre numérique qui spécifie la longueur du tableau

var a = new Array(10);
console.log(a);//[]
console.log(a[0],a.length);//undefined 10

　[Note] S'il existe un paramètre d'autres types, il sera créé avec celui-ci value Un tableau avec un seul élément

var a = new Array('10');
console.log(a);//['10']
console.log(a[0],a.length);//10 1

[3] Lorsqu'il y a plusieurs paramètres, les paramètres sont représentés comme des éléments spécifiques du tableau

var a = new Array(1,2,3);
console.log(a);//[1,2,3]
console.log(a[0],a[1],a[2]);//1 2 3

Lorsque vous utilisez le constructeur Array(), vous pouvez omettre le nouvel opérateur

var a1 = Array();
var a2 = Array(10);
var a3 = Array(1,2,3);
console.log(a1,a2,a3);//[] [] [1,2,3]

L'essence d'un tableau

Un tableau est un ensemble de valeurs disposées dans l'ordre. Essentiellement, un tableau est un tableau spécial. objet

typeof [1, 2, 3] // "object"

La particularité du tableau est que son nom de clé est un ensemble d'entiers (0, 1, 2...) disposés dans l'ordre . Étant donné que les noms de clé des membres du tableau sont fixes, le tableau n'a pas besoin de spécifier un nom de clé pour chaque élément, mais chaque membre de l'objet doit spécifier un nom de clé

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));// ["0", "1", "2"]
var obj = {
name1: 'a',
name2: 'b',
name3: 'c'
};

Les tableaux sont une forme particulière d'objets. Utiliser des crochets pour accéder aux éléments d'un tableau revient à utiliser des crochets pour accéder aux propriétés d'un objet.

Le langage JavaScript stipule que les noms clés des objets sont toujours des chaînes, donc les clés du tableau Le nom est en fait une chaîne. La raison pour laquelle il peut être lu à l'aide de valeurs numériques est que les noms de clés non-chaînes seront convertis en chaînes puis utilisés comme noms d'attributs

o={}; //创建一个普通的对象
o[1]="one"; //用一个整数来索引它
//数值键名被自动转成字符串
var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'

Cependant, vous devez faire la distinction entre les index de tableau et les noms d'attributs d'objet : tous les index sont des noms d'attributs, mais seuls les noms d'attributs entiers compris entre 0 et 232-2 (4294967294) sont des index

var a = [];
//索引
a['1000'] = 'abc';
a[1000] // 'abc'
//索引
a[1.00] = 6;
a[1] // 6

　[Note] Une seule valeur ne peut pas être utilisée comme identifiant. Par conséquent, les membres du tableau ne peuvent être représentés que par des crochets

var arr = [1, 2, 3];
arr[0];//1
arr.0;//SyntaxError

Vous pouvez utiliser des nombres négatifs ou non entiers pour indexer le tableau. Mais comme il n'est pas compris entre 0 et 2 à la puissance 32 -2, il s'agit uniquement du nom d'attribut du tableau, pas de l'index du tableau. La caractéristique évidente est qu'il ne modifie pas la longueur du tableau. tableau

var a = [1,2,3];
//属性名
a[-1.23]=true;
console.log(a.length);//3
//索引
a[10] = 5;
console.log(a.length);//11
//属性名
a['abc']='testing';
console.log(a.length);//11

Longueur du tableau

Chaque tableau a une longueur attribut, ce qui le différencie des objets JavaScript classiques. Pour les tableaux denses (c'est-à-dire non clairsemés), la valeur de l'attribut length représente le nombre d'éléments dans le tableau et sa valeur est supérieure de 1 au plus grand index du tableau

[].length //=>0:数组没有元素
['a','b','c'].length //=>3:最大的索引为2，length为3

Lorsque le tableau est un tableau clairsemé, la valeur de l'attribut de longueur est supérieure au nombre d'éléments. De même, sa valeur est supérieure de 1 au plus grand index du tableau

<.>

[,,,].length; //3
(Array(10)).length;//10
var a = [1,2,3];
console.log(a.length);//3
delete a[1];
console.log(a.length);//3

La particularité des tableaux se reflète principalement dans le fait que la longueur du tableau peut être ajustée dynamiquement :

[1] Si vous attribuez une valeur à un élément du tableau et l'index i est supérieur ou égal à la longueur du tableau existant, l'attribut length La valeur sera définie sur i+1

var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001

　　【2】设置length属性为小于当前长度的非负整数n时，当前数组索引值大于等于n的元素将从中删除

a=[1,2,3,4,5]; //从5个元素的数组开始
a.length = 3; //现在a为[1,2,3]
a.length = 0; //删除所有的元素。a为[]
a.length = 5; //长度为5，但是没有元素，就像new

　　【3】将数组的length属性值设置为大于其当前的长度。实际上这不会向数组中添加新的元素，它只是在数组尾部创建一个空的区域

var a = ['a'];
a.length = 3;
console.log(a[1]);//undefined
console.log(1 in a);//false

　　如果人为设置length为不合法的值(即0——232-2范围以外的值)，javascript会报错

// 设置负值
[].length = -1// RangeError: Invalid array length
// 数组元素个数大于等于2的32次方
[].length = Math.pow(2,32)// RangeError: Invalid array length
// 设置字符串
[].length = 'abc'// RangeError: Invalid array length

　　由于数组本质上是对象，所以可以为数组添加属性，但是这不影响length属性的值

var a = [];
a['p'] = 'abc';
console.log(a.length);// 0
a[2.1] = 'abc';
console.log(a.length);// 0

数组遍历

　　使用for循环遍历数组元素最常见的方法

var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}

　　当然，也可以使用while循环

var a = [1, 2, 3];
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
var l = a.length;
while (l--) {
console.log(a[l]);
}

　　但如果数组是稀疏数组时，使用for循环，就需要添加一些条件

//跳过不存在的元素
var a = [1,,,2];
for(var i = 0; i < a.length; i++){
if(!(i in a)) continue;
console.log(a[i]);
}

　　还可以使用for/in循环处理稀疏数组。循环每次将一个可枚举的属性名（包括数组索引）赋值给循环变量。不存在的索引将不会遍历到

var a = [1,,,2];
for(var i in a){
console.log(a[i]);
}

　　由于for/in循环能够枚举继承的属性名，如添加到Array.prototype中的方法。由于这个原因，在数组上不应该使用for/in循环，除非使用额外的检测方法来过滤不想要的属性

var a = [1,,,2];
a.b = 'b';
for(var i in a){
console.log(a[i]);//1 2 'b'
} 
//跳过不是非负整数的i
var a = [1,,,2];
a.b = 'b';
for(var i in a){
if(String(Math.floor(Math.abs(Number(i)))) !== i) continue;
console.log(a[i]);//1 2
}

　　javascript规范允许for/in循环以不同的顺序遍历对象的属性。通常数组元素的遍历实现是升序的，但不能保证一定是这样的。特别地，如果数组同时拥有对象属性和数组元素，返回的属性名很可能是按照创建的顺序而非数值的大小顺序。如果算法依赖于遍历的顺序，那么最好不要使用for/in而用常规的for循环

　　有三个常见的类数组对象：

　　【1】arguments对象

// arguments对象
function args() { return arguments }
var arrayLike = args('a', 'b');
arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

　　【2】DOM方法(如document.getElementsByTagName()方法)返回的对象

// DOM元素
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

　　【3】字符串

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

　　[注意]字符串是不可变值，故当把它们作为数组看待时，它们是只读的。如push()、sort()、reverse()、splice()等数组方法会修改数组，它们在字符串上是无效的，且会报错

var str = 'abc';
Array.prototype.forEach.call(str, function(chr) {
console.log(chr);//a b c
});
Array.prototype.splice.call(str,1);
console.log(str);//TypeError: Cannot delete property '2' of [object String]

　　数组的slice方法将类数组对象变成真正的数组

var arr = Array.prototype.slice.call(arrayLike);

　　javascript数组方法是特意定义为通用的，因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。在ECMAScript5中，所有的数组方法都是通用的。在ECMAScript3中，除了toString()和toLocaleString()以外的所有方法也是通用的

var a = {'0':'a','1':'b','2':'c',length:3};
Array.prototype.join.call(a,'+');//'a+b+c'
Array.prototype.slice.call(a,0);//['a','b','c']
Array.prototype.map.call(a,function(x){return x.toUpperCase();});//['A','B','C']

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!