JavaScript中的Json、Map、Set

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

问题

之前在一个项目中，需要根据申请的部门来获取对应的邮箱地址，想当然的使用了Map对象，结果在调试中完全没有问题，却在实际使用上失效了，查看了下后台log，提示获取到的邮箱地址是undefined。

排查及原因

经过百度之后发现原来JS的Map对象的浏览器支持不好，虽然很多地方写IE11开始支持，但其实IE11是不支持new Map()这种方式新建的。

map_ie

详见如下链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#浏览器兼容

于是我把换成了用Json对象，果然就解决了。

所以尽量还是用Json吧。

总结

Map对象

JS的Map存放的是键值对，key值不允许重复。特别要注意的是在一些旧的浏览器中并不支持Map对象。

  • 基本使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 新建Map对象
    > m = new Map()
    Map {}
    // 新增Map键值对
    > m.set('key1','value1')
    Map { 'key1' => 'value1' }
    // 获取Map中的key值
    > m.get('key1')
    'value1'
    // 判断是否存在某key
    > m.has('key1')
    true
    > m.set('key2','value2')
    Map { 'key1' => 'value1', 'key2' => 'value2' }
    // 删除某键值对
    > m.delete('key1')
    true
    > m
    Map { 'key2' => 'value2' }
    // 清空Map对象
    > m.clear()
    undefined

  • 遍历

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    > m.set('key1','value1')
    Map { 'key1' => 'value1' }
    > m.set('key2','value2')
    Map { 'key1' => 'value1', 'key2' => 'value2' }
    > m.forEach(function (value, key, map) {
    ... console.log(key + ":" + value)
    ... })
    key1:value1
    key2:value2
    undefined

Set对象

Set对象可以理解为没有值的Map对象，一般用于存放一个不允许重复的列表

  • 基本使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 新建Set对象
    > s = new Set()
    Set {}
    // 新增Set值
    > s.add('key1')
    Set { 'key1' }
    > s.add('key2')
    Set { 'key1', 'key2' }
    // 删除某值
    > s.delete('key1')
    true
    > s
    Set { 'key2' }
    // 清空Set对象
    > s.clear()
    undefined
    > s
    Set {}

  • 遍历

    Set对象的礼遍历和Map基本一样，但是由于Set对象没有value值，所以遍历的时候key和value是一样的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    > s.add('key1')
    Set { 'key1' }
    > s.add('key2')
    Set { 'key1', 'key2' }
    > s.forEach(function (value, key, set) {
    ... console.log(key + ":" + value)
    ... })
    key1:key1
    key2:key2
    undefined

Json对象

  • 基本使用

    1
    2
    3
    4
    5
    6
    \\ 新建Json对象
    > let currencyItems = { '人民币': 1, '港币': 0.88, '澳门元': 0.86, '新台币': 0.2241, '美元': 6.905, '日元': 0.06, '英镑': 8.69, '欧元': 7.8, '韩元': 0.006, '泰铢': 0.21, '新西兰元': 4.69, '澳大利亚元': 4.96, '菲律宾比索': 0.13, '加拿大元': 5.16, '瑞士法郎': 6.92, '瑞典克朗': 0.76, '丹麦克朗': 1.05, '挪威克朗': 0.8 }
    undefined
    \\ 获取Json对象某值
    > currencyItems['人民币']
    1

  • 获取Json对象的所有Key值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    > Object.keys(currencyItems)
    [ '人民币',
      '港币',
      '澳门元',
      '新台币',
      '美元',
      '日元',
      '英镑',
      '欧元',
      '韩元',
      '泰铢',
      '新西兰元',
      '澳大利亚元',
      '菲律宾比索',
      '加拿大元',
      '瑞士法郎',
      '瑞典克朗',
      '丹麦克朗',
      '挪威克朗' ]

  • 获取Json对象的长度

    1
    2
    > Object.keys(currencyItems).length
    18

  • 遍历

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    > for ( var i in currencyItems) {
    ... console.log(i + ":" + currencyItems[i])
    ... }
    人民币:1
    港币:0.88
    澳门元:0.86
    新台币:0.2241
    美元:6.905
    日元:0.06
    英镑:8.69
    欧元:7.8
    韩元:0.006
    泰铢:0.21
    新西兰元:4.69
    澳大利亚元:4.96
    菲律宾比索:0.13
    加拿大元:5.16
    瑞士法郎:6.92
    瑞典克朗:0.76
    丹麦克朗:1.05
    挪威克朗:0.8
    undefined