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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類