1. 程式人生 > >es6——新增的資料型別 資料集合map

es6——新增的資料型別 資料集合map

特點: 1.類似於物件,本質上是鍵值對的集合 2.“鍵”不侷限於字串,各種型別的值(包括物件)都可以當做鍵 3.物件“字串-值”,map“值-值”,是一種更加完善的hash結構實現

 {
        let obj = {a: 1}, obj1 = {b: 2}, obj2 = {};
        obj2.c = 3;
        //無論鍵內傳什麼 最終都會轉換為字串
        obj2['d'] = 4;
        obj2[obj] = 5;

        console.log(obj.toString());//[object Object]
console.log(obj, obj1, obj2);//{a: 1} {b: 2} {c: 3, d: 4, [object Object]: 5} }

map

    {
        let obj = {a: 1}, obj1 = {b: 2};
        //建立一個map
        const map = new Map([
            ['name', 'bob'],
            ['name', 'lucy'],//自動覆蓋重複鍵值
            ['age', 18],
            [obj, 'good'
], [obj1, 'bad'], [[1, 2], 'hhh'] ]); console.log(map);//Map(5) {"name" => "lucy", "age" => 18, {…} => "good", {…} => "bad", Array(2) => "hhh"} }

屬性

    {
        let obj = {a: 1}, obj1 = {b: 2};
        const map = new Map([
            ['name'
, 'bob'], ['name', 'lucy'], ['age', 18], [obj, 'good'], [obj1, 'bad'], [[1, 2], 'hhh'] ]); console.log(map.size);//5 (重複的鍵值算是一個) }

方法 1.set和get

    {
        let obj = {a: 1}, obj1 = {b: 2},obj2=[1,2];
        const map = new Map([
            [obj, 'good'],
            [obj1, 'bad'],
            [obj2, 'hhh']
        ]);

        //set(支援鏈式編輯)
        console.log(map.set('friends', ['tom', 'john']).set('num', 20));//Map(5) {{…} => "good", {…} => "bad", Array(2) => "hhh", "friends" => Array(2), "num" => 20}
        console.log(map);//Map(5) {{…} => "good", {…} => "bad", Array(2) => "hhh", "friends" => Array(2), "num" => 20}

        //get(不支援鏈式編輯)
        console.log(map.get('num'));//20
        console.log(map.get(obj));//good
        console.log(map.get(obj2));//hhh
        console.log(map.get('friends'));//(2) ["tom", "john"]
    }

2.delete(不支援鏈式編輯)

    {
        let obj = {a: 1}, obj1 = {b: 2};
        //建立一個map
        const map = new Map([
            ['name', 'bob'],
            ['name', 'lucy'],//自動覆蓋重複鍵值
            ['age', 18],
            [obj, 'good'],
            [obj1, 'bad'],
            [[1, 2], 'hhh']
        ]);

        console.log(map.delete('name'));//true
        console.log(map.delete('xxx'));//false
        console.log(map);//Map(4) {"age" => 18, {…} => "good", {…} => "bad", Array(2) => "hhh"}
    }

3.has

   {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        console.log(map.has('name'));//true
        console.log(map.has('xxx'));//false
    }

4.clear

 {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        console.log(map.clear());//undefined
        console.log(map);//Map(0) {}
    }

5.keys values entries

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        console.log(map.keys());//MapIterator {"name", "age"}
        console.log(map.values());//MapIterator {"bob", 18}
        console.log(map.entries());//MapIterator {"name" => "bob", "age" => 18}
    }

遍歷

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        map.forEach(function(value,index){
            console.log(index);//name; age
            console.log(value);//bob; 18
        })
    }

注意事項

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        map.set({},'hhhh');
        map.set({},'aaaa');
        //會建立兩個空物件
        console.log(map);//Map(4) {"name" => "bob", "age" => 18, {…} => "hhhh", {…} => "aaaa"}
        console.log({}==={});//false
    }