ES6 - Map对象

ES6 - Map对象 首页 / ES6入门教程 / ES6 - Map对象

在本教程中,您将借助示例了解 JavaScript Maps 和 WeakMaps。 JavaScript ES6 引入了两个新的数据结构,即 Map WeakMap

Map与JavaScript中的对象相似,后者使无涯教程可以将元素存储在键/值(key/value)对中。

Map中的元素按插入顺序插入。但是,与对象不同,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 {}

Map大小

您可以使用 size 属性获取Map中的元素数量。例如,

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

console.log(map1.size);//1

遍历Map

您可以使用 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键

您可以遍历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值

您可以遍历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 Vs Object

MapObject
Map可以包含对象和其他数据类型作为键。对象只能包含字符串和符号作为键。
可以直接迭代Map,并可以访问其值。可以通过访问其键来迭代对象。
Map的元素数量可以通过 size 属性确定。对象的元素数量需要手动确定。
对于需要频繁添加或删除元素的程序,Map的性能更好。如果程序需要频繁添加或删除元素,则对象的性能将不佳。

WeakMap

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方法

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 {} 

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 支持

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

代码精进之路 -〔范学雷〕

数据分析实战45讲 -〔陈旸〕

Swift核心技术与实战 -〔张杰〕

研发效率破局之道 -〔葛俊〕

分布式数据库30讲 -〔王磊〕

零基础入门Spark -〔吴磊〕

全链路压测实战30讲 -〔高楼〕

朱涛 · Kotlin编程第一课 -〔朱涛〕

徐昊 · TDD项目实战70讲 -〔徐昊〕

好记忆不如烂笔头。留下您的足迹吧 :)