JavaScript高级程序设计(第4版)读书分享笔记记录

适用于刚入门前端的同志

Map

作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现，但二者之间还是存在一些细微的差异。

使用 new 关键字和 Map 构造函数可以创建一个空映射：

const m = new Map()

使用嵌套数组初始化映射

// 使用嵌套数组初始化映射
 const m1 = new Map([ 
  ["key1", "val1"], 
  ["key2", "val2"], 
  ["key3", "val3"] 
 ]);

方法：set()、get()、has()、delete()、clear()
set()方法返回映射实例，因此可以把多个操作连缀起来
属性：size

const m = new Map()

m.set('age',18)

//has()方法，如果存在键值就返回发生true，不存在就返回false
console.log( m.has('firstName') )  //false
console.log( m.has('age') ) // true

//get()方法,如果存在键值就返回键对应的值，不存在就返回undefined
console.log( m.get('firstName') ) //undefained
console.log( m.get('age') ) //18

//set()方法可以链式操作，set(键，值)
m.set("firstName", "Matt").set("lastName", "Frisbie")

//size属性
console.log(m.size) // 3

//delete()方法，删除某个键值对
m.delete('age')
console.log( m.has('age') ) // false
console.log(m.size) // 2

//clear()方法，清空对象
m.clear()
console.log(m.size) // 0

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

const m = new Map(); 


const functionKey = function() {}; 
const symbolKey = Symbol(); 
const objectKey = new Object(); 


m.set(functionKey, "functionValue"); 
m.set(symbolKey, "symbolValue"); 
m.set(objectKey, "objectValue"); 

alert(m.get(functionKey)); // functionValue 
alert(m.get(symbolKey)); // symbolValue 
alert(m.get(objectKey)); // objectValue

顺序与迭代

通过 entries() 方法（或者 Symbol.iterator 属性，它引用 entries() ）取得这个迭代器

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

alert(m.entries === m[Symbol.iterator]); // true 


for (let pair of m.entries()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3] 


for (let pair of m[Symbol.iterator]()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3]

keys() 和 values() 分别返回以插入顺序生成键和值的迭代器：

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

for (let key of m.keys()) { 
 console.log(key); 
} 
// key1 
// key2 
// key3 

for (let key of m.values()) { 
 console.log(key); 
} 
// value1 
// value2 
// value3

Objec和Map的比较

内存占用

Object 和 Map 的工程级实现在不同浏览器间存在明显差异，但存储单个键 /值对所占用的内存数量都会随键的数量线性增加。但给定固定大小的内存， Map 大约可以比 Object 多存储 50%的键/值对。

插入性能

Object 和 Map 中插入新键 / 值对的消耗大致相当，不过插入 Map 在所有浏览器中一般会稍微快一点儿。 如果代码涉及大量插入操作，那么显然 Map 的性能更佳

查找速度

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

删除性能

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

Set

ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。 Set 在很多方面都像是加强的 Map ，这是因为它们的大多数 API 和行为都是共有的。

使用 new 关键字和 Set 构造函数可以创建一个空集合：

const m = new Set();

使用数组初始化集合

// 使用数组初始化集合 
const s1 = new Set(["val1", "val2", "val3"]);

方法属性

方法： add()、has()、delete()、clear()

属性：size

const s = new Set();

s.add('Tom')

//has()  
console.log(s.has('Jerry')) //false
console.log(s.has('Tom')) //true

//size
console.log(s.size) // 1

//add()
s.add('Jerry').add('Mary')
console.log(s.size) // 3

//delete()
s.delete('Tom') 
console.log(s.size) // 2

//clear()
s.clear()
console.log(s.size) // 0

顺序与迭代

调用的迭代方法与map一致

const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) { 
 console.log(pair); 
} 
// ["val1", "val1"] 
// ["val2", "val2"] 
// ["val3", "val3"]

JavaScript高级程序设计读书分享之6章——Map&Set

Map

方法：set()、get()、has()、delete()、clear()

顺序与迭代

Objec和Map的比较

Set

方法属性

顺序与迭代

猜你喜欢