JS-Map vs Object

Map 对象保存键值对，任何值(对象或者原始值)都可以作为一个键或一个值。
Map 语法 var map = new Map(iterable)  // iterable[可迭代的]   参数可以是一个数组或者其它的 iterable 对象，其元素为键值对(两个元素的数组，例如: [[ 1, 'one' ],[ 2, 'two' ]])。 每个键值对都会添加到新的 Map。null 会被当做 undefined。

简单示例一：

var map = new Map( [[ 1, 'one' ],[ 2, 'two' ]]);
// Map(2) {1 => "one", 2 => "two"}
map.size;  // 2
typeof mm;  // "object"
mm instanceof Map; // true

错误写法示例：

var ml = new Map([1,2]);
// TypeError : Iterator value 1 is not an entry object

var ms= new Map({name:'lili',age:13});
// TypeError: #<Object> is not iterable

var mls = new Map([{name:'lili',age:12},{name:'lucy',age:12}])
// Map(1) {undefined => undefined}

一个 Map 对象在迭代时会根据对象中元素的插入顺序来进行一个 for ... of 循环，在每次迭代后会返回一个形式为[key , value]的数组。

Map 与 Object的区别：

相同点：

• 都允许按 键 存取一个值，删除键，检测一个键是否绑定了值

不同点：

Map 实例的方法

1.   entries 返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的 [key, value] 数组

   var map = new Map([['name','lili'],['age',13],['sex','girl']]); // 注意：name age sex 必须加引号
   map.entries((ele)=>{console.log(ele)})
   
   map.keys()

2. keys 返回一个新的 Iterator对象， 它按插入顺序包含了Map对象中每个元素的键

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);

3. get 返回键对应的值，如果不存在，则返回undefined

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   map.get('name') // 'LILI' //记得加引号

4. set 设置Map对象中键的值。返回该Map对象。

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   // Map(3) {"name" => "LILI", "age" => 12, "hobby" => Array(3)}

5. delete 如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   console.log(map)
   // Map(3) {"name" => "LILI", "age" => 12, "hobby" => Array(3)}
   
   map.delete('age')
   
   console.log(map)
   // Map(2) {"name" => "LILI", "hobby" => Array(3)}

6. clear 移除Map对象的所有键/值对 。

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   map.clear()
   
   console.log(map)
   // Map(0) {}

7. has   用来表明map 中是否存在指定元素, 返回一个bool值.

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   console.log(map.has('name'))
   // true

8. forEach 按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   map.forEach((value,key,map)=>{
       console.log(key + ' = ' + value )
   })
   // name = LILI
   // age = 12
   // hobby = 吃饭,睡觉,打豆豆

9. values  方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值

   var map = new Map();
   map.set('name','LILI');
   map.set('age',12);
   map.set('hobby',['吃饭','睡觉','打豆豆']);
   
   // 0: "LILI"
   // 1: 12
   // 2: Array(3)