Mana yang lebih cepat peta atau objek javascript?

Objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 menyimpan data dalam key-value pair yang mirip dengan objek biasa di JavaScript. Tidak seperti objek JavaScript,

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

_9 menyediakan beberapa metode utilitas untuk memanipulasi data dan lainnya

Table of Contents Show

Metode utilitas dan properti
Metode set()
Metode get()
metode has()
Metode hapus()
Metode clear()
Properti ukuran
Perbedaan utama antara Peta dan Objek
Jenis data kunci
Urutan kunci
Menemukan ukuran data yang disimpan
Mengulangi data
Pertunjukan
Mengubah objek menjadi Peta dan Peta menjadi objek
Apakah peta lebih baik daripada objek JS?
Apakah Peta JavaScript lambat?
Mana yang lebih cepat peta atau untuk loop JavaScript?
Apakah array atau objek lebih cepat dalam JavaScript?

const map = new Map();
map.set('x', 5);
map.set('y', 10);
console.log(map); 
// Map(2) {'x' => 5, 'y' => 10}
console.log(map.get('x')); // 5

Kita dapat melewatkan Array pasangan nilai kunci 2D di konstruktor

map.set(key, value);

1 untuk membuat

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 dengan data awal

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Metode utilitas dan properti

Objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 menyediakan beberapa metode pembantu untuk menambah/menghapus data, mendapatkan data, memeriksa apakah ada kunci, dan banyak lagi. Ayo temukan semuanya

Metode set()

Metode ini menambahkan entri data baru dengan kunci dan nilai yang disediakan. Jika kunci sudah ada, maka itu hanya memperbarui nilainya. Ini mengembalikan objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

_9 yang diperbarui. Sintaksnya adalah

map.set(key, value);

Di sini

map.set(key, value);

_5 dapat berupa tipe data apa pun, termasuk objek, array, fungsi, dll. Demikian pula,

map.set(key, value);

_6 juga dapat berupa tipe data apa pun

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

Karena

map.set(key, value);

_7 mengembalikan objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 yang diperbarui, kita juga dapat menggabungkan beberapa panggilan

map.set(key, value);

7 secara bersamaan

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

Metode get()

Metode ini mengembalikan nilai terkait dari kunci yang disediakan. Jika kuncinya tidak ada, maka ia mengembalikan

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

const map = new Map();
map.set('x', 10);
map.set('y', 20);
console.log(map.get('x')); // 10
console.log(map.get('abc')); // undefined

metode has()

Metode ini mengembalikan

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

1 jika kunci yang disediakan ada di objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9, jika tidak mengembalikan

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

const map = new Map();
map.set('name', 'Amitav Mishra');
console.log(map.has('name')); // true
console.log(map.has('address')); // false

Metode hapus()

Metode ini menghapus kunci yang disediakan dan nilai terkaitnya dari objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9. Mengembalikan

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

_1 jika kunci yang disediakan ditemukan dan dihapus, jika tidak mengembalikan

const fn = function() {};
const ob = { x: 20 };

const map = new Map();
map.set('x', 5);
map.set(10, { a: 10 });
map.set(fn, 'some function');
map.set(ob, 'some object');
map.set(NaN, null);

const map = new Map();
map.set('name', 'Amitav Mishra');
console.log(map.delete('name')); // true
console.log(map.get('name')); // undefined
console.log(map.delete('address')); // false

Metode clear()

Metode ini menghapus semua data dari objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

const map = new Map();
map.set('x', 5);
map.set('y', 10);
map.set('z', 15);
map.clear();
console.log(map); // Map(0) {size: 0}

Properti ukuran

Properti ini mengembalikan jumlah data yang disimpan di objek

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

const map = new Map();
map.set('x', 5);
map.set('y', 10);
map.set('z', 15);
console.log(map.size); // 3

Perbedaan utama antara Peta dan Objek

Ada beberapa perbedaan yang membuat Maps lebih baik dari objek biasa

Jenis data kunci

Di objek, kita dapat menyimpan kunci hanya dengan tipe String dan Simbol, sedangkan di

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9, kita dapat menyimpan kunci dari semua tipe data, termasuk objek, array, fungsi, dll.

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Urutan kunci

Urutan kunci dalam objek tidak selalu dapat dijamin sama dengan urutan yang mereka masukkan, sedangkan

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 selalu mempertahankan urutan kunci yang benar. Mari kita lihat beberapa contoh untuk memahami lebih baik

Objek umumnya mempertahankan urutan kunci dengan benar. Lihat contoh di bawah ini

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Namun, saat kita memasukkan nilai numerik sebagai kunci ke objek, tombol numerik muncul lebih awal (dengan cara diurutkan) daripada kunci bernilai string lainnya. Kami juga dapat menguji ini dengan

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

_1 loop, dan mereka akan muncul dalam urutan yang sama

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9, urutan kunci selalu sama dengan urutan yang dimasukkan

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Kami juga dapat menggunakan

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

_3 loop untuk menguji ini, dan kami akan mendapatkan kunci dalam urutan yang sama

Menemukan ukuran data yang disimpan

Di objek, untuk mengetahui jumlah total data pasangan kunci-nilai yang disimpan, pertama, kita perlu mendapatkan semua kunci lalu menghitung panjangnya, sedangkan, di

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9, kita memiliki

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

5 properti untuk menemukan yang sama

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Mengulangi data

Objek tidak dapat diubah, sedangkan

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 dapat diubah. Oleh karena itu, kami tidak dapat menggunakan

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

_3 loop,

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

8, spread operator, dll. , dengan objek, tetapi kita dapat menggunakannya dengan

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Untuk mengulangi data objek, kita harus menggunakan

const map = new Map();
map.set('x', 10).set('y', 20).set('z', 30);
console.log(map);
// Map(3) {'x' => 10, 'y' => 20, 'z' => 30}

1 loop atau menggunakan

const map = new Map();
map.set('x', 10);
map.set('y', 20);
console.log(map.get('x')); // 10
console.log(map.get('abc')); // undefined

const map = new Map();
map.set('x', 10);
map.set('y', 20);
console.log(map.get('x')); // 10
console.log(map.get('abc')); // undefined

2 dll. dan kemudian ulangi hasilnya

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Pertunjukan

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 memiliki kinerja yang lebih baik daripada objek dalam hal penambahan dan penghapusan data. Mari kita lakukan beberapa tes kinerja untuk mengetahui hal yang sama

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Di sini konsol akan mencetak waktu yang dibutuhkan untuk menjalankan tugas. Kita dapat melihat bahwa objek membutuhkan waktu lebih dari

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 untuk melakukan tugas yang sama

Jika Anda mencoba kode di atas, Anda mungkin melihat waktu kinerja yang berbeda dari kode di atas, tetapi Anda pasti akan melihat bahwa
const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}
9 dieksekusi lebih cepat

Mengubah objek menjadi Peta dan Peta menjadi objek

Untuk mengonversi objek menjadi

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

_9, pertama, kita perlu membuat larik pasangan nilai kunci 2D lalu membuat

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

9 darinya

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Demikian pula, untuk mengonversi

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

_9 menjadi objek, pertama-tama, kita dapat membuat larik pasangan nilai kunci 2D lalu membuat objek darinya

const map = new Map([['x', 5], ['y', 10]]);
console.log(map); // Map(2) {'x' => 5, 'y' => 10}

Sekarang, Anda harus memiliki pemahaman yang baik tentang cara kerja Map dan kapan performanya lebih baik daripada objek biasa. Jadi, lain kali pertimbangkan semua faktor sebelum memilih antara Map atau Object

Apakah peta lebih baik daripada objek JS?

Sebuah objek berperilaku seperti kamus karena JavaScript diketik secara dinamis, memungkinkan Anda menambah atau menghapus properti kapan saja. Tapi Map() jauh lebih baik karena itu. Menyediakan metode get , set , has , dan delete. Menerima semua jenis kunci, bukan hanya string.

Apakah Peta JavaScript lambat?

map() melakukan beberapa logika tambahan yang memperlambatnya secara signifikan dibandingkan dengan for loop mentah .

Mana yang lebih cepat peta atau untuk loop JavaScript?

Anda dapat melihat bahwa for loop 3 kali lebih cepat daripada metode array seperti forEach map dan reduce . Setelah menerima elemen array, metode array menjalankan fungsi callback untuk setiap elemen.

Apakah array atau objek lebih cepat dalam JavaScript?

Itu juga tergantung pada ukuran data Anda. Umumnya lebih cepat menggunakan pasangan nilai kunci objek saat Anda memiliki data dalam jumlah besar. Untuk dataset kecil, array bisa lebih cepat