对比Map 与 Object

对比Map 与 Object

键名

/**-------------------- Map --------------------*/
Map键名可以是任何类型
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true],
        [{x: 1}, 'object'],
        [null, 'null'],
        [undefined, 'undefined']
    ]
)

/**------------------- Object ------------------*/
Object键名只能是字符串 (Object会默认将键名转化为字符串格式)

创建

/**------------------- Map --------------------*/
const map = new Map() // new 关键字创建

/**------------------ Object ------------------*/
const obj = new Object() // new 关键字创建
const obj = {} // 直接赋值
const obj = Object.create() // 使用create创建

// 函数式创建
function Person(name, age){
  this.name = name;
  this.age = age;
}
const obj = new Person()

新增元素

/**-------------------- Map --------------------*/
// 创建时塞入集合整体
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true]
    ]
)

// 链式设置
const map = new Map()
    .set(1, '111')
    .set('a', 'aaa')
    .set(true, true)
 
 // set单个设置      
const map = new Map()
map.set(1, '111')
map.set('a', 'aaa')
map.set(true, true)

/**-------------------- Object -------------------*/
// 常用赋值方式--> object.key / object[key]
const obj = {}
obj.a = 'aaaa'
obj['1'] = 1111 

// new关键字创建时塞入对象
const obj = new Object(
    {
        1: '111',
        a: 'aaa',
        true: true
    }
)

// 直接赋值
const obj = {
        1: '111',
        a: 'aaa',
        true: true
    }
    
// 使用create创建时塞入对象
const obj = Object.create(
    {
        1: '111',
        a: 'aaa',
        true: true
    }
)

// 函数式创建时，this指定赋值
function Person(name, age){
  this.name = name;
  this.age = age;
}
const obj = new Person()

获取元素

/**-------------------- Map --------------------*/
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true]
    ]
)
map.get(1) 
map.get('a')
map.get(true) 

/**-------------------- Object -------------------*/
const obj = {
        1: '111',
        a: 'aaa',
        true: true
    }
obj.a  // object.key
obj[1] // object[key]

删除元素

/**-------------------- Map --------------------*/
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true]
    ]
)

map.delete('a') // 单个删除
map.clear() // 清除所有元素

/**-------------------- Object -------------------*/
let obj = {
        1: '111',
        a: 'aaa',
        true: true
    }

delete obj[true] // 单个删除
obj = {} // 清空所有元素


判断某个元素是否存在

/**-------------------- Map --------------------*/
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true]
    ]
)
map.has('a') // 返回布尔值

/**-------------------- Object -------------------*/
let obj = {
        1: '111',
        a: 'aaa',
        true: true
    }

// 返回undefined则不存在
obj.a
obj[1]


长度

/**-------------------- Map --------------------*/
const map = new Map()
map.size

/**-------------------- Object -------------------*/
const obj = new Object()
Object.keys(obj).length

遍历方法

/**-------------------- Map --------------------*/
const map = new Map(
    [
        [1, '111'],
        ['a', 'aaa'],
        [true, true]
    ]
)

// keys
map.keys() // { 1, 'a', true }

// values
map.values() // { '111', 'aaa', true }

// entries
map.entries() // { [ 1, '111' ], [ 'a', 'aaa' ], [ true, true ] }

// forEach
map.forEach(
  (value, key, map) => console.log(value, key, map)
)
// 111 1 Map(3) { 1 => '111', 'a' => 'aaa', true => true }
// aaa a Map(3) { 1 => '111', 'a' => 'aaa', true => true }
// true true Map(3) { 1 => '111', 'a' => 'aaa', true => true }

// for...of 
for (const [key, value] of map) { console.log(key, value) }
// 1 111
// a aaa
// true true

/**-------------------- Object -------------------*/
// for...in
const obj = {
  1: '111',
  a: 'aaa',
  true: true
}

for (const key in obj) {
  console.log(key)
}
// 1
// a
// true