ECMAScript6中Map/WeakMap详解

 更新时间:2015年06月12日 10:44:35   投稿:hebedich  
这篇文章主要介绍了ECMAScript6中Map/WeakMap详解的相关资料,需要的朋友可以参考下

JS的对象本身就是个键值结构,ES6为什么还需要加Map呢,它与普通的JS对象有何区别?

一、Map

1. Map构造器

先看Map的简单用法

// 字符串作为key, 和JS对象类似
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // John
map.get('age') // 29

这么对代码,看起来确实没有JS对象简洁

但Map的强大之处在于它的key可以是任意类型

// 对象作为key演示
var xy = {x: 10, y: 20}  // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'

以上演示了用对象作为key的Map。以下为图示

Map构造器还支持传数组方式

var map = new Map([["name", "John"], ["age", "29"]])
 
// 遍历key
for (var key of map.keys()) {
  console.log(key) // name, age
}

2. 迭代

和Set一样用for of来迭代Map,键调用map.keys(),值调用map.values(),键值实体调用map.entries()

var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
 
// 遍历key
for (var key of map.keys()) {
  console.log(key)
}
 
// 遍历value
for (var val of map.values()) {
  console.log(val)
}
 
// 遍历实体
for (var arr of map.entries()) {
  console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
 
// 遍历实体的简写
for (var [key, val] of map.entries()) {
  console.log('key: ' + key + ', value: ' + val)
}
 

3. 方法和属性

二、WeakMap

与Map的区别

不接受基本类型的值作为键名
没有keys、values、entries和size
有以下方法

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • HTML+JavaScript实现筋斗云导航栏效果

    HTML+JavaScript实现筋斗云导航栏效果

    这篇文章主要为大家介绍了如何利用HTML+JavaScript+CSS实现筋斗云导航栏效果,当鼠标经过某个li,筋斗云跟着到当前的位置,感兴趣的小伙伴可以试一试
    2022-03-03
  • JS遍历对象属性的方法示例

    JS遍历对象属性的方法示例

    这篇文章主要介绍了JS遍历对象属性的方法,涉及JS针对页面元素属性遍历操作的相关技巧,需要的朋友可以参考下
    2017-01-01
  • 微信小程序的授权实现过程解析

    微信小程序的授权实现过程解析

    这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • webpack-dev-server 的 host 配置 0.0.0.0的方法

    webpack-dev-server 的 host 配置 0.0.0.0的方法

    这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下
    2024-01-01
  • JS(JQuery)操作Array的相关方法介绍

    JS(JQuery)操作Array的相关方法介绍

    本篇文章主要是对JS(JQuery)操作Array的相关方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 如何消除inline-block属性带来的标签间间隙

    如何消除inline-block属性带来的标签间间隙

    这篇文章主要介绍了如何消除inline-block属性带来的标签间间隙的相关资料,需要的朋友可以参考下
    2016-03-03
  • 纯JavaScript实现猜数字游戏

    纯JavaScript实现猜数字游戏

    这篇文章主要为大家详细介绍了纯JavaScript实现猜数字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • bootstrap table复杂操作代码

    bootstrap table复杂操作代码

    这篇文章主要为大家详细介绍了bootstrap table复杂操作代码,生成外层表格,填充表格内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS组件Bootstrap导航条使用方法详解

    JS组件Bootstrap导航条使用方法详解

    这篇文章主要为大家详细介绍了JS组件Bootstrap导航条的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • jsonp跨域请求实现示例

    jsonp跨域请求实现示例

    本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论