Cet article vous présente la méthode de création et de remplissage de tableaux de longueur arbitraire en JavaScript (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
La meilleure façon de créer un tableau est littéralement :
const arr = [0,0,0];
Mais ce n'est pas une solution à long terme, comme lorsque nous devons créer un grand tableau. Cet article de blog explore ce qu'il faut faire dans cette situation.
Les tableaux sans trous ont tendance à mieux fonctionner
Dans la plupart des langages de programmation, un tableau est une séquence continue de valeurs. En JavaScript, un tableau est un dictionnaire qui mappe les indices aux éléments. Il peut avoir des trous — des index compris entre zéro et la longueur du tableau qui ne sont pas mappés aux éléments (« index manquants »). Par exemple, le Array suivant a un trou à l'index 1 :
> Object.keys(['a',, 'c']) [ '0', '2' ]
Un tableau sans trous est aussi appelé dense ou packed . Les tableaux denses ont tendance à fonctionner mieux car ils peuvent être stockés de manière contiguë (en interne). Une fois qu'un trou se produit, la représentation interne doit changer. Nous avons deux options :
Dictionnaire. La recherche prendra plus de temps et la surcharge de stockage sera plus importante.
Structure de données continue pour marquer les trous. Vérifiez ensuite si la valeur correspondante est un trou, ce qui nécessite également du temps supplémentaire.
Dans les deux cas, si le moteur rencontre un trou, il ne peut pas simplement revenir undefined, il doit parcourir la chaîne de prototypes et rechercher une propriété nommée "hole index", Cela prend plus de temps.
Dans certains moteurs, comme le V8, si vous passez à une structure de données moins performante, le changement sera permanent. Même si tous les trous sont comblés, ils ne reviendront plus.
Pour plus d'informations sur la façon dont V8 représente les tableaux, consultez l'article de Mathias Bynens "Types d'éléments dans V8".
Array Constructeur Si vous souhaitez créer un tableau avec une longueur donnée, une méthode courante consiste à utiliser le constructeur Array :
const LEN = 3; const arr = new Array(LEN); assert.equal(arr.length, LEN); // arr only has holes in it assert.deepEqual(Object.keys(arr), []);
Cette méthode est très pratique, mais elle présente deux inconvénients :
Même si vous remplissez complètement le tableau avec des valeurs plus tard, ce trou fera ce tableau Un peu plus lent.
La valeur par défaut d'un trou n'est généralement pas la "valeur" initiale de l'élément. Une valeur par défaut courante est zéro.
Array après le constructeur .fill() La méthode .fill() modifiera le tableau actuel et le remplira avec la valeur spécifiée. Cela aide à initialiser un tableau après l'avoir créé avec new Array() :
const LEN = 3; const arr = new Array(LEN).fill(0); assert.deepEqual(arr, [0, 0, 0]);
Attention : Si vous passez un objet en argument à un tableau, tous les éléments feront référence au même instance (c'est-à-dire que cet objet n'a pas été cloné plusieurs fois) : .fill()
const LEN = 3;
const obj = {};
const arr = new Array(LEN).fill(obj);
assert.deepEqual(arr, [{}, {}, {}]);
obj.prop = true;
assert.deepEqual(arr,
[ {prop:true}, {prop:true}, {prop:true} ]);) que nous rencontrerons plus tard n'a pas ce problème. Array.from()
.push()
const LEN = 3;
const arr = [];
for (let i=0; i < LEN; i++) {
arr.push(0);
}
assert.deepEqual(arr, [0, 0, 0]);création de tableaux est plus lente car le moteur peut avoir besoin de réallouer de la mémoire contiguë plusieurs fois à mesure que le tableau grandit.
Remplissez un tableau avecundefined Convertissez les itérables et les valeurs de type tableau en Arrays , qui traite les trous comme des éléments Array.from(). Ceci peut être utilisé pour convertir chaque trou en un undefined : undefined
> Array.from({length: 3})
[ undefined, undefined, undefined ] est un objet de type Array de longueur 3 contenant uniquement des trous. Vous pouvez également utiliser {length：3}, mais cela créera généralement un objet plus grand. new Array(3)Ce qui suit ne fonctionne qu'avec des valeurs itérables et a un effet similaire à
: Array.from()
> [...new Array(3)] [ undefined, undefined, undefined ]
crée son résultat via Array.from(), vous obtenez donc toujours un tableau clairsemé . new Array()
Array.from()
pour le mappage. Array.from()
> Array.from({length: 3}, () => 0)
[ 0, 0, 0 ]> Array.from({length: 3}, () => ({}))
[ {}, {}, {} ]> Array.from({length: 3}, (x, i) => i)
[ 0, 1, 2 ]> const START=2, END=5;
> Array.from({length: END-START}, (x, i) => i+START)
[ 2, 3, 4 ], qui videra également Traités comme des éléments .keys() : undefined
> [...new Array(3).keys()] [ 0, 1, 2 ]
Renvoie une séquence itérable. Nous l'étendons et le convertissons en tableau. .keys()
: undefined
new Array(3)→ [ , , ,]
Array.from({length: 2})
→ [undefined, undefined]
[...new Array(2)]
→ [undefined, undefined]
填充任意值：
const a=[]; for (let i=0; i<3; i++) a.push(0);
→ [0, 0, 0]
new Array(3).fill(0)
→ [0, 0, 0]
Array.from({length: 3}, () => ({}))
→ [{}, {}, {}] （唯一对象）
用整数范围填充：
Array.from({length: 3}, (x, i) => i)
→ [0, 1, 2]
const START=2, END=5; Array.from({length: END-START}, (x, i) => i+START)
→ [2, 3, 4]
[...new Array(3).keys()]
→ [0, 1, 2]
我更喜欢下面的方法。我的侧重点是可读性，而不是性能。
你是否需要创建一个空的数组，以后将会完全填充？
new Array(LEN)
你需要创建一个用原始值初始化的数组吗？
new Array(LEN).fill(0)
你需要创建一个用对象初始化的数组吗？
Array.from({length: LEN}, () => ({}))你需要创建一系列整数吗？
Array.from({length: END-START}, (x, i) => i+START)如果你正在处理整数或浮点数的数组，请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞，并且总是用零进行初始化。
对于大多数情况，我不会过分担心性能。即使是带空洞的数组也很快。使代码易于理解更有意义。
另外引擎优化的方式和位置也会发生变化。今天最快的方案可能明天就不是了。
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
