Adakah peta es6 dipesan?

Peta dipesan. Jenis peta dalam ES6 ialah senarai tersusun yang menyimpan banyak pasangan nilai kunci Nama kunci dan nilai yang sepadan menyokong semua jenis data, kesetaraan nama kunci dinilai dengan memanggil kaedah "Objext.is()". , jadi nombor 5 dan rentetan "5" akan dinilai sebagai dua jenis, dan boleh muncul dalam program sebagai dua kekunci bebas.

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

1. Koleksi peta

Objek JavaScript pada asasnya ialah koleksi pasangan nilai kunci, tetapi secara tradisinya ia hanya boleh digunakan sebagai rentetan Nilai kunci berpasangan.

Untuk menyelesaikan masalah ini, ES6 menyediakan struktur data peta. Ia serupa dengan objek dan juga merupakan koleksi pasangan nilai kunci. Walau bagaimanapun, skop kunci ini tidak terhad kepada rentetan Pelbagai jenis nilai (termasuk objek) boleh digunakan sebagai kunci. Dalam erti kata lain, struktur objek menyediakan surat-menyurat (nilai rentetan), dan struktur peta melaksanakan

Jenis peta dalam ES6 ialah senarai tertib yang menyimpan banyak pasangan nilai kunci, di mana nama kunci dan Nilai yang sepadan menyokong semua jenis data. Pertimbangan kesetaraan nama kunci dicapai dengan memanggil kaedah Objext.is(), jadi nombor 5 dan rentetan '5' akan dinilai sebagai dua jenis dan boleh muncul dalam program sebagai dua kunci bebas.

Nota: Terdapat pengecualian, 0 dan -0 dianggap sama dalam koleksi peta, yang berbeza daripada hasil Object.is(). "nilai kunci" diperlukan Untuk "struktur data, peta lebih sesuai daripada objek dan mempunyai kelajuan carian yang sangat pantas

1. Atribut: saiz

Mengembalikan peta Bilangan elemen

2. Kaedah asas

(1) set()

untuk memetakan Tambah data dan mengembalikan peta yang ditambah (menetapkan nilai kepada kunci sedia ada akan menimpa nilai sebelumnya)

(2) get()

Dapatkan tertentu Nilai kunci mengembalikan nilai yang sepadan dengan kunci Jika tidak, ia mengembalikan tidak ditentukan

(3) telah()

mengesan sama ada sesuatu yang tertentu. kunci wujud dan mengembalikan nilai Boolean

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
 
//输出:    3
//        123
//        456
//        true

(4) delete()

Padamkan kunci dan nilai yang sepadan dan kembalikan nilai Boolean jika pemadaman berjaya, ia akan menjadi benar

(5) clear()

Kosongkan semua nilai ​​dan kembalikan tanpa definisi

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
map.delete('Z-');
console.log(map.size);
 
console.log(map.clear())
 
//输出:  2
//      undefined

3. Kaedah traversal

Nota: Susunan lintasan peta ialah susunan sisipan

(1) kekunci()

Dapatkan semua kunci peta

(2) nilai()

Dapatkan semua nilai peta

(3)entri()

Dapatkan peta Semua ahli

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式
 
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
  [ 'JacksonWang', '123' ],
  [ 'LEO', '456' ],
  [ 'Z-', '789' ]
}*/

(4) forEach()

Traverse semua ahli peta

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
for(const [key,value] of map.entries()){
    console.log(`${key}:${value}`);
}
/*输出:
JacksonWang:123
LEO:456
Z-:789
*/

4 , ditukar kepada tatasusunan

struktur peta ditukar kepada penyahbinaan tatasusunan

let map1 = new Map([
    [1,'One'],
    [2,'Two'],
    [3,'Three']
])
 
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
 
/*输出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/

2. koleksi peta lemah

WeakMap ialah koleksi Peta Rujukan yang lemah, juga digunakan untuk menyimpan rujukan lemah kepada objek. Nama kunci dalam koleksi WeakMap mestilah objek Jika anda menggunakan nama kunci bukan objek, ralat akan dilaporkan: koleksi menyimpan rujukan yang lemah kepada objek ini Jika tiada rujukan kuat lain selain rujukan yang lemah, mekanisme pengumpulan sampah enjin Objek ini akan dikitar semula secara automatik dan pasangan nilai kunci dalam koleksi WeakMap akan dialih keluar. Tetapi hanya nama kunci koleksi mengikut peraturan ini Jika nilai yang sepadan dengan nama kunci ialah objek, rujukan kukuh objek yang disimpan tidak akan mencetuskan peranti kutipan sampah

1. Koleksi WeakMap Tujuan

(1) Simpan elemen DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        btn.addEventListener(&#39;click&#39;,function(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        },false)
    </script>
</body>
</html>

myElement dalam kod ialah nod DOM, apabila peristiwa klik berlaku, Hanya kemas kini status. Kami meletakkan keadaan ini sebagai nilai utama dalam WeakMap, dan nama kunci yang sepadan ialah myElement Setelah nod DOM dipadamkan, keadaan akan hilang secara automatik dan tiada risiko kebocoran memori

(2) Mendaftarkan objek pendengar untuk mendengar acara

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector(&#39;#btn&#39;);
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        // btn.addEventListener(&#39;click&#39;,function(){
        //     let temp = wmap.get(btn);//从这里获取键名为btn的值
        //     temp.timesClicked++;
        //     console.log(temp.timesClicked)
        // },false)
        function f1(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        }
        btn.addEventListener(&#39;click&#39;,f1,false)
    </script>
</body>
</html>

mempunyai kesan yang sama

(3) Menggunakan atribut peribadi

function Person(name){
    this._name = name;
}
 
Person.prototype.getName = function(){
    return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
 
//输出：张三

Kami tidak mahu pengguna mengakses atribut nama secara langsung, jadi kami terus menggunakan kaedah berikut untuk membungkus nama menjadi atribut peribadi

let Person = (function(){
    let privateData = new WeakMap();
    function Person(yourname){
        privateData.set(this,{_name:yourname})//this当前这个键的对象
    }
    Person.prototype.getName = function(){
        return privateData.get(this)._name;//
    }
    return Person;
})();//定义好了函数就开始执行
 
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
 
/*输出:
undefined
jack
*/

[Berkaitan cadangan: tutorial video javascript 、bahagian hadapan web】

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