js Map和Object的区别

Map

// 创建方式
let map = new Map();

// 新增属性
map.set(1, '值1');
map.set(['key2'], '值2');
map.set(true, '值3');
map.set({}, '值4');
map.set(function fn() {}, '值5');

// key可以为js的任意数据类型，而且顺序和新增的顺序相同
console.log(map); // {1 => "值1", Array(1) => "值2", true => "值3", {…} => "值4", ƒ => "值5"}

// 访问属性
console.log(map.get(1));  // 值1
console.log(map.get(true));  // 值3

// 删除属性
map.delete(1);
console.log(map);  // {Array(1) => "值2", true => "值3", {…} => "值4", ƒ => "值5"}

// 查看长度
console.log(map.size);  // 4

// 检测属性是否存在
console.log(map.has(true));  // true
console.log(map.has(1));  // false

Object

let boo = Boolean(true);
let boo1 = Boolean(false);
let obj1 = { name: 'wq' };
let arr = ['arr1', 'arr2'];

// 创建方式
let obj = { 
    name: '温情',
    [boo]: 'boolean',
    [arr]: 'array',
    10: 'num',
    [obj1]: 'object',
};
// key的复合数据类型全被转换为了字符串，而且顺序和定义的不相同
console.log(obj);  // {10: "num", name: "温情", true: "boolean", arr1,arr2: "array", [object Object]:"object"}
        
// 访问属性
console.log(obj.name);  // 温情
console.log(obj[arr]);  // array

// 删除属性
delete obj[obj1];
delete obj.name;
console.log(obj);  // {10: "num", true: "boolean", arr1,arr2: "array"}

// 新增属性
obj.hight = 500;
obj[boo1] = 'adddd';
console.log(obj);  // {10: "num", true: "boolean", arr1,arr2: "array", hight: 500, false: "adddd"}

// 查看长度
console.log(Object.keys(obj).length);  // 5

// 检测属性是否存在
console.log(boo1 in obj);  // true
console.log('温情' in obj);  // true

结论

1. key的数据类型可选范围不同

Map：key支持js所有数据类型
Object: key只可以是基本数据类型

2. 创建的方式不同

Map只可以通过new关键字创建，Object还可以通过字面量、构造函数等方式

3. 访问属性方式不同
4. 新增属性方式不同
5. 删除属性方式不同
6. 查看大小长度不同
7. 检测属性是否存在不同

3~7点仔细对比以上代码可以轻松看出

if have error, welcome to correct