JavaScript Map（映射）和Object（对象）的区别和联系

Map和Object的区别

1.键值

Object :键值只能是字符串和symbol
Map: 键值可以使任意属性，Object也可以

2. 创建方式

Object:

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

Map:

// 键值对 [key, value] 数组
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
//或者通过调用 map.set()添加键值对，链式调用：每一次 map.set 调用都会返回 map 本身，所以我们可以进行“链式”调用
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

3.获取属性方式

Object:

对象通过 obj.key 或者用obj[key] 获取属性值

Map：

map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined

4.迭代方式

Object:

为了遍历一个对象的所有键（key），可以使用一个特殊形式的循环：for…in

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

Map：

如果要在 map 里使用循环，可以使用以下三个方法：

• map.keys() —— 遍历并返回所有的键（returns an iterable for keys），
• map.values() —— 遍历并返回所有的值（returns an iterable for values），
• map.entries() —— 遍历并返回所有的实体（returns an iterable for entries）[key, value]，for…of 在默认情况下使用的就是这个。

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 遍历所有的键（vegetables）
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 遍历所有的值（amounts）
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// 遍历所有的实体 [key, value]
for (let entry of recipeMap) { // 与 recipeMap.entries() 相同
  alert(entry); // cucumber,500 (and so on)
}

迭代的顺序与插入值的顺序相同。与普通的 Object 不同，Map 保留了此顺序。

Map和Object相互转换

Object.entries：从对象创建 Map

当创建一个 Map 后，我们可以传入一个带有键值对的数组（或其它可迭代对象）来进行初始化
如果我们想从一个已有的普通对象（plain object）来创建一个 Map，那么我们可以使用内建方法 Object.entries(obj)，该方法返回对象的键/值对数组，该数组格式完全按照 Map 所需的格式。

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

Object.fromEntries：从 Map 创建对象

Object.fromEntries 方法的作用与Object.entries是相反的：给定一个具有 [key, value] 键值对的数组，它会根据给定数组创建一个对象

et prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// 现在 prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2

我们可以使用 Object.fromEntries 从 Map 得到一个普通对象（plain object）。

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 创建一个普通对象（plain object）(*)

// 完成了！
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

我们可以把带 (*) 这一行写得更短：

let obj = Object.fromEntries(map); // 省掉 .entries()

感谢查阅！！！