es6筆記5^_^set、map、iterator

来源:http://www.cnblogs.com/puyongsong/archive/2017/01/19/6290830.html
-Advertisement-
Play Games

一、set 1.基本用法 2.Set實例的屬性 3.Set實例的方法 4.遍歷操作 二、WeakSet 三、Map結構的目的和基本用法 實例的屬性和操作方法 遍歷方法 Map結構轉為數組結構，比較快速的方法是結合使用擴展運算符（...）。 四、WeakMap WeakMap與Map在API上的區別主 ...


一、set

1.基本用法

　　數據結構Set類似於數組，但是成員的值都是唯一的，沒有重覆的值。
    let s = new Set();
    [2,3,5,4,5,2,2].map(x => s.add(x))
    for (let i of s) {console.log(i)}// 2 3 5 4
//Set函數可以接受一個數組作為參數，用來初始化。

    var items = new Set([1,2,3,4,5,5,5,5]);
    console.log(items); // set object
    console.log(items.size); // 5
//向Set加入值的時候，不會發生類型轉換，所以5和“5”是兩個不同的值。
    let set = new Set();
    set.add({})
    console.log(set.size);// 1
    set.add({})
    console.log(set.size);// 2
//上面代碼表示，由於兩個空對象不是精確相等，所以它們被視為兩個值。

2.Set實例的屬性

Set結構的實例有以下屬性。
Set.prototype.constructor：構造函數，預設就是Set函數。
Set.prototype.size：返回Set實例的成員總數。
    let s = new Set();
    s.add(1).add(2).add(2);// 註意2被加入了兩次
    console.log(s);
    console.log(s.size); // 2

3.Set實例的方法

分為兩大類：
　　操作方法（用於操作數據）和遍歷方法（用於遍歷成員）。下麵先介紹四個操作方法。
　　add(value)：添加某個值，返回Set結構本身。
　　delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
　　has(value)：返回一個布爾值，表示該值是否為Set的成員。
　　clear()：清除所有成員，沒有返回值。
上面這些屬性和方法的實例如下:
    let s = new Set();
    s.add(1).add(2).add(2);
        console.log(s.has(1));// true
        console.log(s.has(2)); // true
        console.log(s.has(3));// false
    s.delete(2);
        console.log(s.has(2));// false
    s.clear();
        console.log(s.size);//0
//Array.from方法可以將Set結構轉為數組：
    let items = new Set([1, 2, 3, 4, 5]);
    let array = Array.from(items);
    console.log(array);//[1, 2, 3, 4, 5]

4.遍歷操作

Set結構的實例有四個遍歷方法，可以用於遍歷成員。
　　keys()：返回一個鍵名的遍歷器
　　values()：返回一個鍵值的遍歷器
　　entries()：返回一個鍵值對的遍歷器
　　forEach()：使用回調函數遍歷每個成員
由於Set結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以key方法和value方法的行為完全一致。
    let set = new Set(['red', 'green', 'blue']);
    for ( let item of set.keys() ){
        console.log(item);// red green blue
    }
    for ( let item of set.values() ){
        console.log(item);// red green blue
    }
    for ( let item of set.entries() ){
        console.log(item);// ["red", "red"]  ["green", "green"] ["blue", "blue"]
    }
    set.forEach(function(item){
        console.log(item);// red green blue
    })

二、WeakSet

WeakSet和Set一樣都不存儲重覆的元素，但有一些不同點 。
WeakSet的成員只能是對象，而不能是其他類型的值。
WeakSet結構有以下三個方法。
WeakSet.prototype.add(value)：向WeakSet實例添加一個新成員。
WeakSet.prototype.delete(value)：清除WeakSet實例的指定成員。
WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在
    let ws = new WeakSet();
//console.log(ws.add(1));// TypeError: Invalid value used in weak set
    let obj = {};
    let foo = {};
    ws.add(window);
    ws.add(obj);
    console.log(ws);
    console.log(ws.has(window)); // true
    console.log(ws.has(foo));    // false
    ws.delete(window);
    console.log(ws.has(window));    // false
//WeakSet沒有size屬性，沒有辦法遍歷它的成員。
    console.log(ws.size) // undefined
    console.log(ws.forEach); // undefined
//ws.forEach(function(item){ console.log('WeakSet has ' + item)})// TypeError: undefined is not a function

三、Map結構的目的和基本用法

Map 是一個“超對象”，其 key 除了可以是 String 類型之外，還可以為其他類型（如：對象）
他的方法和 Set 差不多：
　　size：返回成員總數。
　　set(key, value)：設置一個鍵值對。
　　get(key)：讀取一個鍵。
　　has(key)：返回一個布爾值，表示某個鍵是否在Map數據結構中。
　　delete(key)：刪除某個鍵。
　　clear()：清除所有成員。
        let m = new Map();
        o = {p: "Hello World"};
        m.set(o, "content")
        console.log(m);
        console.log(m.get(o))// "content"

實例的屬性和操作方法

Map結構的實例有以下屬性和操作方法。
　　size：返回成員總數。
　　set(key, value)：設置key所對應的鍵值，然後返回整個Map結構。如果key已經有值，則鍵值會被更新，否則就新生成該鍵。
　　get(key)：讀取key對應的鍵值，如果找不到key，返回undefined。
　　has(key)：返回一個布爾值，表示某個鍵是否在Map數據結構中。
　　delete(key)：刪除某個鍵，返回true。如果刪除失敗，返回false。
　　clear()：清除所有成員，沒有返回值。
　　set()方法返回的是Map本身，因此可以採用鏈式寫法。
    let map = new Map()
            .set(1, 'a')
            .set(2, 'b')
            .set(3, 'c');
    console.log(map);
//下麵是has()和delete()的例子。
    let m = new Map();
    m.set("edition", 6)        // 鍵是字元串
    m.set(262, "standard")     // 鍵是數值
    m.set(undefined, "nah")    // 鍵是undefined
    let hello = function() {console.log("hello");}
    m.set(hello, "Hello ES6!") // 鍵是函數
    m.has("edition")     // true
    m.has("years")       // false
    m.has(262)           // true
    m.has(undefined)     // true
    console.log(m.get(undefined));
    m.has(hello)         // true
    m.delete(undefined)
    m.has(undefined)       // false
    m.get(hello)  // Hello ES6!
    m.get("edition")  // 6
//下麵是size屬性和clear方法的例子。
    map.set('foo', true);
    map.set('bar', false);
    map.size // 2
    map.clear()
    map.size // 0
    console.log(Array.from(m));//Array

遍歷方法

　　Map原生提供三個遍歷器。
　　keys()：返回鍵名的遍歷器。
　　values()：返回鍵值的遍歷器。
　　entries()：返回所有成員的遍歷器。
使用示例：
    let map = new Map([
        ['F', 'no'],
        ['T',  'yes'],
    ]);

    for (let key of map.keys()) {
        console.log(key);
    }
// "F"
// "T"

    for (let value of map.values()) {
        console.log(value);
    }
// "no"
// "yes"

    for (let item of map.entries()) {
        console.log(item[0], item[1]);
    }
// "F" "no"
// "T" "yes"

// 或者
    for (let [key, value] of map.entries()) {
        console.log(key, value);
    }

// 等同於使用map.entries()
    for (let [key, value] of map) {
        console.log(key, value);
    }

Map結構轉為數組結構，比較快速的方法是結合使用擴展運算符（...）。

        let map = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three']
        ]);
        [...map.keys()];
// [1, 2, 3]
        [...map.values()];
// ['one', 'two', 'three']
        [...map.entries()];
// [[1,'one'], [2, 'two'], [3, 'three']]
        [...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
//此外，Map還有一個forEach方法，與數組的forEach方法類似，也可以實現遍歷。
        map.forEach(function(value, key){
            console.log(key+':'+value);
        });

四、WeakMap

WeakMap結構與Map結構基本類似，唯一的區別是它只接受對象作為鍵名（null除外），不接受原始類型的值作為鍵名，而且鍵名所指向的對象，不計入垃圾回收機制。set()和get()分別用來添加數據和獲取數據:
    let map = new WeakMap();
    let element={};
    map.set(element, "Original");
// 下麵就可以使用了
    let value = map.get(element);
    console.log(value);             // "Original"

WeakMap與Map在API上的區別主要是兩個:

　　一是沒有遍歷操作（即沒有key()、values()和entries()方法），也沒有size屬性；
　　二是無法清空，即不支持clear方法。這與WeakMap的鍵不被計入引用、被垃圾回收機制忽略有關。
因此，WeakMap只有四個方法可用：get()、set()、has()、delete()。

五、Iterator（遍歷器）的概念

遍歷器（Iterator）就是統一的介面機制，來處理所有不同的數據結構。

Iterator的作用有三個：

　　一是為各種數據結構，提供一個統一的、簡便的訪問介面；
　　二是使得數據結構的成員能夠按某種次序排列；
　　三是ES6創造了一種新的遍歷命令for...of迴圈，Iterator介面主要供for...of消費。

Iterator的遍歷過程是這樣的。

　　創建一個指針，指向當前數據結構的起始位置。也就是說，遍歷器的返回值是一個指針對象。
　　第一次調用指針對象的next方法，可以將指針指向數據結構的第一個成員。
　　第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。
　　調用指針對象的next方法，直到它指向數據結構的結束位置。
　　每一次調用next方法，都會返回當前成員的信息，具體來說，就是返回一個包含value和done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。
    function idMaker(){
        var index = 0;
        return {
            next: function(){
                return {value: index++, done: false};
            }
        }
    }
    let it = idMaker();
    console.log(it.next().value); // '0'
    console.log(it.next().value); // '1'
    console.log(it.next().value); // '2'

數據結構的預設Iterator介面

在ES6中，可迭代數據結構(比如數組)都必須實現一個名為Symbol.iterator的方法，該方法返回一個該結構元素的迭代器。註意，Symbol.iterator是一個Symbol，Symbol是ES6新加入的原始值類型。
    let arr = ['a', 'b', 'c'];
    let iter = arr[Symbol.iterator]();
    console.log(iter);
    console.log(iter.next()); // { value: 'a', done: false }
    console.log(iter.next()); // { value: 'b', done: false }
    console.log(iter.next()); // { value: 'c', done: false }
    console.log(iter.next()); // { value: undefined, done: true }
上面代碼中，變數arr是一個數組，原生就具有遍歷器介面，部署在arr的Symbol.iterator屬性上面。所以，調用這個屬性，就得到遍歷器。
調用預設Iterator介面的場合
有一些場合會預設調用iterator介面（即Symbol.iterator方法），除了下文會介紹的for...of迴圈，還有幾個別的場合。

解構賦值

對數組和Set結構進行解構賦值時，會預設調用iterator介面。
    let set = new Set().add('a').add('b').add('c');
    let [x,y] = set;
// x='a'; y='b'
    let [first, ...rest] = set;
    console.log(first);//'a'
    console.log(rest);// ['b','c'];
//擴展運算符
//擴展運算符（...）也會調用預設的iterator介面。
// 例一
    let str = 'hello';
    console.log([...str]); //  ['h','e','l','l','o']
// 例二
    let arr = ['b', 'c'];
    console.log(['a', ...arr, 'd']);// ['a', 'b', 'c', 'd']

其他場合

以下場合也會用到預設的iterator介面，可以查閱相關章節。
yield*
Array.from()
Map(), Set(), WeakMap(), WeakSet()
Promise.all(), Promise.race()

原生具備Iterator介面的數據結構
字元串是一個類似數組的對象，也原生具有Iterator介面。
    let someString = "hi";
    typeof someString[Symbol.iterator]// "function"
    let iterator = someString[Symbol.iterator]();
    iterator.next()  // { value: "h", done: false }
    iterator.next()  // { value: "i", done: false }
    iterator.next()  // { value: undefined, done: true }
//上面代碼中，調用Symbol.iterator方法返回一個遍歷器，在這個遍歷器上可以調用next方法，實現對於字元串的遍歷。
//可以覆蓋原生的Symbol.iterator方法，達到修改遍歷器行為的目的。
    let str = new String("hi");
    [...str] // ["h", "i"]
    str[Symbol.iterator] = function() {
        return {
            next: function() {
                if (this._first) {
                    this._first = false;
                    return { value: "bye", done: false };
                } else {
                    return { done: true };
                }
            },
            _first: true
        };
    };
    [...str] // ["bye"]
    str // "hi"
//上面代碼中，字元串str的Symbol.iterator方法被修改了，所以擴展運算符（...）返回的值變成了bye，而字元串本身還是hi。

六、Iterator介面與Generator函數


Symbol.iterator方法的最簡單實現，還是使用下一章要介紹的Generator函數。
    let myIterable = {};
    myIterable[Symbol.iterator] = function* () {
        yield 1;
        yield 2;
        yield 3;
    };
    console.log(myIterable);
    console.log([...myIterable]); // [1, 2, 3]

// 或者採用下麵的簡潔寫法
    let obj = {
    * [Symbol.iterator]() {
        yield 'hello';
        yield 'world';
    }
    };

    for (let x of obj) {
        console.log(x);// hello  world
    }
//上面代碼中，Symbol.iterator方法幾乎不用部署任何代碼，只要用yield命令給出每一步的返回值即可。

遍歷器的return()，throw()

遍歷器返回的指針對象除了具有next方法，還可以具有return方法和throw方法。其中，next方法是必須部署的，return方法和throw方法是否部署是可選的。
return方法的使用場合是，如果for...of迴圈提前退出（通常是因為出錯，或者有break語句或continue語句），就會調用return方法。
如果一個對象在完成遍歷前，需要清理或釋放資源，就可以部署return方法。
throw方法主要是配合Generator函數使用，一般的遍歷器用不到這個方法。

七、for...of迴圈

　　迭代器對象允許像 CLI IEnumerable 或者 Java Iterable 一樣自定義迭代器。
　　將for..in轉換為自定義的基於迭代器的形如for..of的迭代，不需要實現一個數組，支持像 LINQ 一樣的惰性設計模式。
    let fibonacci = {
        [Symbol.iterator]() {
            let pre = 0, cur = 1;
            return {
                next() {
                    [pre, cur] = [cur, pre + cur];
                    return { done: false, value: cur }
                }
            }
        }
    }
    console.log(fibonacci);
    for (let n of fibonacci) {
        // truncate the sequence at 1000
        if (n > 1000){
            break;
        }
        console.log(n);
    }

 此篇終，待續……











您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [轉載]聽說2017你想寫前端？
    不好意思，沒有像其他公眾號一樣趕著發文章，每年到這個時候總有一大波什麼今年前端預測，技術框架預測什麼的。我這次寫這篇文針對的對象，是想在今年踏入前端這行的人們，不管你現在是徘徊在門口，還是已經半隻腳踏入這片未知領域，都可以參考一下先行者的經驗。 先來個大概預覽： 項目工程化 發展方向 職業環境 總結 ...
  • line-height系列（二）——對行內元素（文字、圖片、兄弟元素）、塊級元素設置line-height後的表現
    對圖片設置line-height不會垂直居中，而是有一個規律：圖片底部向上距離行高中垂線6px。多行文字未必中垂線對齊，可能是底線對齊。 ...
  • JavaScript中this的指向問題
    this是面向對象語言中一個重要的關鍵字，理解並掌握該關鍵字的使用對於我們代碼的健壯性及優美性至關重要。而javascript的this又有區別於Java、C#等純面向對象的語言，這使得this更加撲朔迷離，讓人迷惑。this使用到的情況： 1. 純函數2. 對象方法調用3. 使用new調用構造函數 ...
  • jQuery 選項卡 CleverTabs
    CleverTabs是一款jQuery插件，所需jQuery版本:1.6.1，jQuery UI樣式版本:1.8.13；其功能為創建jQuery UI風格的Tab用於顯示iframe。 本示例中符加了jQuery.contextMenu插件，我修改了其樣式，使用了jQuery UI的皮膚 運行一下 ...
  • angular.js測試框架protracotr安裝所需的node版本
    protractor內代碼的語法是基於ES6的，比如：裡面用到了展開運算符“...”，node.js 6.0以下是不支持該語法特性。 所以，安裝protractor是不會報錯，但運行webdriver-manager的升級就會報那三個點無法識別。 需要將node.js升級到6.0+就能解決該問題。 ...
  • windows下通過Chocolatey安裝或升級node.js
    以管理員身份運行windows PowerShell並安裝Chocolatey 我的機器是windows10，可以在開始菜單->所有應用->W欄中找到Window PowerShell並運行。 在命令行中運行命令： 等待安裝完成，預設會安裝最新版。 安裝後運行命令確認： 我這裡得到的版本回覆： 確認 ...
  • CSS頁面渲染優化屬性will-change
    前面的話   當我們通過某些行為(點擊、移動或滾動)觸發頁面進行大面積繪製的時候，瀏覽器往往是沒有準備的，只能被動使用CPU去計算與重繪，由於沒有事先準備，應付渲染夠嗆，於是掉幀卡頓。而CSS屬性will change為web開發者提供了一種告知瀏覽器該元素會有哪些變化的方法，這 ...
  • css3 小圖標提示特效
    最近的計劃，就是每天來幾個特效，當然這裡有限制，在什麼候選區只能放一個，還每天有限制發佈的，哎， 啊 終於寫完了，看到一個挺好玩的東西，想到能不能用網頁的特效做出來，試試唄！不過，一想肯東有很多的 相類似的了，不過，反正就是挺有成就感的。高興即來淫詩一首，兩眼黑黑，燈下黑黑，嘿嘿嘿嘿嘿嘿嘿嘿。。。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類