Mettre en œuvre Tableau-comme le comportement en JavaScript sans utiliser de Tableau

Maintenant, nous avons ECMAScript 2015 (ECMA-262, 6e Édition; ES6), nous avons des objets proxy, et ils nous permettent de mettre en œuvre les Array comportement dans la langue elle-même, quelque chose le long des lignes de:

function FakeArray() {
const target = {};
Object.defineProperties(target, {
"length": {
value: 0,
writable: true
},
[Symbol.iterator]: {
//http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype-@@iterator
value: () => {
let index = 0;
return {
next: () => ({
done: index === target.length,
value: target[index++]
})
};
}
}
});
const isArrayIndex = function(p) {
/* an array index is a property such that
ToString(ToUint32(p)) === p and ToUint(p) !== 2^32 - 1 */
const uint = p >>> 0;
const s = uint + "";
return p === s && uint !== 0xffffffff;
};
const p = new Proxy(target, {
set: function(target, property, value, receiver) {
//http://www.ecma-international.org/ecma-262/6.0/index.html#sec-array-exotic-objects-defineownproperty-p-desc
if (property === "length") {
//http://www.ecma-international.org/ecma-262/6.0/index.html#sec-arraysetlength
const newLen = value >>> 0;
const numberLen = +value;
if (newLen !== numberLen) {
throw RangeError();
}
const oldLen = target.length;
if (newLen >= oldLen) {
target.length = newLen;
return true;
} else {
//this case gets more complex, so it's left as an exercise to the reader
return false; //should be changed when implemented!
}
} else if (isArrayIndex(property)) {
const oldLenDesc = Object.getOwnPropertyDescriptor(target, "length");
const oldLen = oldLenDesc.value;
const index = property >>> 0;
if (index > oldLen && oldLenDesc.writable === false) {
return false;
}
target[property] = value;
if (index > oldLen) {
target.length = index + 1;
}
return true;
} else {
target.property = value;
return true;
}
}
});
return p;
}

Je ne peux pas garantir que c'est effectivement tout à fait correcte, et il ne gère pas le cas où vous modifiez la longueur plus petite que sa valeur précédente (le comportement, il est un peu complexe pour obtenir le droit; en gros il supprime les propriétés ainsi que les length propriété invariante tient), mais il donne un aperçu général de la façon dont vous pouvez la mettre en œuvre. Il également n'a pas d'imiter le comportement de [[Appel]] et [[Construction]] sur Array, qui est une autre chose que vous ne pouvais pas le faire avant l'ES6—il n'était pas possible d'avoir des divergences de comportement entre les deux dans ES code, mais rien de tout cela est dur.

Il implémente l' length bien de la même manière la spécification définit comme le travail: il intercepte les attributions de propriétés sur l'objet, et qui modifie le length bien si c'est un "index de tableau".

Contrairement à ce que l'on peut faire avec ES5 et les méthodes de lecture, ce qui permet d'obtenir length en temps constant (évidemment, cela dépend toujours de la propriété sous-jacente de l'accès à la machine virtuelle étant constante de temps), et le seul cas dans lequel il fournit des non-constante de temps de la performance n'est pas mis en œuvre le cas lorsque newLen - oldLen propriétés sont supprimés (et la suppression est lente dans la plupart des VMs!).

Oui, vous pouvez sous-classe d'un tableau en une arraylike objet facilement en JavaScript:

var ArrayLike = function() {};
ArrayLike.prototype = [];
ArrayLike.prototype.shuffle = //... and so on ...

Vous pouvez ensuite instancier nouveau tableau des objets similaires à:

var cards = new Arraylike;
cards.push('ace of spades', 'two of spades', 'three of spades', ... 
cards.shuffle();

Malheureusement, cela ne fonctionne pas dans MSIE. Il ne garde pas trace de la length de la propriété. Qui plutôt se dégonfle toute chose.

Le problème plus en détail sur Dean Edwards Comment La Sous-Classe De L'Objet Array JavaScript. Il s'est avéré plus tard que sa solution n'était pas sûr que certains bloqueurs de l'empêcher.

Mise à jour: Il est important de mentionner Juriy "kangax" Zaytsev de absolument épique post sur le sujet. Il couvre à peu près tous les aspects de ce problème.

La réponse est: il n'y a aucun moyen de maintenant. Le tableau comportement est défini par l'ECMA-262 que de se comporter de cette façon, et a des algorithmes pour la façon de traiter avec l'obtention et la configuration de tableau propriétés (et non générique les propriétés de l'objet). Ce peu dismays moi =(.

Si vous êtes inquiet au sujet de la performance avec votre tableau fragmenté (bien que vous ne devriez probablement pas), et elle voulait s'assurer que la structure a été aussi longtemps que les éléments que vous avez donné, vous pourriez faire ceci:

var sup = [];
sup['0'] = 'z3ero';
sup['1'] = 'o3ne';
sup['4'] = 'f3our';        
//sup now contains 3 entries

Encore, il est intéressant de noter que vous ne verrez probablement pas tout gain de performances en faisant cela. Je soupçonne que Javascript déjà poignées de matrices creuses tout à fait bien, je vous remercie beaucoup.

Bien sûr, vous pouvez reproduire presque toute la structure de données en JavaScript, tous les blocs de construction de base sont là. Ce que vous obtiendrez sera plus lent et moins intuitif cependant.

Mais pourquoi ne pas simplement utiliser le push/pop ?