在本教程中,您将借助示例了解 JavaScript Maps 和 WeakMaps。 JavaScript ES6 引入了两个新的数据结构,即 Map
和 WeakMap
。
Map与JavaScript中的对象相似,后者使无涯教程可以将元素存储在键/值(key/value)对中。
Map中的元素按插入顺序插入。但是,与对象不同,Map可以包含对象,函数和其他数据类型作为键。
要创建Map
,无涯教程使用new Map()
构造函数。例如,
// 创建Map
const map1 = new Map();//空Map
console.log(map1);//Map {}
创建Map后,可以使用set()
方法向其中插入元素。例如,
// 创建一个Set集合
let map1 = new Map();
// insert key-value pair
map1.set('info', {name: 'Jack', age: 26});
console.log(map1);//Map {"info" => {name: "Jack", age: 26}}
您也可以将对象或函数用作键。例如,
// Map with object key
let map2 = new Map();
let obj = {};
map2.set(obj, {name: 'Jack', age: "26"});
console.log(map2);//Map {{} => {name: "Jack", age: "26"}}
您可以使用 get()
方法访问 Map
元素。例如,
let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});
// 访问 Map 的元素
console.log(map1.get('info'));//{name: "Jack", age: "26"}
您可以使用 has()
方法检查元素是否在Map中。例如,
const set1 = new Set([1, 2, 3]);
let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});
// 检查元素是否在 Set 中
console.log(map1.has('info'));//true
您可以使用 clear()
和 delete()
方法从Map中删除元素。
如果指定的键/值对存在并且已被删除,则 delete()
方法返回 true
,否则返回 false
。例如,
let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});
// 删除特定元素
map1.delete('address');//false
console.log(map1);//Map {"info" => {name: "Jack", age: "26"}}
map1.delete('info');//true
console.log(map1);//Map {}
clear()
方法从Map对象中删除所有键/值对。例如,
let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});
// 删除所有元素
map1.clear();//false
console.log(map1);//Map {}
您可以使用 size
属性获取Map中的元素数量。例如,
let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});
console.log(map1.size);//1
您可以使用 for ... of 循环或forEach()方法。元素按插入顺序进行访问。例如,
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');
//遍历Map
for (let [key, value] of map1) {
console.log(key + '- ' + value);
}
输出
name- Jack age- 27
您还可以使用forEach()
方法获得与上述程序相同的结果。例如,
// 使用 forEach 方法()
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');
// 遍历Map
map1.forEach(function(value, key) {
console.log(key + '- ' + value)
})
您可以遍历Map并使用keys()
方法获取键。例如,
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');
// 循环遍历Map
for (let key of map1.keys()) {
console.log(key)
}
输出
name
age
您可以遍历Map并使用values()
方法获取值。例如,
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');
// 循环遍历Map
for (let values of map1.values()) {
console.log(values);
}
输出
Jack 27
您可以使用 entries()
方法遍历Map并获取Map的键/值。例如,
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');
// looping through the Map
for (let elem of map1.entries()) {
console.log(`${elem[0]}: ${elem[1]}`);
}
输出
name: Jack age: 27
Map | Object |
---|---|
Map可以包含对象和其他数据类型作为键。 | 对象只能包含字符串和符号作为键。 |
可以直接迭代Map,并可以访问其值。 | 可以通过访问其键来迭代对象。 |
Map的元素数量可以通过 size 属性确定。 | 对象的元素数量需要手动确定。 |
对于需要频繁添加或删除元素的程序,Map的性能更好。 | 如果程序需要频繁添加或删除元素,则对象的性能将不佳。 |
WeakMap类似于Map。但是,WeakMap只能包含对象作为键。例如,
const weakMap = new WeakMap();
console.log(weakMap);//WeakMap {}
let obj = {};
// 将对象(元素)添加到 WeakMap
weakMap.set(obj, 'hello');
console.log(weakMap);//WeakMap {{} => "hello"}
当您尝试添加除对象之外的其他数据类型时,WeakMap会引发错误。例如,
const weakMap = new WeakMap();
// 将字符串作为键添加到 WeakMap
weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap具有方法get()
, set()
, delete()
和 has()
。例如,
const weakMap = new WeakMap();
console.log(weakMap);//WeakMap {}
let obj = {};
// 将对象(元素)添加到 WeakMap
weakMap.set(obj, 'hello');
console.log(weakMap);//WeakMap {{} => "hello"}
// 获取 WeakMap 的元素
console.log(weakMap.get(obj));//hello
// 检查 WeakMap 中是否存在元素
console.log(weakMap.has(obj));//true
// 删除WeakMap的元素
console.log(weakMap.delete(obj));//true
console.log(weakMap);//WeakMap {}
与Maps不同,WeakMaps是不可迭代的。例如,
const weakMap = new WeakMap();
console.log(weakMap);//WeakMap {}
let obj = {};
// 将对象(元素)添加到 WeakMap
weakMap.set(obj, 'hello');
// 循环遍历 WeakMap
for (let i of weakMap) {
console.log(i); //TypeError
}
在 ES6 中引入了JavaScript Map
和 WeakMap
。某些浏览器可能不支持其使用。要了解更多信息,请访问 JavaScript Map 支持和 JavaScript WeakMap 支持。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)