Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Adakah peta es6 jenis rujukan?

Adakah peta es6 jenis rujukan?

青灯夜游
Lepaskan: 2023-01-11 16:59:00
asal
1596 orang telah melayarinya

Peta ialah jenis rujukan; peta (set) ialah jenis data rujukan baharu dalam es6, yang mewakili hubungan pemetaan data. Data dalam jenis data koleksi peta disimpan dalam cara "kunci/nilai" Anda boleh menggunakan sifat objek sebagai kunci dan menggunakan sifat untuk merujuk nilai peta boleh dibuat menggunakan yang baru, contohnya "const myMap = new Map();" .

Adakah peta es6 jenis rujukan?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Peta ialah jenis rujukan.

peta es6

Sebelum ES6, untuk melaksanakan 'kunci' =>'nilai' dalam JavaScript, yang sering kita panggil pasangan nilai kunci, adalah untuk gunakan Objek untuk melengkapkan. Walau bagaimanapun, kaedah pelaksanaan ini mempunyai masalah dalam senario khas ES6 telah memperkenalkan jenis koleksi baharu yang dipanggil Map, yang membawa mekanisme penyimpanan pasangan nilai kunci sebenar kepada bahasa.

Peta (koleksi) ialah jenis data rujukan baharu dalam es6, yang mewakili hubungan pemetaan data dalam jenis data koleksi peta disimpan dalam cara "kunci/nilai", dan sifat-sifat objek boleh digunakan Sebagai kunci, gunakan sifat untuk merujuk nilai.

1-1 Cipta Peta

Gunakan kata kunci new untuk membuat seketika peta

let m = new Map();

console.log(m);
// Map(0) {}
Salin selepas log masuk

Dimulakan apabila dibuat:
Lulus dalam parameter tatasusunan dua dimensi (objek boleh lelar, nilai kunci dihantar sebagai tatasusunan secara dalaman)
Untuk setiap subtatasusunan, elemen pertama adalah peta yang sepadan key, elemen kedua ialah peta yang sepadan value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }
Salin selepas log masuk

1-2 Peta Api

1-2-1 Tambah elemen pemetaan

Tambahkannya melalui kaedah set(), masukkan dua parameter, yang pertama ialah kunci pemetaan , dan Dua nilai dihantar ke peta. Apa yang dikembalikan ialah set pemetaan (bermaksud ia boleh ditambah dalam rantai)

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }
Salin selepas log masuk

Nilai kunci berantai

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }
Salin selepas log masuk

1-2 - 2 Memetakan panjang koleksi

Gunakan atribut size untuk mendapatkan bilangan semasa elemen koleksi

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);
Salin selepas log masuk

1-2 -3 Dapatkan elemen

Dapatkan elemen melalui kaedah get() dan masukkan kunci sasaran

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false
Salin selepas log masuk

1- 2-4 Padam elemen

Padamkan elemen dalam koleksi yang dipetakan melalui kaedah delete(), mengembalikan nilai Boolean kejayaan atau kegagalan pemadaman

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2
Salin selepas log masuk

1- 2-5 Kesan sama ada unsur wujud

Gunakan kaedah has() untuk mengesan sama ada unsur sasaran wujud dan kembalikan nilai Boolean hasil pengesanan

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true
Salin selepas log masuk

1-2-6 Kaedah elemen jelas

Gunakan kaedah clear() untuk mengosongkan semua elemen dan mengembalikan nilai Boolean yang menunjukkan pembersihan yang berjaya

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}
Salin selepas log masuk

1-3 Urutan dan Lelaran

peta boleh mengulang elemen mengikut susunan sisipan
Contoh peta akan menyediakan (iterator). Ia boleh menjana bentuk [kunci dalam susunan sisipan , nilai], boleh dilalui melalui kaedah entri() (atau antara muka iterator Symbol.iterator) yang disediakan.

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}
Salin selepas log masuk

1-4 Perbandingan dengan Objek

  • Penggunaan memori

    Perbezaan dalam penyemak imbas akan menyebabkan penggunaan memori bagi kedua-dua kaedah storan itu berbeza Walau bagaimanapun, berdasarkan saiz memori, peta menyimpan lebih kurang 50% pasangan nilai kunci daripada Objek

  • Prestasi sisipan.

    Kelajuan sisipan Prestasi peta dan Objek adalah lebih kurang sama, tetapi jika kod tersebut melibatkan bilangan sisipan yang banyak, adalah disyorkan untuk menggunakan peta

  • Kelajuan carian

    Perbezaannya adalah kecil. Objek adalah lebih baik apabila ia hanya mengandungi sebilangan kecil pasangan nilai kunci

  • Padam prestasi

    Padam objek() prestasi adalah lemah, manakala padam peta() () mempunyai prestasi yang baik Jika data melibatkan sejumlah besar operasi pemadaman, adalah disyorkan untuk menggunakan peta

[Cadangan berkaitan. : tutorial video javascript, Video Pengaturcaraan

Atas ialah kandungan terperinci Adakah peta es6 jenis rujukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan