Najlepszy sposób na przechowanie tablicy JavaScript => wartości w JavaScript?

Jaki jest najlepszy sposób przechowywania key=>valuetablicy w javascript i jak można ją zapętlić?

Kluczem każdego elementu powinien być tag, taki jak {id}lub just, ida wartość powinna być wartością liczbową id.

Powinien to być element istniejącej klasy javascript lub zmienna globalna, do której można łatwo odwoływać się za pośrednictwem klasy.

Można użyć jQuery.

Właśnie tym jest obiekt JavaScript:

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

Możesz przejść przez nią za pomocą for..inpętli :

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

Zobacz także: Praca z obiektami (MDN).

W ECMAScript6 znajduje się również Map(patrz tam tabela kompatybilności przeglądarki):

• Obiekt ma prototyp, więc na mapie są domyślne klucze. Można to obejść, używając map = Object.create (null) od ES5, ale rzadko było to wykonywane.

• Kluczami obiektu są ciągi znaków i symbole, gdzie mogą mieć dowolną wartość dla mapy.

• Możesz łatwo uzyskać rozmiar mapy, podczas gdy musisz ręcznie śledzić rozmiar obiektu.

Jeśli dobrze cię zrozumiałem:

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;

var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

Możesz użyć mapy .

• Nowa struktura danych wprowadzona w JavaScript ES6.
• Alternatywa dla obiektu JavaScript do przechowywania par klucz / wartość.
• Ma przydatne metody iteracji par klucz / wartość.

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 }

Uzyskaj wartość mapy za pomocą klucza

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

Uzyskaj rozmiar mapy

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

Sprawdź klucz istnieje na mapie

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

Zdobądź klucze

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

Uzyskaj wartości

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

Uzyskaj elementy mapy

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

Wydrukuj pary klucz-wartość

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

Wydrukuj tylko klucze mapy

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

Wydrukuj tylko wartości mapy

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11

W javascript tablica wartości klucza jest przechowywana jako obiekt. Istnieją pewne rzeczy, takie jak tablice w javascript, ale nadal są one w pewnym stopniu uważane za obiekty, sprawdź odpowiedzi chłopaków - Dlaczego mogę dodawać nazwane właściwości do tablicy tak, jakby to był obiekt?

Tablice są zwykle widziane przy użyciu składni nawiasów kwadratowych, a obiekty (tablice „key => value”) przy użyciu składni nawiasów klamrowych, chociaż można uzyskać dostęp do właściwości obiektów i ustawiać je przy użyciu składni nawiasów kwadratowych, jak pokazał Aleksiej Romanow.

Tablice w javascript są zwykle używane tylko z numerycznymi, automatycznie zwiększanymi klawiszami, ale obiekty javascript mogą przechowywać nazwane pary wartości kluczy, funkcje, a nawet inne obiekty.

Simple Array np.

$(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);
    });

});

Wynik -

0 „Kanada”

1 „My”

2 „Francja”

3 „Włochy”

Widzimy powyżej, że możemy zapętlić tablicę numeryczną za pomocą funkcji jQuery.each i uzyskać dostęp do informacji poza pętlą za pomocą nawiasów kwadratowych z klawiszami numerycznymi.

Prosty obiekt (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);
    });

});

Wynik -

Nazywam się James i jestem programistą o długości 6 stóp 1

nazwać Jamesa

programista zawodu

wysokość Obiekt {stopy: 6, cale: 1}

W języku takim jak php byłoby to uważane za tablicę wielowymiarową z parami wartości klucza lub tablicę w tablicy. Zakładam, że ponieważ pytałeś o sposób przechodzenia przez tablicę wartości klucza, chciałbyś wiedzieć, jak uzyskać obiekt (klucz => tablica wartości) taki jak obiekt osoby powyżej, aby mieć, powiedzmy, więcej niż jedną osobę.

Cóż, teraz, gdy wiemy, że tablice javascript są zwykle używane do indeksowania numerycznego, a obiekty bardziej elastycznie do indeksowania asocjacyjnego, użyjemy ich razem, aby utworzyć tablicę obiektów, które możemy zapętlać, tak jak to -

Tablica JSON (tablica obiektów) -

$(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");
    });

});

Wynik -

Nazywam się Joshua i jestem CEO 5 stóp

Nazywam się James i jestem programistą o długości 6 stóp 1

Nazywam się Peter i jestem projektantem 4 stóp 10

Nazywam się Joshua i jestem CEO 5 stóp

Zauważ, że poza pętlą muszę użyć składni nawiasu kwadratowego z kluczem numerycznym, ponieważ jest to teraz tablica obiektów indeksowana numerycznie, i oczywiście wewnątrz pętli sugerowany jest klucz numeryczny.

Obiekty w tablicy:

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

Po prostu zrób to

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

Wiem, że jest późno, ale może być pomocny dla tych, którzy chcą innych sposobów. Innym sposobem przechowywania wartości klucza => jest użycie metody tablicowej o nazwie map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) możesz również użyć funkcji strzałki

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Dzisiaj wydaliśmy nasz nowy pakiet o nazwie laravel-blade-javascript. Zapewnia Ci javascriptową dyrektywę Blade do eksportowania zmiennych PHP do JavaScript. Tak więc zasadniczo robi to samo, co popularny pakiet Jeff-Way-PHP-Vars-To-Js-Transformer, ale zamiast eksportować zmienne w kontrolerze, nasz pakiet robi to w widoku.

Oto przykład, w jaki sposób można go użyć:

@javascript('key', 'value')

Renderowany widok wyświetli:

<script type="text/javascript">window['key'] = 'value';</script>

W przeglądarce masz teraz dostęp do kluczowej zmiennej:

console.log(key); //outputs "value"

Możesz także użyć jednego argumentu:

@javascript(['key' => 'value'])

Co da wynik taki sam jak w pierwszym przykładzie.

Możesz także użyć pliku konfiguracyjnego, aby skonfigurować przestrzeń nazw, w której powinny się znajdować wszystkie eksportowane zmienne JavaScript.