站長資訊網
        最全最豐富的資訊網站

        新增的es6數據結構有哪些

        新增結構有:1、Symbol,表示獨一無二的值,是一個函數結構;2、Set,指的是“集合”結構,類似數組,允許存放無序且不能重復的數據;3、WeakSet,類似Set,內部數據也不能有重復值;4、Map,指的是“字典”結構,可存儲映射關系。

        新增的es6數據結構有哪些

        本教程操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

        ES6新增數據結構

        1、Symbol

        SymbolES6中新增的一個基本數據類型之一,它是一個函數。每一個從Symbol函數返回的Symbol值都是獨一無二的,symbol值作為對象屬性的標識符,也是唯一的用途的。

        const s1 = Symbol() const s2 = Symbol() console.log(s1 === s2); // false

        symbol作為key

        第一種方式,直接在對象的字面量中添加。

        // symbol作為key const obj = {   [s1]:'abc',   [s2]:'cc', }

        第二種方式,通過添加數組方式添加。

        // 需要用數組方式來獲取,不能通過點語法,否則會獲取到字符串key console.log(obj[s1]);

        第三種方式,通過對象中的defineProperty方法添加。

        const s4=Symbol() Object.defineProperty(obj,s4,{   configurable:true,   enumerable:true,   writable:true,   value:'ff' })

        通過symbol獲取對應的值

        需要用數組方式來獲取,不能通過點語法,否則會獲取到字符串key。

        console.log(obj[s1]);

        symbol不能被隱式轉換成string類型。

        注意:Symbol函數中的參數是symbol描述符,這是在ES10新增的特性

        let Sym = Symbol("Sym") alert(Sym)  // TypeError: Cannot convert a Symbol value to a string

        我們不能直接alert一個symbol對象,但是我們可以通過toString的方式或者.description來獲取symbol對象的描述符。

        let sym = Symbol('a') console.log(sym.description); // 'a'

        遍歷symbol

        在使用for遍歷、object.keys中是獲取不到symbol健的,對此object還提供了getOwnPropertySymbols方法,用于獲取對象中所有symbol的key。

        const sKeys=(Object.getOwnPropertySymbols(obj)); for(const skey of sKeys){   console.log(obj[skey]); }

        全局symbol對象注冊

        有時,我們可能需要多個symbol的值是一致的,我們可以通過symbol提供的靜態方法for方法傳入一樣的描述符來使它們的值一致。

        Symbol.for

        該方法會在使用給定鍵搜索運行時符號注冊表中的現有符號,并在找到時返回它。否則,使用此鍵在全局符號注冊表中創建一個新符號。

        const sa=Symbol.for('cc') const sb=Symbol.for('cc') console.log(sa===sb); //true

        Symbol.keyFor

        該方法用于獲取全局symbol的描述符。

        const key =Symbol.keyFor(sb) console.log(key); // c

        2、Set

        Set對象(類似數組)允許你存放任何數據類型,但里面的值不能重復。

        const s1 = new Set() s1.add(10) s1.add(20) s1.add(30) s1.add(40)  console.log(s1) // Set(4) { 10, 20, 30, 40 }  s1.add(20) console.log(s1) // Set(4) { 10, 20, 30, 40 }

        Set常用方法

        方法 返回值 說明
        size set對象中的數量 返回set對象中的數量
        add Set對象 添加元素
        delete boolean 刪除元素
        has boolean Set對象中是否存在這個值
        clear 清空Set對象中的值

        3、WeakSet

        WeakSet是類似Set的另外一種數據結構,內部數據也不能有重復值。

        • 它與Set的區別
          • WeakSet只能存放對象類型,不能存放基本數據類型
          • WeakSet對元素是弱引用

        基本使用

        const weakSet = new WeakSet(); let obj = {   name: "_island" };  weakSet.add(obj);

        WeakSet常用方法

        方法 返回值 說明
        add weakset對象 添加元素
        delete boolean 刪除元素
        has boolean weakset對象中是否存在這個值

        關于遍歷

        WeakSet不能被遍歷,因為它只是對對象進行弱引用,如果遍歷去獲取元素,有可能導致對象不能被GC回收。

        所以WeakSet中的對象是不能獲取的

        4、Map

        ES6新增的數據結構,用于存儲映射關系。我們知道在JavaScript中對象中是不能用對象來作為key的。(假如我們把對象作為key,其內部會將對象轉換為字符串[object object]

        const obj1 = { name: "_island" }; const obj2 = { name: "QC2125" }; const obj3={   [obj1]:'a',   [obj2]:'b', }  console.log(obj3); // { '[object Object]': 'b' }

        Map則可以把對象作為key進行存儲,可以通過set方法添加到Map中,也直接通過字面量的方式添加。

        const obj1 = { name: "_island" }; const obj2 = { name: "QC2125" }; const map = new Map(); map.set(obj1, "a"); map.set(obj2, "b"); console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }  // or const map2 = new Map([[obj1,'a'],[obj2,'b']])

        Map常用方法

        方法 返回值 說明
        get 獲取對應的元素 通過key獲取對應元素
        size Map對象中的數量 返回Map對象中的數量
        set Map對象 添加元素
        delete boolean 刪除元素
        has boolean Set對象中是否存在這個值
        clear 清空Set對象中的值

        遍歷Map

        通過foreach語句遍歷Map

        map2.forEach((item) => console.log(item));

        通過for..of遍歷Map

        for ([val, key] of map2) {   console.log(`${key}---${val}`); }

        5、WeakMap

        Map類似,也是以鍵值對的形式存在的

        • 和Map的區別
          • WeakMapkey只能使用對象,不接受其他的類型作為key
          • WeakMapkey對對象是弱引用

        基本使用

        const weakMap = new WeakMap(); weakMap.set(obj, "a"); console.log(weakMap.get(obj)); // a

        WeakMap常用方法

        方法 返回值 說明
        get weakmap對象 獲取元素
        delete boolean 刪除元素
        has boolean weaksmap對象中是否存在這個值

        關于遍歷

        WeakSet一樣,正因為它是弱引用,WeakMapkey是不可枚舉的,如果key可枚舉那其列表將會受GC影響。

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 自拍偷自拍亚洲精品第1页| 久久亚洲精精品中文字幕| 亚洲精品视频在线看| 亚洲国产精品一区二区久久| 亚洲精品国产品国语在线| 亚洲精品视频在线| 国产精品无码无片在线观看| 日韩午夜高清福利片在线观看欧美亚洲精品suv | 精品a在线观看| 久久精品嫩草影院| 国产成人精品一区二区三区免费| 伊在人亚洲香蕉精品区麻豆| 无翼乌无遮挡全彩老师挤奶爱爱帝国综合社区精品 | 久久棈精品久久久久久噜噜| 一本久久精品一区二区| 欧美精品亚洲精品日韩专区| 国产精品电影在线| 久久九九青青国产精品| 999精品在线| 国内精品久久久久久99| 日韩av无码久久精品免费| 亚洲精品无码高潮喷水在线| 亚洲国产人成精品| 欧美国产精品久久高清| 久久免费国产精品| 欧美精品高清在线xxxx| 久久99精品九九九久久婷婷| 精品人妻少妇一区二区三区不卡 | 精品福利资源在线| 2021国产精品视频| 国产精品无码久久久久久| 麻豆亚洲AV永久无码精品久久| 伊人 久久 精品| 亚洲国产精品国自产拍AV| 亚洲日韩精品射精日| 一色屋精品视频在线观看| 亚洲精品无码你懂的网站| 久久青青草原精品国产不卡| 欧美亚洲另类精品第一页 | 国产精品亚洲美女久久久| 国产精品手机在线观看你懂的 |