类型“unknown”上不存在属性“foreach”_JavaScript红宝书第四版精简解析系列--映射Map数据类型...

Map数据类型

顾名思义

也就是映射类型,包含一个[[Entries]]私有特性

我们可以使用一个二维数组作为初始值

 const map1 = new Map([
        [1, 1],
        [2, 2],
        [3, 3],
 ]);
console.log("Map数据类型====>", map1);

当然也可以使用迭代器进行初始化

const map2 = new Map({
     [Symbol.iterator]: function* () {
        yield* [
          [1, 1],
          [2, 2],
          [3, 3],
        ];
      },
   });
 console.log("Map数据类型====>", map2);

我们来看一下Map数据类型内部结构(着重看下私有特性)

我们可以看到,Map数据类型包含了一个[[Entries]]私有特性

这个特性中可以看到一个清晰的映射关系

而在Map数据类型的原型上还挂在了很多方法

诸如 get set delete clear等操作方法

还有一个关于size属性的get访问器特性

另外,我们还可以清晰地看到

Map数据类型包含着迭代器属性,且迭代方法默认为entries()

我们首先来学习一下关于Map的操作方法

---

.set()

  const emptyMap = new Map();
  console.log("emptyMap====>", emptyMap);
  emptyMap.set('name', 'shang')
  console.log("set结果====>", emptyMap);

新增映射关系

由于set方法会返回被操作的Map数据,所以可以链式调用

 emptyMap.set("gender", "male").set("age", 17);
 console.log("set结果====>", emptyMap);

可以链式调用

.get()

console.log('get方法====>', emptyMap.get('name')

通过键获取映射值

.has()

 console.log('has方法====>', emptyMap.has('name'))

通过has方法检验映射是否存在

.delete()

emptyMap.delete('name')
console.log("delete结果====>", emptyMap);

使用delete删除一个映射

.clear()

 emptyMap.clear()
 console.log("emptyMap的size====>", emptyMap.size);

clear后,所有映射关系都被清除了

---

Map数据类型可以接受各种类型的作为键

这里我们测试一下,function, Symbol 以及Object类型

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

 emptyMap.set(functionKey, functionKey).set(symbolKey, symbolKey).set(objectKey, objectKey)
 console.log('各种特殊键值对===>', emptyMap)

---

复杂类型作为键值时,Map类型并不保存快照,而是保存指针

这句话听起来挺唬人

but其实理解起来很简单

我举个例子

const emptyArr = [];
const emptyObj = {};
emptyMap.set(emptyArr, emptyObj);
emptyArr.push("1");
emptyObj.name = "shang";
console.log("复杂类型特殊键值对===>", emptyMap);
console.log("复杂类型特殊值===>", emptyMap.get(emptyArr));

---

顺序维护和迭代方法

Map会自动维护关于元素的顺序

而且从上面Map数据类型原型链我们可以得知

Map数据类型包含一个默认方法为entries的迭代器

console.log('Map数据类型默认迭代器', 
   emptyMap.entries === emptyMap[Symbol.iterator])

forof

for (const [key, value] of emptyMap) {
     console.log("forof映射元素分别为===>", key, value);
}

Map可以使用forof方法展开迭代

拓展运算符

console.log("拓展运算符用于Map数据类型", [...emptyMap]);

拓展运算符与forof公用迭代器

forEach方法

emptyMap.forEach((value, key) => {
        console.log("forEach映射元素分别为===>", key, value);
});

Map关于forEach的迭代效果与数组类似,value在前,key在后

---

Map使用values & keys 返回映射的迭代器

keys返回映射关于key的迭代器
可以用于forof 拓展运算符 Map Set等等

// Map使用values & keys 返回映射的迭代器
const keysIterator = emptyMap.keys();
console.log("Map的keys的迭代器===>", keysIterator);
for (const iterator of keysIterator) {
     console.log("keysIterator===>", iterator);
}

values返回映射关于value的迭代器
可以用于forof 拓展运算符 Map Set等等

const valuesIterator = emptyMap.values();
console.log("Map的values的迭代器===>", valuesIterator);
for (const iterator of valuesIterator) {
     console.log("valuesIterator===>", iterator);
}

---

Map相较于Object有何优缺点???

数据类型	占用内存	插入数据	删除数据	查数据
Map	同等数据量比Object少占50%内存	插入更快,更省性能	删除更快,更省性能	×
Object	×	×	×	有线性优化,查找更快,数据量越大查找优势越明显