ES 6 Map追加

57950 ワード

ES 6

Map
(1)基本文法
javascriptの対象(Object)は本質的にキーのセットで、文字列をキー名とするしかないです.他のタイプに対しては、自動的に文字列に変換されます.

    let array_ = [1, 2, 3, 4];//  
    let function_ = function () {};//  
    let number_=123;//  
    let object_={};//  

    let a = {};
    a[number_]="q";
    a[array_]="qe";
    a[function_]="qwe";
    a[object_]="qwer";

    let p = Object.keys(a);
    console.log(p);//["123","1,2,3,4","function(){}","[object object]"]
    console.log(typeof p[0]);//string
    console.log(typeof p[1]);//string
    console.log(typeof p[2]);//string
    console.log(typeof p[3]);//string

この問題を解決するためにES 6はMapデータ構造を提供しています.これは類似のオブジェクトであり、キーパッドのペアのセットでもありますが、キーパッドの名前は様々なタイプであることができます.

    let number_=123;//  
    let array_ = [1, 2, 3, 4];//  
    let function_ = function () {};//  
    let object_={};//  

    const a=new Map();
    a.set(number_,"q");
    a.set(array_,"qw");
    a.set(function_ ,"qwe");
    a.set(object_,"qwer");
    
    a.get(number_);//q
    a.get(array_);//qw
    a.get(function_);//qwe
    a.get(object_);//qwer
    
    for(let key of a.keys()){
        console.log(typeof key);
    }
    //number 
    //object
    //function
    //object

Map構造のgetとset操作方法を使用しました.
Mapコンストラクタ
任意のIteratorインターフェースを持ち、各メンバーは二重要素配列のデータ構造をMapコンストラクタのパラメータとして扱うことができます.たとえば配列:

const map = new Map([
     [1,"one"],
     [2, "two"],
     [3, "three"]
 ]);
//     Map{
//     1 => "one",
//     2 => "two",
//     3 => "three"
// }

入力された配列メンバーが3つの要素の配列を持っている場合、3番目の要素は無視されます.

const map = new Map([
     [1,"one","_one"],
     [2, "two"],
     [3, "three"]
 ]);
//     Map{
//     1 => "one",
//     2 => "two",
//     3 => "three"
// }

配列のメンバーには単一要素配列があります.

   const map = new Map([
        [1],
        [2, "two"],
        [3, "three"]
    ]);
//     Map{
//     1 => undefined,
//     2 => "two",
//     3 => "three"
// }

配列に加えて、MapとSetは、新しいMapを生成するために使用されてもよい.
Mapのキーはメモリアドレスと紐付けされています.

const map=new Map();

//  k1 k2      ， k1 k2           
const k1=["a"];
const k2=["a"];

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

Mapのキーはメモリアドレスと紐付けられています.二つの値のメモリアドレスが違っている限り、Mapはそれらを二つのキーとして扱います.
(2)例示的な属性と操作方法
1.size属性
size属性は、Map構造のメンバー総数を返します.

let a=new Map();
    a.set("1","q");
    a.set("2","qw");

   console.log(a.size)//2

2.set(key,value)
セット方法はキー名に対応するキー値を設定し、Map構造に戻ります.設定したキーに値があるとキー値が更新されます.set方式では現在のMapオブジェクトを返すので、チェーン式で書くことができます.

let a=new Map();
    a.set("1","q")
     .set("2","qw")
     .set("3","qwe");

3.get(key)
get方法は、keyに対応するキーの値を読み取り、keyが見つからなければundefinedに戻ります.
4.has(key)
has方法は、Mapにキーがあるかどうかを示すブール値を返します.
5.delete(key)
deleteメソッドは、あるキーを削除して、trueに戻ります.削除に失敗したらfalseを返します.
6.clear()
clearメソッドは、すべてのメンバーをクリアし、値を返しませんでした.
(3)エルゴード方法
Mapの巡回順序は挿入順序です.
1.keys():キーの名前を返すエルゴード.
2.values():キーのエルゴードを返します.
3.entries():全メンバーのエルゴードを返します.

const 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);
    }
    //"F" "NO"
    //"T" "YES"

    //   map.entries()  
    for (let [key,value] of map) {
        console.log(key,value);
    }
    //"F" "NO"
    //"T" "YES"

Map構造のデフォルトのエルゴード属性インターフェース(Symbol.iteratorプロパティ)は、entries方法です.
Map構造を行列に変換
Map構造から配列構造への比較的速い方法は拡張演算子(…)を結合することである.

 const map = new Map([
        ["1", "one"],
        ["2", "two"],
        ["3", "three"]
    ]);

    console.log([...map.keys()]);
    //["1","2","3"]

    console.log([...map.values()]);
    //["one","two","three"]

    console.log([...map.entries()]);
    //[["1","one"],["2","two"],["3","three"]]

    console.log([...map]);
    //[["1","one"],["2","two"],["3","three"]]

Mapのエルゴードとフィルタリング
Map自体にはmapとfilterの方法はありませんが、配列のmap方法、filter方法を組み合わせることで、Mapのエルゴードとフィルタリングが可能です.

const map = new Map([
        [1, "one"],
        [2, "two"],
        [3, "three"]
    ]);


    const map1=new Map(
        [...map].filter(([k,v])=>k<3)
    );
    //  map   {1=>"one",2=>"b"}


    const map2=new Map(
        [...map].map(([k,v])=>[k*2,"_"+v])
    );
    //  map   {2=>"_one",4=>"_two",6=>"_three"}

4.forEach():Mapの全メンバーを巡回します.
MapのforEach法は配列のforEach法と類似しており,エルゴードを実現できる.

const map = new Map([
        [1, "one"],
        [2, "two"],
        [3, "three"]
    ]);

    map.forEach(function (value, key, map) {
        console.log("Key:%s,Value:%s", key, value);
    });
    // Key:1,Value:one
    // Key:2,Value:two
    // Key:3,Value:three

forEach法はまた,結合thisのために第二のパラメータを受け入れることができる.

 const map = new Map([
        [1, "one"],
        [2, "two"],
        [3, "three"]
    ]);
    const reporter={
        report:function(key,value){
            console.log("Key:%s,Value:%s", key, value);
        }
    };

    map.forEach(function (value, key, map) {
        this.report(key,value);
    },reporter);
    // Key:1,Value:one
    // Key:2,Value:two
    // Key:3,Value:three

(4)他のデータ構造との転化
1.Mapを配列に変換
Mapを行列に変換する一番便利な方法は、拡張演算子を使うことです.

 const map = new Map([
        ["1", "one"],
        ["2", "two"],
        ["3", "three"]
    ]);

    console.log([...map.keys()]);
    //["1","2","3"]

    console.log([...map.values()]);
    //["one","two","three"]

    console.log([...map.entries()]);
    //[["1","one"],["2","two"],["3","three"]]

    console.log([...map]);
    //[["1","one"],["2","two"],["3","three"]]

2.配列をMapに変換
配列を配置関数に入力するとMapに変換できます.
配列のメンバーは二重要素配列です.

   const map = new Map([
        [1,"one"],
        [2, "two"],
        [3, "three"]
    ]);
//     Map{
//     1 => "one",
//     2 => "two",
//     3 => "three"
// }

配列のメンバーには単一要素配列があります.

   const map = new Map([
        [1],
        [2, "two"],
        [3, "three"]
    ]);
//     Map{
//     1 => undefined,
//     2 => "two",
//     3 => "three"
// }

配列のメンバーには3つの要素の配列があります.

   const map = new Map([
        [1，"one","_one"],
        [2, "two"],
        [3, "three"]
    ]);
//     Map{
//     1 => "one",
//     2 => "two",
//     3 => "three"
// }

3.Mapをオブジェクトに変換する
Mapのすべてのキーが文字列である場合、オブジェクトに変換できます.

   function strMapToObj(strMap) {
        let obj = Object.create(null);
        for (let [k, v] of strMap) {
            obj[k] = v;
        }
        return obj;
    }

    const myMap = new Map()
        .set('yes', true)
        .set('no', false)
    let a = strMapToObj(myMap);

    console.log(a)
    // { yes: true, no: false }

4.対象をMapに変換

   function objToStrMap(obj) {
        let strMap = new Map();
        for (let k of Object.keys(obj)) {
            strMap.set(k, obj[k]);
        }
        return strMap;
    }

    let a=objToStrMap({yes: true, no: false});

    console.log(a)
    // Map {"yes" => true, "no" => false}

5.MapをJSONに変換
Mapのキー名はすべて文字列です.
Mapを対象に変換し、JSON.strigify()を呼び出してオブジェクトJSONに変換します.

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

Mapのキー名には文字列以外の文字列があります.
Mapを配列に変換し、JSON.strigifyを呼び出して配列JSONに変換します.

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

6.JSONからMapに移行
対象のJSON(すべてのキー名は文字列)からMap:
JSON.parse()を呼び出して対象JSON(すべてのキーは文字列)を対象にし、その後対象をMapにします.

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

配列JSON(各配列メンバー自体が2つのメンバーを持つ配列)は、Mapに変換される:
JSON.parse()を呼び出して、配列JSONを配列に変え、その後、配列をMapの構造関数に導入する.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

配列メンバーには3つの要素の配列があります.3番目の要素は無視されます.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7,8],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

配列メンバーは単一要素の配列があります.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true],[{"foo":3},["abc"]]]')
// Map {true => undefined, Object {foo: 3} => ['abc']}

参考文献:『ECMAScript 6入門』阮一峰

jsでjsonArayを再帰する方法を樹形のjsonオブジェクトに変換します.