九、數據類型　　Symbol

/*
*   Symbol  數據類型   概念： Symbol 提供一個獨一無二的值
* */

{
    let a1 = Symbol();
    let a2 = Symbol();
    console.log(a1===a2,a1,a2);           //false

    let a3 = Symbol.for(‘a3‘);      //*Symbol.for 會檢查window下是否存在 ‘a3‘
    let a4 = Symbol.for(‘a3‘);
    console.log(a3===a4);           //true
 

}

{
    //用法
    let a1 = Symbol.for(‘abc‘);
    let obj = {
        [a1]:‘123‘,                     //獨一無二的key 值
        ‘abc‘:345,
        ‘c‘:‘456‘
    }
    console.log(‘obj‘,obj);         //{abc: 345, c: "456", Symbol(abc): "123"}

    for(let [key,value] of Object.entries(obj)){
        console.log(key,value);         
 
//abc 345   c 456
    //                              * for in/of 取不到Symbol類型key值
    }

    Object.getOwnPropertySymbols(obj).forEach(function (item) {
        console.log(obj[item]);                 //123           可以拿到Symbol類型的key 但拿不到常規的key值
    })

    Reflect.ownKeys(obj).forEach(function (item) {          //
 
可以拿到Symbol類型的key和常規的key
        console.log(‘ownKeys‘,obj[item]);               //ownKeys 345   ownKeys 456 ownKeys 123
    })
}

十、數據結構 　　Map()、Set()、WeakMap()、WeakSet()

/*
 *   ES6中的數據結構           Set()  WeakSet()        Map()   WeakMap()
 * */

{
    let list = new Set();
    list.add(5);
    list.add(7);

    console.log(‘size‘, list.size)               //獲取 長度 size  2
}

{
    let arr = [1, 2, 3, 4, 5];
    let list = new Set(arr);

    console.log(‘size‘, list.size)       //size  5
}

{
    let list = new Set();
    list.add(1);
    list.add(2);
    list.add(1);                    //往Set 數據類型中添加重復的值      不會報錯，只是不會生效

    console.log(‘list‘, list)        //Set(2) {1, 2}
}

{   /*  利用Set數據類型的特性去重        **Set 在轉換元素的的時候不會進行數據類型的轉換      */
    let arr = [1, 2, 3, 1, 5, ‘2‘, 4];
    let list = new Set(arr);

    console.log(‘unique‘, list);      //Set(6) {1, 2, 3, 5, "2", 4}       字符串‘2’和數值2同時存在
}

/*
 *   Set實例方法    add     delete  clear   has
 * */

{
    let arr = [‘add‘, ‘delete‘, ‘clear‘, ‘has‘];
    let list = new Set(arr);

    console.log(‘has‘, list.has(‘add‘));     //true
    console.log(‘delete‘, list.delete(‘add‘), list);     //Set(3) {"delete", "clear", "has"}
    console.log(‘clear‘, list.clear(), list)              //Set(0) {}
}

/*
 *   對Set數據結構的遍歷
 * */

{
    let arr = [‘add‘, ‘delete‘, ‘clear‘, ‘has‘];
    let list = new Set(arr);

    for (let key of list.keys()) {
        console.log(‘keys‘, key);   //keys add  keys delete keys clear  keys has
    }

    for (let v of list.values()) {
        console.log(‘values‘, v);   //values add    values delete   values clear    values has
    }

    for (let [k,v] of list.entries()) {
        console.log(‘entries‘, k, v); //entries add add   entries delete delete   ...
    }

    list.forEach(function (item) {
        console.log(item);      //add, delete, clear, has
    })
}


/*
 *   WeakSet  支持的數據類型必須是 *對象
 *            WeakSet中的對象都是弱引用  不會和垃圾回收機制掛鉤
 *
 *            WeakSet 不能遍歷，是因為成員都是弱引用，隨時可能消失，遍歷不能保證成員的存在。
 *            可能剛剛遍歷結束，成員就取不到了。WeakSet的一個用處是存儲DOM節點，而不用擔心這些節點從文檔移除時，會引起內存的泄露。
 *            WeakSet結構有以下方法
 *            WeakSet.add(value)：向WeakSet實例添加一個新成員。
 *            WeakSet.delete(value)：刪除WeakSet實例指定成員。
 *           WeakSet.has(value)：返回一個布爾值，表示某個值是否在WeakSet實例中。
 * */

{
    let weakList = new WeakSet();
    let arg = {};
    weakList.add(arg);
    //weakList.add(1);        //Invalid value used in weak set
}

/*
 *   Map數據結構     Map的key值可以為任意類型
 * */

{
    let map = new Map();
    let arr = [1, 2, 3];

    map.set(arr, 456)
    console.log(‘map‘, map)          //Map(1) {Array(3) => 456}      使用數組作為key
}

{
    let map = new Map([[‘a‘, 123], [‘b‘, 456]]);

    console.log(‘map args‘, map);         //Map(2) {"a" => 123, "b" => 456}
    console.log(‘size‘, map.size);       //size  2
    console.log(‘get‘, map.get(‘a‘));    //get 123
    console.log(‘delete‘, map.delete(‘a‘), map);  //delete true Map(1) {"b" => 456}
    console.log(‘clear‘, map.clear(), map);       //clear undefined Map(0) {}
}


/*
 *   WeakMap     WeakMap 接受的key值必須為對象    其他同WeakSet
 * */

{
    let weakMap = new WeakMap();
    let o = {};

    weakMap.set(o, 123);
    console.log(‘weakMap‘, weakMap.get(o));        //weakMap 123
}
/*
 *    Set 和 Array
 * */

{
    let set = new Set();
    let arr = [];

    //增
    set.add({‘t‘: 1});
    arr.push({‘t‘: 1});
    console.log(‘ser-arr‘, set, arr);

    //查
    let set_exist = set.has({t: 1});         //false  引用類型的地址不同
    let arr_exist = arr.find(item=>item.t);

    //改
    set.forEach(item=>item.t ? item.t = 2 : ‘‘);
    arr.forEach(item=>item.t ? item.t = 2 : ‘‘);
    console.log(‘set-arr-modify‘, set, arr);

    //刪
    set.forEach(item=>item.t ? set.delete(item) : ‘‘)
    let index = arr.findIndex(item=>item.t);     //查找每個元素中包含t的索引
    arr.splice(index, 1);
    console.info(‘set-arr-empty‘, set, arr);         //map-delete Set(0) {} []
}

/*
 *   Map 和 Array
 * */

{
    //數據結構橫向對比  ，增刪改查
    let map = new Map();
    let arr = [];
    //增
    map.set(‘t‘, 1);
    arr.push({‘t‘: 1});

    console.info(‘map-array‘, map, arr);

    //查
    let map_exist = map.has(‘t‘);           //boolean
    let array_exist = arr.find(item=>item.t);       //如果存在 則返回數據的值

    console.info(‘map-array‘, map_exist, array_exist);    //map-array     true    {t: 1}

    //改
    map.set(‘t‘, 2);
    arr.forEach(item=>item.t ? item.t = 2 : ‘‘);
    console.info(‘map-modify‘, map, arr);             //map-modify Map(1) {"t" => 2} [{t:2}]

    //刪除
    map.delete(‘t‘);
    let index = arr.findIndex(item=>item.t);     //查找每個元素中包含t的索引
    arr.splice(index, 1);
    console.info(‘map-empty‘, map, arr);         //map-delete Map(0) {} []
}

/*
 *   Map,Set,Object 的對比
 * */

{
    let item = {‘t‘: 1};
    let map = new Map();
    let set = new Set();
    let obj = {};

    //增
    map.set(‘t‘, 1);
    set.add(item);
    obj[‘t‘] = 1;

    console.info(‘map-set-obj‘, map, set, obj);     //map-set-obj Map(1) {"t" => 1} Set(1) {{t:1}} {t: 1}

    //查
    console.info({
            map_exist: map.has(‘t‘),
            set_exist: set.has(item),
            obj_exist: ‘t‘ in obj
        }
        //{map_exist: true, set_exist: true, obj_exist: true}
    )

    //改
    map.set(‘t‘,2);
    item.t=2;           //set 保存引用地址
    obj[‘t‘]=2;

    console.info(‘map-set-obj-modify‘, map, set, obj);      //map-set-obj-modify Map(1) {"t" => 2} Set(1) {{…}} {t: 2}

    //刪
    map.delete(‘t‘);
    set.delete(item);
    delete obj[‘t‘];

    console.info(‘map-set-empty‘, map,set, arr);
}
/*
*   對比小結：       Map>Set>Array=Object
*           1、在開發過程中涉及到的數據結構   能使用Map 不使用 Array 尤其是復雜的數據結構使用
*           2、如果對數據結構中的唯一性有要求 考慮使用Set   放棄使用Object做存儲
* */

ES6新特性使用小結（三）