Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、概述
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。
Map 对象是键值对的集合。Map 中的一个键只能出现一次;它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of 循环在每次迭代后会返回一个形式为 [key,value] 的数组。
// 实例化一个 Map 对象 const map1 = new Map(); // set() 方法在 Map 对象中设置与指定的键 key 关联的值,并返回 Map 对象。 map1.set('a', 1); map1.set('b', 2); map1.set('c', 3); // get() 方法返回与指定的键 key 关联的值,若不存在关联的值,则返回 undefined。 console.log(map1.get('a')); // expected output: 1 map1.set('a', 97); console.log(map1.get('a')); // expected output: 97 // size 属性返回 Map 对象中的键值对数量 console.log(map1.size); // expected output: 3 //delete() 方法用于移除 Map 对象中指定的键值对,如果键值对存在并成功被移除,返回 true,否则返回 false。 map1.delete('b'); console.log(map1.size); // expected output: 2
二、实例属性
Map.prototype.size 返回 Map 对象中的键值对数量。
三、实例方法
Map.prototype.set()在 Map 对象中设置与指定的键 key 关联的值,并返回 Map 对象。
Map.prototype.get()返回与指定的键 key 关联的值,若不存在关联的值,则返回 undefined。
Map.prototype.has()返回一个布尔值,用来表明 Map 对象中是否存在与指定的键 key 关联的值。
Map.prototype.delete()移除 Map 对象中指定的键值对,如果键值对存在并成功被移除,返回 true,否则返回 false。调用 delete 后再调用 map.has(key) 将返回 false。
Map.prototype.clear()移除 Map 对象中所有的键值对。
Map.prototype.keys()返回一个新的迭代对象,其中包含 Map 对象中所有的键,并以插入 Map 对象的顺序排列。
Map.prototype.values()返回一个新的迭代对象,其中包含 Map 对象中所有的值,并以插入 Map 对象的顺序排列。
Map.prototype.entries()返回一个新的迭代对象,其为一个包含 Map 对象中所有键值对的 [key, value] 数组,并以插入 Map 对象的顺序排列。
Map.prototype.forEach()以插入的顺序对 Map 对象中存在的键值对分别调用一次 callbackFn。如果给定了 thisArg 参数,这个参数将会是回调函数中 this 的值。
四、for…of 迭代Map
const myMap = new Map(); myMap.set(0, 'zero'); myMap.set(1, 'one'); for (const [key, value] of myMap) { console.log(`${key} = ${value}`); } // 0 = zero // 1 = one for (const key of myMap.keys()) { console.log(key); } // 0 // 1 for (const value of myMap.values()) { console.log(value); } // zero // one for (const [key, value] of myMap.entries()) { console.log(`${key} = ${value}`); } // 0 = zero // 1 = one
五、Map与数组的关系
const kvArray = [['key1', 'value1'], ['key2', 'value2']]; // 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象 const myMap = new Map(kvArray); console.log(myMap.get('key1')); // "value1" // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组 // 更简洁的方法来做如上同样的事情,使用展开运算符 console.log([...myMap]); // 或者在键或者值的迭代器上使用 Array.from,进而得到只含有键或者值的数组 console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]
六、Map对象合并
Map 对象之间的合并
const first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); const second = new Map([ [1, 'uno'], [2, 'dos'] ]); // 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的。 // 展开语法本质上是将 Map 对象转换成数组。 const merged = new Map([...first, ...second]); console.log(merged.get(1)); // uno console.log(merged.get(2)); // dos console.log(merged.get(3)); // three
Map 对象与数组的合并
const first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); const second = new Map([ [1, 'uno'], [2, 'dos'] ]); // Map 对象同数组进行合并时,如果有重复的键值,则后面的会覆盖前面的。 const merged = new Map([...first, ...second, [1, 'eins']]); console.log(merged.get(1)); // eins console.log(merged.get(2)); // dos console.log(merged.get(3)); // three