第一百一十五篇: JS集合引用类型Map

第一,百一,十五篇,js,集合,引用,类型,map · 浏览次数 : 149

小编点评

**JS高级程序设计第六章“集合引用类型”学习笔记 1.Map** **1.1.基本Api** * `new Map([…])` 初始化一个空Map。 * `map.size` 获取Map中键的数量。 **1.2.不同于Object与Object只能使用数值、字符串或符号作为键** * Map可以使用任何JavaScript数据类型作为键。 * `Map.get()` 可以使用任何JavaScript数据类型作为键。 **1.3.顺序与迭代与Object类型的一个主要差异** * Map实例会维护键值对的插入顺序。 * 通过`entries()`方法(或Symbol.iterator属性,它引用entries())可以取得这个迭代器。 **1.4.关于迭代过程中值的修改** * 键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。 * 当然,这并不妨碍修改作为键或值的对象内部的属性,因为这样并不影响它们在映射实例中的身份。 **2.选择 Object还是Map对于多数Web开发任务来说,选择 Object还是Map只是个人偏好问题,影响不大。** **2.1.内存占用Object和Map的工程级实现在不同浏览器间存在明显差异,但存储单个键/值对所占用的内存数量都会随键的数量线性增加。** **2.2.插入性能向Object和Map中插人新键/值对的消耗大致相当,不过插人Map在所有浏览器中一般会稍微快一点儿。** **2.3.查找速度与插入不同,从大型Object和Map中查找键/值对的性能差异极小,但如果只包含少量键/值对,则Object有时速度更快。** **2.4.删除性能使用delete删除object属性的性能一直以来饱受诟病,目前在很多浏览器中仍然如此。**

正文

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记

 

1.Map

ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。

但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定义了一个规范。
作为ECMAScript6的新增特性,Map是一种新的集合类型,为这门语言带来了真正的键/值存储机制

Map的大多数特性都可以通过Object类型实现,但二者之间还是存在一些细微的差异。

所以我们可以把Map理解为一个专门储存键/值对的一种数组

 

1.1.基本Api

1.1.1初始化:

let map = new Map([
    ["001", "panghu"],
    ["002", "xiaofu"],
    ["003", "daxiong"],
])

console.log(map,map.size)

 

 

 1.1.2.增删查改方法:

(1) set() :使用set方法添加键值对

(2) get() :使用get()查询键对应的值 (键作参数)

(3) has() :使用has()查询是否存在"键"(键作参数)

(4) delete(): 使用delete()删除一个键值对(键作参数) 

(5) clear(): 清除所有键值对

let map = new Map([
    ["001", "panghu"],
    ["002", "xiaofu"],
    ["003", "daxiong"],
])

console.log(map.has(001));
console.log(map.get(004));
console.log(map.set("004","jingxiang"));
console.log(map.delete("004"));
console.log(map);
map.clear();
console.log(map);

 

 

 

1.2.不同于Object

与Object只能使用数值、字符串或符号作为键不同,Map可以使用任何JavaScript数据类型作为键

Map内部使用SameValueZero比较操作(ECMAScript规范内部定义,语言中不能使用),基本上相当于使用严格对象相等的标准来检查键的匹配性。

与object类似,映射的值是没有限制的。

const map = new Map();

const f_key = function(){};
const s_key = Symbol();
const o_key = new Object();

map.set(f_key,"111"); 
map.set(s_key,"222");
map.set(o_key,"333");

console.log(map.get(f_key));
console.log(map.get(s_key));
console.log(map.get(o_key));

 

 

 

1.3.顺序与迭代

与Object类型的一个主要差异是,Map实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作
映射实例可以提供一个迭代器(Iterator),能以插入顺序生成[key,value]形式的数组。

可以通过entries()方法(或者Symbol.iterator属性,它引用entries())取得这个迭代器:

let map = new Map([
    ["001", "panghu"],
    ["002", "xiaofu"],
    ["003", "daxiong"],
]);

for(let pair of map.entries()){
    console.log(pair)
}

for(let pair of map[Symbol.iterator]()){
    console.log(pair)
}

 

 

 

 1.4.关于迭代过程中值的修改

 键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。

当然,这并不妨碍修改作为键或值的对象内部的属性,因为这样并不影响它们在映射实例中的身份

 

其中作为键的字符串原始值是不能修改的

let map = new Map([
    ["001", "panghu"],
]);

for(let key of map.keys()){
    key = "002";
    console.log(key);
    console.log(map.get("001"));
    console.log(map.get("002"));
}

 

 

 

修改作为键的对象的属性,但对象在映射内部仍然使用相同的值

const keyObj_1 = {id: '001'};
const keyObj_2 = {id: '002'};

let map = new Map([
    [keyObj_1, "panghu"],
    [keyObj_2, "xiaofu"],

]);

for(let key of map.keys()){
    console.log(key);
    key.id = '002';
    console.log(key);
    console.log(map.get(keyObj_1));
}
console.log(keyObj_2);

 

 

 (这脱裤子放屁的例子就是为了告诉你:改值并不会影响映射关系)

 

 

2.选择 Object还是Map

对于多数Web开发任务来说,选择 Object还是Map只是个人偏好问题,影响不大。

不过,对于在乎内存和性能的开发者来说,对象和映射之间确实存在显著的差别。


2.1.内存占用

Object和Map的工程级实现在不同浏览器间存在明显差异,但存储单个键/值对所占用的内存数量都会随键的数量线性增加。

批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。

不同浏览器的情况不同,但给定固定大小的内存,Map大约可以比object多存储50%的键/值对


2.2.插入性能

向Object和Map中插人新键/值对的消耗大致相当,不过插人Map在所有浏览器中一般会稍微快一点儿。

对这两个类型来说,插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作,那么显然Map的性能更佳


2.3.查找速度

与插入不同,从大型Object和Map中查找键/值对的性能差异极小,但如果只包含少量键/值对,则Object有时候速度更快。

在把object当成数组使用的情况下(比如使用连续整数作为属性),浏览器引擎可以进行优化,在内存中使用更高效的布局。

这对Map来说是不可能的。对这两个类型而言,查找速度不会随着键/值对数量增加而线性增加。

如果代码涉及大量查找操作,那么某些情况下可能选择Object更好一些


2.4.删除性能

使用delete删除object属性的性能一直以来饱受诟病,目前在很多浏览器中仍然如此。

为此,出现了一些伪删除对象属性的操作,包括把属性值设置为undefined或nul1。

但很多时候,这都是一种讨厌的或不适宜的折中。

而对大多数浏览器引擎来说,Map的delete()操作都比插入和查找更快

如果代码涉及大量删除操作,那么毫无疑问应该选择Map。

 

与第一百一十五篇: JS集合引用类型Map相似的内容:

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百一十八篇: JavaScript 原型链式继承

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。 重温一下构造函数、原型和实例的关系:每个构造函数

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百一十六篇: JavaScript理解对象

好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特定顺序的值。 对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值。正因为如此(以及其他还未讨论的原因),可以把 EC

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型