ES6的Map和Object区别

/*Map和Object
1、创建方式：
map:new Map()                                         ==>[[key,value],[key2,value2]]
object:Object.create(),{},new Object()三种方式创建     ==> {key,value}


2、键名 key
map的key任意值；object的key基本数据类型，是字符串。
对象key：解决同名属性问题；其实map键存的是内存地址堆中，引用同一个对象，地址不一样，key属性不一样


3、方法
map：        添加set;                取值get;    删除delete;                              检测是否有该映射has;     清空clear；  长度：个数size
object:添加obj.xx或者obj[xx],./[];   取值./[];   删除delete obj[xx]/obj[xx]=underfined;   obj[xx]=="xx"           遍历，置空；  Object.keys(obj1).length


new Map([iterable])
map可迭代，可用for...of遍历；object不能，会报错，for...in遍历


4、可展开
Map可以使用省略号语法展开，而Object不行


5、有序性
填入Map的元素，会保持原有的顺序，而Object无法做到。
填入Object的元素key是自动按照字符串排序的，数字排在前面


https://www.jianshu.com/p/94cf51649517
*/
//
/*
 4、可展开
let m = new Map()
m.set({ a: 1 }, 'hello,world')//dom对象作为键
m.set(['username'], 'jack')//数组作为键
m.set(true, 1)//boolean类型作为键


console.log([...m])//可以展开为二维数组


let obj = new Object()
obj['jack'] = 1
obj[0] = 2
obj[5] = 3
obj['tom'] = 4
console.log(obj, [...obj])//TypeError: obj is not iterable
 map可迭代；object不能，会报错
*/


// 5、有序性
let m = new Map()
m.set("cont", 'hello,world')//dom对象作为键
m.set(['username'], 'jack')//数组作为键
m.set(true, 1)//boolean类型作为键
//可以保持原有顺序打印
for (let [key, value] of m) {
  console.log(key)


}


let obj = new Object()
obj['jack'] = 1
obj[0] = 2
obj[5] = 3
obj['tom'] = 4
//填入Object的元素key是自动按照字符串排序的，数字排在前面
for (let k in obj) {
  console.log(k) // 0 5 jack tom
}

引申

Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性。

Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重

Iterator理解

Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念。

就好像JavaScript是ECMAScript标准的一种具体实现一样，Iterator标准的具体实现是Iterator遍历器。Iterator标准规定，所有部署了key值为[Symbol.iterator]，且[Symbol.iterator]的value是标准的Iterator接口函数(标准的Iterator接口函数: 该函数必须返回一个对象，且对象中包含next方法，且执行next()能返回包含value/done属性的Iterator对象)的对象，都称之为可遍历对象，next()后返回的Iterator对象也就是Iterator遍历器。

//obj就是可遍历的，因为它遵循了Iterator标准，且包含[Symbol.iterator]方法，方法函数也符合标准的Iterator接口规范。
//obj.[Symbol.iterator]() 就是Iterator遍历器
let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};
ES6给Set、Map、Array、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函数也符合标准的Iterator接口规范，所以Set、Map、Array、String默认都是可以遍历的。

//Array
let array = ['red', 'green', 'blue'];
array[Symbol.iterator]() //Iterator遍历器
array[Symbol.iterator]().next() //{value: "red", done: false}

//String
let string = '1122334455';
string[Symbol.iterator]() //Iterator遍历器
string[Symbol.iterator]().next() //{value: "1", done: false}

//set
let set = new Set(['red', 'green', 'blue']);
set[Symbol.iterator]() //Iterator遍历器
set[Symbol.iterator]().next() //{value: "red", done: false}

//Map
let map = new Map();
let obj= {map: 'map'};
map.set(obj, 'mapValue');
map[Symbol.iterator]().next()  {value: Array(2), done: false}