Beste manier om een key=>value-array in JavaScript op te slaan?

Wat is de beste manier om een key=>valuearray op te slaan in javascript, en hoe kan dat worden doorgelust?

De sleutel van elk element moet een tag zijn, zoals {id}of gewoon iden de waarde moet de numerieke waarde van de id zijn.

Het moet ofwel het element zijn van een bestaande javascript-klasse, of een globale variabele zijn waarnaar gemakkelijk via de klasse kan worden verwezen.

jQuery kan worden gebruikt.


Antwoord 1, autoriteit 100%

Dat is precies wat een JavaScript-object is:

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

Je kunt er doorheen bladeren met for..inloop:

for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

Zie ook: Werken met objecten(MDN ).

In ECMAScript6 is er ook Map(zie de browsercompatibiliteitstabel daar):

  • Een object heeft een prototype, dus er zijn standaardsleutels op de kaart. Dit kan worden omzeild door map = Object.create(null) te gebruiken sinds ES5, maar werd zelden gedaan.

  • De sleutels van een object zijn tekenreeksen en symbolen, waar ze elke waarde voor een kaart kunnen zijn.

  • Je kunt gemakkelijk de grootte van een kaart bepalen, terwijl je de grootte van een object handmatig moet bijhouden.


Antwoord 2, autoriteit 23%

Als ik je goed heb begrepen:

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;
var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

Antwoord 3, autoriteit 10%

U kunt Map.

  • Een nieuwe datastructuur geïntroduceerd in JavaScript ES6.
  • Alternatief voor JavaScript-object voor het opslaan van sleutel/waarde-paren.
  • Heeft handige methoden voor iteratie over de sleutel/waarde-paren.
var map = new Map();
map.set('name', 'John');
map.set('id', 11);
// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

Krijg de waarde van de kaart met de toets

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

De grootte van de kaart opvragen

console.log(map.size); // 2

Controleer of de sleutel aanwezig is in de kaart

console.log(map.has('name')); // true
console.log(map.has('age')); // false

Sleutels ophalen

console.log(map.keys()); // MapIterator { 'name', 'id' }

Waarden ophalen

console.log(map.values()); // MapIterator { 'John', 11 }

Elementen van de kaart ophalen

for (let element of map) {
  console.log(element);
}
// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

Sleutelwaardeparen afdrukken

for (let [key, value] of map) {
  console.log(key + " - " + value);
}
// Output: 
// name - John
// id - 11

Alleen sleutels van de kaart afdrukken

for (let key of map.keys()) {
  console.log(key);
}
// Output:
// name
// id

Alleen waarden van de kaart afdrukken

for (let value of map.values()) {
  console.log(value);
}
// Output:
// John
// 11

Antwoord 4, autoriteit 3%

In javascript wordt een sleutelwaarde-array opgeslagen als een object. Er zijn dingen als arrays in javascript, maar ze worden nog steeds enigszins als objecten beschouwd, kijk eens naar dit antwoord – Waarom kan ik benoemde eigenschappen aan een array toevoegen alsof het een object is?

Arrays worden meestal gezien met de syntaxis van vierkante haken, en objecten (‘key=>value’-arrays) met de syntaxis van accolades, hoewel u objecteigenschappen kunt openen en instellen met de syntaxis van vierkante haken, zoals Alexey Romanov heeft laten zien.

>

Arrays in javascript worden doorgaans alleen gebruikt met numerieke, automatisch oplopende sleutels, maar javascript-objecten kunnen ook benoemde sleutelwaardeparen, functies en zelfs andere objecten bevatten.

Eenvoudige matrix bijv.

$(document).ready(function(){
    var countries = ['Canada','Us','France','Italy'];
    console.log('I am from '+countries[0]);
    $.each(countries, function(key, value) {
        console.log(key, value);
    });
});

Uitvoer –

0 “Canada”

1 “Ons”

2 “Frankrijk”

3 “Italië”

We zien hierboven dat we een numerieke array kunnen herhalen met behulp van de jQuery.each-functie en toegang kunnen krijgen tot informatie buiten de lus met vierkante haken met numerieke toetsen.

Eenvoudig object (json)

$(document).ready(function(){
    var person = {
        name: "James",
        occupation: "programmer",
        height: {
            feet: 6,
            inches: 1
        },
    }
    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation);
    $.each(person, function(key, value) {
        console.log(key, value);
    });
});

Uitvoer –

Mijn naam is James en ik ben een 1,80 meter lange programmeur

naam James

beroepsprogrammeur

hoogte Object {feet: 6, inches: 1}

In een taal als php zou dit worden beschouwd als een multidimensionale array met sleutelwaardeparen, of een array binnen een array. Ik neem aan dat, omdat je vroeg hoe je door een sleutelwaarde-array kunt lopen, je zou willen weten hoe je een object (key=>value-array) zoals het persoonsobject hierboven kunt krijgen om, laten we zeggen, meer dan één persoon te hebben.

Nu we weten dat javascript-arrays meestal worden gebruikt voor numerieke indexering en objecten flexibeler voor associatieve indexering, zullen we ze samen gebruiken om een reeks objecten te maken waar we doorheen kunnen lopen, zoals zo –

JSON-array (array van objecten) –

$(document).ready(function(){
    var people = [
        {
            name: "James",
            occupation: "programmer",
            height: {
                feet: 6,
                inches: 1
            }
        }, {
            name: "Peter",
            occupation: "designer",
            height: {
                feet: 4,
                inches: 10
            }
        }, {
            name: "Joshua",
            occupation: "CEO",
            height: {
                feet: 5,
                inches: 11
            }
        }
    ];
    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n");
    $.each(people, function(key, person) {
        console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n");
    });
});

Uitvoer –

Mijn naam is Joshua en ik ben een 5 ft 11 CEO

Mijn naam is James en ik ben een 1,80 meter lange programmeur

Mijn naam is Peter en ik ben een ontwerper van 4 ft 10

Mijn naam is Joshua en ik ben een 5 ft 11 CEO

Merk op dat ik buiten de lus de syntaxis van vierkante haakjes moet gebruiken met een numerieke sleutel, omdat dit nu een numeriek geïndexeerde reeks objecten is, en natuurlijk wordt binnen de lus de numerieke sleutel geïmpliceerd.


Antwoord 5

Doe dit gewoon

var key = "keyOne";
var obj = {};
obj[key] = someValue;

Antwoord 6

Objecten binnen een array:

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

Antwoord 7

Ik weet dat het laat is, maar het kan nuttig zijn voor degenen die andere manieren willen. Een andere manier waarop array key=>values kunnen worden opgeslagen is door gebruik te maken van een array-methode genaamd map(); (https://developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) je kunt ook de pijlfunctie gebruiken


    var countries = ['Canada','Us','France','Italy'];  
    // Arrow Function  
    countries.map((value, key) => key+ ' : ' + value );  
    // Anonomous Function  
    countries.map(function(value, key){  
         return key + " : " + value;  
    });  
    

Other episodes