JavaScript_Map

1. Map 是什么?

Map对象保存键值对,并且能够记住键的原始插入顺序

  • 循环遍历

    for...of
    
  • 键的相等:

    1.NaN !=== NaN
    2.其余值根据 === 运算符判断
    3.-0 === + 0

2. Objects 与 maps 的比较

3. 相关API

  • 构造函数
    Map() 创建Map对象
  • 属性:
    • Map.length()
    • Map.prototype.size()
let myMap = new Map();

let keyObj = {
    
    };
let keyFunc = function() {
    
    };
let keyString = 'a string';

// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");

myMap.size; // 3

// 读取值
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"

myMap.get('a string');   // "和键'a string'关联的值"
                         // 因为keyString === 'a string'
myMap.get({
    
    });           // undefined, 因为keyObj !== {}
myMap.get(function() {
    
    }); // undefined, 因为keyFunc !== function () {}
  • NaN 作为Map键
let myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

let otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

  • 使用for…of方法迭代Map
let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (let [key, value] of myMap) {
    
    
  console.log(key + " = " + value);
}
// 将会显示两个log。一个是"0 = zero"另一个是"1 = one"

for (let key of myMap.keys()) {
    
    
  console.log(key);
}
// 将会显示两个log。 一个是 "0" 另一个是 "1"

for (let value of myMap.values()) {
    
    
  console.log(value);
}
// 将会显示两个log。 一个是 "zero" 另一个是 "one"

for (let [key, value] of myMap.entries()) {
    
    
  console.log(key + " = " + value);
}
// 将会显示两个log。 一个是 "0 = zero" 另一个是 "1 = one"
  • 使用forEach()方法迭代
myMap.forEach(function(value, key) {
    
    
  console.log(key + " = " + value);
})
// 将会显示两个logs。 一个是 "0 = zero" 另一个是 "1 = one"

let myMap = new Map()
myMap.set('bla','blaa')
myMap.set('bla2','blaa2')
console.log(myMap)  // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' }

myMap.has('bla')    // true
myMap.delete('bla') // true
console.log(myMap)  // Map { 'bla2' => 'blaa2' }

4. 参考文档

Map

Guess you like

Origin blog.csdn.net/mango660/article/details/119218483