Cara terbaik untuk menyimpan array nilai => dalam JavaScript?

Apa cara terbaik untuk menyimpan a key=>value array dalam javascript, dan bagaimana itu bisa dilewati?

Kunci dari setiap elemen harus berupa tag, seperti {id}atau hanya iddan nilainya harus berupa nilai numerik id.

Itu harus menjadi elemen dari kelas javascript yang ada, atau menjadi variabel global yang dapat dengan mudah dirujuk melalui kelas.

jQuery dapat digunakan.

Itulah objek JavaScript:

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

Anda dapat mengulanginya menggunakan for..inloop :

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

Lihat juga: Bekerja dengan objek (MDN).

Di ECMAScript6 ada juga Map(lihat tabel kompatibilitas browser di sana):

• Objek memiliki prototipe, jadi ada kunci default di peta. Ini bisa dilewati dengan menggunakan map = Object.create (null) sejak ES5, tetapi jarang dilakukan.

• Kunci dari suatu Objek adalah String dan Simbol, di mana mereka dapat menjadi nilai apa pun untuk Peta.

• Anda bisa mendapatkan ukuran Peta dengan mudah sementara Anda harus secara manual melacak ukuran untuk Obyek.

Jika saya mengerti Anda dengan benar:

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

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

Anda bisa menggunakan Peta .

• Struktur data baru diperkenalkan di JavaScript ES6.
• Alternatif untuk Objek JavaScript untuk menyimpan pasangan kunci / nilai.
• Memiliki metode yang berguna untuk iterasi di atas pasangan kunci / nilai.

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 }

Dapatkan nilai Peta menggunakan kunci

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

Dapatkan ukuran Peta

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

Kunci cek ada di Peta

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

Dapatkan kunci

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

Dapatkan nilai

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

Dapatkan elemen Peta

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

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

Cetak pasangan nilai kunci

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

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

Cetak hanya kunci Peta

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

// Output:
// name
// id

Cetak hanya nilai-nilai Peta

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

// Output:
// John
// 11

Dalam javascript array nilai kunci disimpan sebagai objek. Ada hal-hal seperti array dalam javascript, tetapi mereka juga masih dianggap objek, periksa jawaban orang ini - Mengapa saya dapat menambahkan properti bernama ke array seolah-olah itu objek?

Array biasanya terlihat menggunakan sintaks braket persegi, dan objek ("key => value" array) menggunakan sintaks braket keriting, meskipun Anda dapat mengakses dan mengatur properti objek menggunakan sintaks braket persegi seperti yang ditunjukkan Alexey Romanov.

Array dalam javascript biasanya hanya digunakan dengan numerik, kunci yang ditambahkan secara otomatis, tetapi objek javascript dapat menampung pasangan nilai kunci, fungsi, dan bahkan objek lainnya.

Array Sederhana misalnya.

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

});

Keluaran -

0 "Kanada"

1 "Kami"

2 "Prancis"

3 "Italia"

Kita melihat di atas bahwa kita dapat mengulang array numerik menggunakan fungsi jQuery.each dan mengakses info di luar loop menggunakan tanda kurung siku dengan tombol numerik.

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

});

Keluaran -

Nama saya James dan saya seorang programmer 6 ft 1

nama James

programmer pekerjaan

tinggi Obyek {kaki: 6, inci: 1}

Dalam bahasa seperti php ini akan dianggap sebagai array multidimensi dengan pasangan nilai kunci, atau array dalam array. Saya berasumsi karena Anda bertanya tentang cara loop melalui array nilai kunci Anda ingin tahu cara mendapatkan objek (key => array nilai) seperti objek orang di atas, katakanlah, lebih dari satu orang.

Nah, sekarang kita tahu javascript array digunakan biasanya untuk pengindeksan numerik dan objek lebih fleksibel untuk pengindeksan asosiatif, kita akan menggunakannya bersama-sama untuk membuat array objek yang dapat kita lewati, seperti:

Array JSON (array objek) -

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

});

Keluaran -

Nama saya Joshua dan saya adalah CEO 5 kaki 11

Nama saya James dan saya seorang programmer 6 ft 1

Nama saya Peter dan saya seorang desainer 4 ft 10

Nama saya Joshua dan saya adalah CEO 5 kaki 11

Perhatikan bahwa di luar loop saya harus menggunakan sintaks kurung siku dengan kunci numerik karena ini sekarang array objek yang diindeks secara numerik, dan tentu saja di dalam loop kunci numerik tersirat.

Objek di dalam array:

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

Cukup lakukan ini

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

Saya tahu ini sudah terlambat tetapi mungkin bermanfaat bagi mereka yang menginginkan cara lain. Cara lain kunci array => nilai dapat disimpan adalah dengan menggunakan metode array yang disebut peta (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) Anda dapat menggunakan fungsi panah juga

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

    // Arrow Function  

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

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Hari ini kami merilis paket baru kami yang disebut laravel-blade-javascript. Ini memberi Anda arahan Blade javascript untuk mengekspor variabel PHP ke JavaScript. Jadi pada dasarnya ia melakukan hal yang sama dengan paket PHP-Vars-To-Js-Transformer yang populer dari Jeffrey Way tetapi alih-alih mengekspor variabel dalam pengontrol, paket kami yang melihatnya.

Berikut ini adalah contoh cara penggunaannya:

@javascript('key', 'value')

Tampilan yang diberikan akan menampilkan:

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

Jadi di browser Anda sekarang Anda memiliki akses ke variabel kunci:

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

Anda juga dapat menggunakan argumen tunggal:

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

Yang akan menampilkan sama dengan contoh pertama.

Anda juga dapat menggunakan file konfigurasi untuk mengatur ruang nama tempat semua variabel JavaScript yang diekspor berada.