前言

这里介绍一些map和weakmap的一些属性和他们不同之处。

正文

map

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制.

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

const m = new Map();
const o = {p: 'Hello World'}; m.set(o, 'content')
m.get(o) // "content" m.has(o) // true
m.delete(o) // true
m.has(o) // false

Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([
['name', '张三'],
['title', 'Author']
]); map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

如果对同一个键多次赋值,后面的值将覆盖前面的值。

const map = new Map();
map.set(1, 'aaa').set(1, 'bbb');
map.get(1) // "bbb"

实例的属性和操作方法:

(1)size 属性

(2)set(key, value)

(3)get(key)

(4)has(key)

(5)delete(key)

(6)clear()

{
let map = new Map();
map.set('foo', 11);
map.set('bar', 22);
map.size ;// 2
map.get('foo');//t1
map.has('boo'); //true
map.delete('foo'); //true
map.clear();
map.size // 0
}

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys():返回键名的遍历器。

values():返回键值的遍历器。

entries():返回所有成员的遍历器。

forEach():遍历 Map 的所有成员。

Map 结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。

WeakMap

WeakMap结构与Map结构类似,也是用于生成键值对的集合。

WeakMap与Map的区别有两点。

首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。

其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2 // WeakMap 也可以接受一个数组,
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap 的语法

WeakMap 与 Map 在 API 上的区别主要是两个,

一是没有遍历操作(即没有keys()、values()和entries()方法),也没有size属性。

二是无法清空,即不支持clear方法。因此,WeakMap只有四个方法可用:get()、set()、has()、delete()。

js es6 map weakmap的更多相关文章

  1. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  2. ES6 Map/WeakMap

    最近项目用ES6来写,许多语法都要逐步熟悉呀,今天收藏下Map用法 1.Map构造器 // 字符串作为key, 和JS对象类似 var map = new Map() // set map.set(' ...

  3. ES6通过WeakMap解决内存泄漏问题

    一.Map 1.定义 Map对象保存键值对,类似于数据结构字典:与传统上的对象只能用字符串当键不同,Map对象可以使用任意值当键. 2.语法 new Map([iterable]) 属性 size:返 ...

  4. es6 & map & set

    es6 & map & set Map & WeakMap https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re ...

  5. js模拟Map对象,实现key---value

    js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...

  6. Js中Map对象的使用

    Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...

  7. ES6 & Map & hashMap

    ES6 & Map & hashMap 01 two-sum https://leetcode.com/submissions/detail/141732589/ hashMap ht ...

  8. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  9. 项目中一次排序规则的改动,注意到js中map的遍历的顺序

    背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...

  10. ES6 map与filter

    ES6 map与filter 1.map let arr1 = [1,2,3]; let arr2 = arr1.map((value,key,arr) => { console.log(val ...

随机推荐

  1. Java 小练习(3) 方法的修改+ 调用

    1 package com.bytezero.exer; 2 3 public class ExerTest 4 { 5 public static void main(String[] args) ...

  2. kafka 为什么能那么快?高效读写数据,原来是这样做到的

    1. 利用 Partition 实现并行处理 我们都知道 Kafka 是一个 Pub-Sub 的消息系统,无论是发布还是订阅,都要指定 Topic. Topic 只是一个逻辑的概念.每个 Topic ...

  3. Codeforces Round 787 (Div. 3)D. Vertical Paths

    题目链接 题意:给定一棵树,将这棵树划分成几天互不相交的链,要求最小化链的数量 思路:每个叶子节点一定在一条链中,所以链的数量就是叶子节点的数量,从叶子节点往上跳直到根节点,边跳边标记,路径上所有点都 ...

  4. elementPlus使用el-icon

    按着文档来撒 yarn add @element-plus/icons-vue main.ts import * as ElementIcons from '@element-plus/icons-v ...

  5. 使用C#创建服务端Web API

    前言 C# Web API 是一种基于 .NET 平台(包括但不限于.NET Framework 和 .NET Core)构建 HTTP 服务的框架,用于创建 RESTful Web 服务.REST( ...

  6. 孔夫子旧书网书籍信息得爬取并保存为json,csv,excel多种文件格式

    python版本:3.7 需要得引入得包: from selenium import webdriver from selenium.common.exceptions import TimeoutE ...

  7. 海词 dict.cn 有 词义饼状分布图 和 词性饼状分布图 - 词典推荐

    海词 dict.cn 有 词义饼状分布图 和 词性饼状分布图 http://dict.cn/like

  8. Android resource DarkActionBar not found问题解决

    原文: Android resource DarkActionBar not found问题解决 | Stars-One的杂货小窝 几天没改过的代码,突然就无法打开项目了 报错信息如下 在全网都找不到 ...

  9. drf(视图组件)

    一. 前言 Django REST framwork 提供的视图的主要作用 1. 控制序列化器的执行(检验.保存.转换数据) 2. 控制数据库查询的执行 二. 两个视图基类 两个视图基类: APIVi ...

  10. WebView开源库终极方案

    目录介绍 01.前沿说明 1.1 案例展示效果 1.2 该库功能和优势 1.3 相关类介绍说明 1.4 WebView知识点 02.如何使用 2.1 如何引入 2.2 最简单使用 2.3 常用api ...