ES6新增 Map

其他 2018-11-24 16:16:43 阅读次数: 0

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

为了解决这个问题ES6提供了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"
// }

如果传入的数组成员是存在三个元素的数组，则会忽略第三个元素：

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)

set方法设置键名（key）对应的键值（value），返回Map结构。如果设置的key已经有值，则键值会被更新。由于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方法（在Set结构中默认遍历器生成函数是它的values方法）。

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"
// }
数组的成员存在三个元素的数组：
   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.stringify()转化为对象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.stringify()转化为数组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（每个数组成员本身是一个具有两个成员的数组）转为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']}

数组成员存在三个元素的数组，则忽略第三个元素：

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']}

猜你喜欢

转载自blog.csdn.net/weixin_42695446/article/details/84405372
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022