深圳住房和建设局网站 招标,wordpress 上线,成都网页设计培训学校哪家好,个人网站欣赏的网站JavaScript高级程序设计(第4版)读书分享笔记记录 适用于刚入门前端的同志 Map 作为 ECMAScript 6 的新增特性#xff0c;Map 是一种新的集合类型#xff0c;为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现#xff0c;但二者之间还是存在… 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]
