web-dev-qa-db-fra.com

Comment obtenir des clés de tableau en Javascript?

J'ai un tableau créé avec ce code:

var widthRange = new Array();
widthRange[46] = { min:0,  max:52 };
widthRange[66] = { min:52, max:70 };
widthRange[90] = { min:70, max:94 };

Je veux obtenir chacune des valeurs 46, 66, 90 dans une boucle. J'ai essayé for (var key in widthRange) mais cela me donne un tas de propriétés supplémentaires (je suppose que ce sont des fonctions sur l'objet). Je ne peux pas utiliser une boucle for régulière car les valeurs ne sont pas séquentielles.

javascriptarrayskey
72
DisgruntledGoat

Vous devez appeler la fonction hasOwnProperty pour vérifier si la propriété est réellement définie sur l'objet lui-même (par opposition à son prototype), comme suit:

for (var key in widthRange) {
    if (key === 'length' || !widthRange.hasOwnProperty(key)) continue;
    var value = widthRange[key];
}

Notez que vous avez besoin d’un contrôle séparé pour length.
Cependant, vous ne devriez pas utiliser de tableau ici; vous devriez utiliser un objet régulier. Tous les objets Javascript fonctionnent comme des tableaux associatifs.

Par exemple:

var widthRange = { };  //Or new Object()
widthRange[46] = { sel:46, min:0,  max:52 };
widthRange[66] = { sel:66, min:52, max:70 };
widthRange[90] = { sel:90, min:70, max:94 };
94
SLaks

Les clés stringifiées peuvent être interrogées avec Object.keys(array) .

71
thSoft

Si vous effectuez tout type de manipulation ou d'inspection de matrice/collection, je vous recommande vivement d'utiliser nderscore.js . C'est petit, bien testé et vous permettra d'économiser des jours/semaines/années de maux de tête javascript. Voici sa fonction des touches:

Touches

Récupère tous les noms des propriétés de l'objet.

_.keys({one : 1, two : 2, three : 3});
=> ["one", "two", "three"]
17
Mike McKay
for (var i = 0; i < widthRange.length; ++i) {
  if (widthRange[i] != null) {
    // do something
  }
}

Vous ne pouvez pas vraiment obtenir les clés que vous avez définies car ce n'est pas ainsi que fonctionne un tableau. Une fois que vous avez défini l'élément 46, vous avez également les éléments 0 à 45 également (même s'ils sont nuls).

Vous pouvez toujours avoir deux tableaux:

var widthRange = [], widths = [], newVal = function(n) {
  widths.Push(n);
  return n;
};
widthRange[newVal(26)] = { whatever: "hello there" };

for (var i = 0; i < widths.length; ++i) {
  doSomething(widthRange[widths[i]]);
}

edit eh bien il se peut que je sois tout mouillé ici ...

3
Pointy

Supposons que votre tableau ressemble à arr = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }, { a: 7, b: 8, c: 9 } ] (ou éventuellement d'autres clés) que vous pourriez faire

arr.map((o) => {
    return Object.keys(o)
}).reduce((prev, curr) => {
    return prev.concat(curr)
}).filter((col, i, array) => {
    return array.indexOf(col) === i
});

["a", "b", "c"]

2
Morten
widthRange.map(function(_, i) { return i });

ou

widthRange.map((_, i) => i);
2
alexndreazevedo

Je pense que vous devriez utiliser un objet ({}) et non un tableau ([]) pour ça.

Un ensemble de données est associé à chaque clé. Il crie pour utiliser un objet. Faire:

var obj = {};
obj[46] = { sel:46, min:0,  max:52 };
obj[666] = { whatever:true };

// This is what for..in is for
for (var prop in obj) {
  console.log(obj[prop]);
}

Peut-être que certains utilitaires comme celui-ci peuvent aider:

window.WidthRange = (function () {
  var obj = {};
  return {
    getObj: function () {return obj;}
    , add: function (key, data) {
        obj[key] = data;
        return this; // enabling chaining
      }
  }
})();

// Usage (using chaining calls):
WidthRange.add(66, {foo: true})
.add(67, {bar: false})
.add(69, {baz: 'maybe', bork:'absolutely'});

var obj = WidthRange.getObj();
for (var prop in obj) {
  console.log(obj[prop]);
}
1
npup

Votre exemple original fonctionne très bien pour moi:

<html>
<head>
</head>
<body>
<script>
var widthRange = new Array();
widthRange[46] = { sel:46, min:0,  max:52 };
widthRange[66] = { sel:66, min:52, max:70 };
widthRange[90] = { sel:90, min:70, max:94 };

var i = 1;
for (var key in widthRange)
{
    document.write("Key #" + i + " = " + key + "; &nbsp;&nbsp;&nbsp; min/max = " + widthRange[key].min + "/" + widthRange[key].max + "<br />");
    i++;
}
</script>
</html>

Résultats dans le navigateur (Firefox 3.6.2 sur Windows XP):

Key #1 = 46;     min/max = 0/52
Key #2 = 66;     min/max = 52/70
Key #3 = 90;     min/max = 70/94
1
Andy Shellam

J'ai écrit une fonction qui fonctionne bien avec chaque instance d'objets (les tableaux sont ceux).

Object.prototype.toArray = function()
{
    if(!this)
    {
      return null;
    }

    var c = [];

    for (var key in this) 
    {
        if ( ( this instanceof Array && this.constructor === Array && key === 'length' ) || !this.hasOwnProperty(key) ) 
        {
            continue;
        }

        c.Push(this[key]);
    }

    return c;
};

Usage:

var a   = [ 1, 2, 3 ];
a[11]   = 4;
a["js"] = 5;

console.log(a.toArray());

var b = { one: 1, two: 2, three: 3, f: function() { return 4; }, five: 5 };
b[7] = 7;

console.log(b.toArray());

Sortie:

> [ 1, 2, 3, 4, 5 ]
> [ 7, 1, 2, 3, function () { return 4; }, 5 ]

Cela peut être utile pour n'importe qui.

0
schwarzkopfb

... ????

Sinon, si vous avez une liste d'éléments que vous souhaitez utiliser ...

var range = [46, 66, 90]
    , widthRange=[]
    , write=[];

    widthRange[46] = { min:0, max:52 }; 
    widthRange[66] = { min:52, max:70 }; 
    widthRange[90] = { min:70, max:94 }; 

for(var x=0; x<range.length; x++){var key, wr;

    key = range[x];

    wr = widthRange[key] || false;

    if(wr===false){continue;}

    write.Push(['key: #',key, ', min: ', wr.min, 'max:', wr.max].join(''));

    }
0
Yann Carter

Semble travailler.

var widthRange = new Array();
widthRange[46] = { sel:46, min:0,  max:52 };
widthRange[66] = { sel:66, min:52, max:70 };
widthRange[90] = { sel:90, min:70, max:94 };

for (var key in widthRange)
{
    document.write(widthRange[key].sel + "<br />");
    document.write(widthRange[key].min + "<br />");
    document.write(widthRange[key].max + "<br />");
}
0
Michael D. Irizarry