js map數據結構

Map 對象保存鍵值對， 並且能夠記住鍵的原始插入順序。任何值(對象或者 原始值) 都可以作為一個鍵或一個值。 

map對象常用於保存鍵值對，它的鍵是任意數據類型，常用於建立數據的映射關系

和對象的區別：Object對象的key只能是字符串或者Symbol，map的key可是是任意數據類型;Map的key是有序的；map的鍵值對個數通過size屬性獲取，對象只能自己統計

new Map(params)構造函數params可以接收二維數組|null|undefined;注意傳入null|undefined其實也就相當於不傳參數,直接new Map()

1.初始化map對象的三種方式

  // 初始化map的三種方式 
  const map1 = new Map()
  map1.set(60, '及格')
  map1.set(80, '良')
  map1.set(90, '優秀')
  // 第二種方式 set方法返回的是當前map對象，因此可以采用鏈式寫法
  const map2 = new Map().set(60, '及格').set(80, '良').set(90, '優秀')
  // 傳入二維數組
  const map3 = new Map([[60, '及格'], [80, '良'], [90, '優秀'],])
  console.log(map3,map2);//Map { 60 => '及格', 80 => '良', 90 => '優秀' } 

 錯誤初始化map的形式。堅決不要使用[]來定義key-value

 

  let wrongMap = new Map()
  wrongMap['bla'] = 'blaa'
  wrongMap['bla2'] = 'blaaa2'
  console.log(wrongMap); //Map { bla: 'blaa', bla2: 'blaaa2' } 也是可以生成， 但是map的所有方法都不能使用，也就是這個錯誤的定義map對象方法
  console.log(wrongMap.size); //0
  console.log(wrongMap.get('bla')); //undefined

 2.map對象的key

 

  對同一個key進行多次賦值，后面值會覆蓋前面的值。說明map對象key唯一

  map對象的key是跟內存地址綁定的。引用數據類型需要指向同一個內存地址才是同一個key

  map對象key是基本數據類型，只要它們是嚴格相等=== map將其是作為同一個key

undefined 和 null是兩個不同的key

 

  let myMap = new Map();
  let keyObj = {};
  let keyFunc = function () { };
  let keyArr = []
  let keyString = 'a string';
  let strNum = '0'
  


  // 添加鍵
  myMap.set(keyString, "和鍵'a string'關聯的值");
  myMap.set(keyObj, "和鍵keyObj關聯的值");
  myMap.set(keyArr, "和鍵keyArr關聯的值");
  myMap.set(keyFunc, "和鍵keyFunc關聯的值");
  myMap.set(strNum, "和鍵strNum關聯的值");
  myMap.set(null,'和null key關聯的值')
  myMap.set(undefined,'和 undefined key關聯的值')


  console.log(myMap.get(keyObj)) //和鍵keyObj關聯的值
  console.log(myMap.get(keyArr)) //和鍵keyArr關聯的值
  console.log(myMap.get(keyFunc)) // 鍵keyFunc關聯的值
  console.log(myMap.get(strNum)) //和鍵strNum關聯的值
  console.log(myMap.get(keyString)) // 鍵'a string'關聯的值
  
  

  console.log(myMap.get({})); //undefined 
  console.log(myMap.get([])); //undefined
  console.log(myMap.get(function () { })); //undefined
  console.log(myMap.get(0)) //undefined
  console.log(myMap.get('a string')); // 鍵'a string'關聯的值
  console.log(myMap.get(null)); //和null key關聯的值
  console.log(myMap.get(undefined)); //和 undefined key關聯的值

 3.map對象的基本方法

size屬性，返回map的長度

 get (key) 返回鍵對應的值，如果不存在，則返回undefined。

 has(key) 返回一個布爾值，表示Map實例是否包含鍵對應的值。

  delete(key )如果 Map 對象中存在該元素，則移除它並返回 true；否則如果該元素不存在則返回 false。

 

const map1 = new Map()
  map1.set(60, '及格')
  map1.set(80, '良')
  map1.set(90, '優秀')
  map1.set(90, '有優秀')


  console.log(map1.has(60)) //true
  console.log(map1.has('60')) //false

  console.log(map1.delete(80)); //true 刪除已有的key 原map會改變，返回值true
  console.log(map1.size); //2
  console.log(map1.delete('80')); //false 刪除不存在的key 原map不改變，返回值false
  console.log(map1.size); //2

 

map對象的迭代

    

    map.values() 是一個可迭代對象 ,可迭代對象可以用for...of遍歷，也可以通過展開運算符轉為數組

    map.keys();  是一個可迭代對象，可迭代對象可以用for...of遍歷，也可以通過展開運算符轉為數組

    map    是一個可迭代對象，可迭代對象可以用for...of遍歷，也可以通過展開運算符轉為數組

     另外map對象還擁有forEach()遍歷方法

    map.forEach()遍歷 如果回調函數只傳一個參數 這個參數就是每次便利的map的值。如果傳2個參數，依次是value ,key

    for item of map 等價於 for item of map.entries() item是[key,value]一維數組組合（可是使用解構數組的技巧將其拆開）

    for value of map.values()   value是map對象的每一項的值

    for key of map.keys()   key是map對象的每一項的key

 

let [a, b, c] = [10, 20, 30]
// console.log(a, b, c); 10 20 30 數組解構的例子

for (const item of map1) {
  console.log(item);
}
//解構了item
for (const [key, value] of map1) {
  console.log(key, value);
}


for (const value of map1.values()) {
  console.log(value); //及格 | 良 |優秀
}

for (const key of map1.keys()) {
  console.log(key); //60  80  90
}

map1.forEach(value => console.log(value)) //如果回調函數只傳一個參數 這個參數就是每次便利的map的值
map1.forEach((value, key) => {
  console.log(value, key);
})

console.log([...map1]); //[ [ 60, '及格' ], [ 80, '良' ], [ 90, '優秀' ] ]
console.log([...map1.values()]); //[ '及格', '良', '優秀' ]
console.log([...map1.keys()]); //[ 60, 80, 90 ]

map對象的合並

  let first = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]);

  let second = new Map([
    [1, 'uno'],
    [2, 'dos']
  ]);

  // 兩個map對象合並，如果有重復的key,后面的key會覆蓋前面的
  let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
  console.log(res);

 

map對象復制

重要：請記住，數據本身未被克隆。

let original = new Map([
  [1, 'one']
]);

let clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false. 淺比較 不為同一個對象的引用

 map對象改變形式 實現過濾或者新map

  // 初始化map的三種方式 
  const map1 = new Map()
  map1.set(60, '及格')
  map1.set(80, '良')
  map1.set(90, '優秀')
  
  // map實現過濾和改變數據形式
  // new Map([...map1].filter([key, value]=> key > 60))
  let res = [...map1].filter(([key, value]) => key > 60)
  const map2 = new Map(res) //Map { 80 => '良', 90 => '優秀' }
  // 一步到位
  new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '優秀' }
  // console.log(res1);

  let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
  console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '優秀~~~' }