ES 6 Map Setまとめ

23009 ワード

JavaScript教程転送ゲート
JavaScriptのデフォルトオブジェクト表示方式{}は、他の言語のMapまたはDictionaryのデータ構造、すなわちキーパッドのセットと見なすことができる.
しかし、javascriptのオブジェクトには小さな問題があります.キーは文字列でなければなりません.しかし、実際にはNumberや他のデータタイプがキーとして使用されるのも非常に合理的です.
この問題を解決するために、最新のES 6仕様は、新しいデータタイプMapを導入した.
MapMapはキーペアのセットの構造であり、非常に速い検索速度を有する.
例えば、試験の順位によって対応する学生の名前を検索する場合、Arrayで実現するなら、2つのArrayが必要です.
var ranks = [1, 2, 3];
var names = ['Michael', 'Bob', 'Tracy'];
    
    
    
    
  • 1
  • 2
  • 1
  • 2

给定一个名次,要查找对应的同学名字,就先要在ranks中找到对应的位置,再从names取出对应的成绩,Array越长,耗时越长。

如果用Map实现,只需要一个“名次”-“名字”的对照表,直接根据名次查找同学名字,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

var m = new Map([[1, 'Michael'], [2, 'Bob'], [3, 'Tracy']]);
m.get(1); // 'Michael'
    
    
    
    
  • 1
  • 2
  • 1
  • 2

初始化Map需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

var m = new Map(); //  Map
m.set('Adam', 67); //     key-value
m.set('Bob', 59);
m.has('Adam'); //     key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); //   key 'Adam'
m.get('Adam'); // undefined
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
*注意:只有针对同一个对象的引用,Map结构才将其视作同一个键。这一点要非常小心才行。*
var map = new Map();

map.set(['a'], 555);
map.get(['a']);  // undefined
上のコードの中でsetとget方法は表面的には同じキーに対しているが、実際にはこれは2つの値であり、メモリアドレスが異なるため、get方法はこのキーを読み取ることができず、undefinedに戻る.次のコードを見てください.
var map = new Map();

var k1 = ['a'];
var k2 = ['a'];

map.set(k1, 111);
map.set(k2, 222);

map.get( k1 );  //111
map.get( k2 );  //222
上のコードは変数k 1とk 2の値が同じですが、彼らはMap構造では2つのキーとして扱われます.同じ値の2つの例で、Mapでは2つのキーとして扱われます.属性と方法
Map構造には以下の属性と方法があります.-size:メンバー総数を返します.セット(key,value):キーのペアを設定します.get(key):キーを読み出す.has(key):ブール値を返します.あるキーがMap構造にあるかどうかを表します.delete(key):あるキーを削除します.すべてのメンバーをクリアします.
var m = new Map();

m.set("edition", 6); //      
m.set(262, "standard"); //     
m.set(undefined, "nah"); //  undefined

var 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
m.has(hello);  //true

m.delete( undefined );  
m.has( undefined );  //false

m.get( hello );  //hello ES6!
m.get("edition");  //6
〓〓〓〓〓〓〓を遍歴します
Map原生は三つのエルゴードを提供します.
  • key():キーの名前を返すエルゴード.
  • values():キーのエルゴードを返します.
  • entries():全メンバーのエルゴードを返します.
  • for ( let key of map.key() ) {
        console.log("key: %s", key);
    }
    
    for ( let value of map.value() ) {
        console.log("value: %s", value);
    }
    
    for ( let item of map.entries() ) {
        console.log("Key: %s, Value: %s", item[0], item[1]);
    }
    
    // same as using map.entries()
    for (let item of map) {
        console.log("Key: %s, Value: %s", item[0], item[1]);
    }
    はまた、MapにはforEachの方法があります.配列内のforEachの方法と同様に、巡回も可能です.
    map.forEach(function(value, key, map) {
        console.log("Key: %s, Value: %s", key, value);
    });
    forEach方法はまた、第二のパラメータを適用して、thisをバインディングすることもできる.
    var reporter = {
        report: function(key, value) {
            console.log("key: %s, Value: %s", key, value);
        }
    };
    
    map.forEach(function(value, key, map) {
        this.report(key, value)
    }, reporter);
    上のコードの中で、forEach()方法のコールバック関数の中のthisは、レポートを指します.
    セットSetは、Mapと同様に、keyのセットでもあるが、valueは記憶されていない.keyは重複できないので、Setには重複したkeyはない.Setを作成するには、入力としてArrayを提供する必要があります.または直接に空Setを作成します.
    var s1 = new Set(); //  Set
    var s2 = new Set([1, 2, 3]); //  1, 2, 3
       
       
       
       
    • 1
    • 2
    • 1
    • 2

    重复元素在Set中自动被过滤:

    var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}
       
       
       
       
    • 1
    • 2
    • 1
    • 2

    通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

    var s = new Set([1, 2, 3]);
    s.add(4);
    s; // Set {1, 2, 3, 4}
    s.add(4);
    s; // Set {1, 2, 3, 4}
       
       
       
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5

    通过delete(key)方法可以删除元素:

    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}
       
       
       
       
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    Set结构有以下属性:

    • Set.prototype.constructor: 构造函数,默认就是Set函数。
    • set.prototype.size : 返回Set的成员总数。

    Set结构有以下方法:

    • add(value) : 添加某个值。
    • delete(value) : 删除某个值。
    • has(value) : 返回一个布尔值,表示该值是否为Set的成员。
    • clear() : 清除所有成员。
    s.add(1).add(2).add(2); //   “2”      
    s.size //2
    
    s.has(1) // true
    s.has(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2)  // false
    以下を比較して、キーが含まれているかどうかを判断する上で、オブジェクトとセットの書き方にはどのような違いがありますか?
    //     
    var properties = {
        "width": 1,
        "height": 1
    };
    
    if ( properties[someName]) {
        // do something
    }
    
    /****************************************/
    
    // Set   
    var properties = new Set();
    
    properties.add('width');
    peoperties.add('height');
    
    if ( properties.has(someName) ) {
        // do something
    }
    注意:Aray.from法はSet構造を配列に変換することができる.
    var items = new Set([1, 2, 3, 4, 5]);
    var array = Array.from( items );
    これは配列中の重複要素を除去する方法も提供する.
    function dedupe( array ) {
        return Array.from( new Set(array) );
    }