JavaScript —— Map转换Object

2020/05/27 JavaScript

本文记录 ES6 中新增的 Map 对象转换为 Object 的几种方式,以及测试各种方式转换的性能。

const map = new Map()
map.set('🏀', 'basketball')
map.set('️⚽️', 'soccer')
map.set('⚾️', 'baseball')
map.set('🎾', 'tennis')

第一种方式

首先我们准备一个 map 对象,接下来看第一种方式:

const obj = Array.from(map).reduce((obj, [key, value]) =>
  Object.assign(obj, { [key]: value} )
, {})

console.log(obj)  // { '🏀': 'basketball', '️⚽️': 'soccer', '⚾️': 'baseball', '🎾': 'tennis' }

但是第一种方式在数据量过大的时候,在每个迭代中创建一个新对象(使用 Object.assign)时,性能会受到影响,还有一点是 Map 的 key 可以是非字符串的键,转换成字面量的 object 则不可以。

第二种方式

于是我们来看第二种方法,来解决第一种方法可能会遇到的性能问题:

const obj = Array.from(map).reduce((obj, [key, value]) => {
  obj[key] = value
  return obj
}, {})

console.log(obj)  // { '🏀': 'basketball', '️⚽️': 'soccer', '⚾️': 'baseball', '🎾': 'tennis' }

使用 Array.from(map).reduce(fn, {}), 你可以安全的在累加器中操作 object

第三种方式

如果你熟悉 ES6 中的写法,你也可以用第三种 ES6 的方式来替换 Array.from(map):

const obj = [...map.entries()].reduce((obj, [key, value]) => (obj[key] = value, obj), {})

console.log(obj)  // { '🏀': 'basketball', '️⚽️': 'soccer', '⚾️': 'baseball', '🎾': 'tennis' }

用 ES6 的写法,我们只需要用一行代码就可以完成任务啦,简洁控的最爱。

第四种方式

而最后一种方法,也是跟扩展运算符相关的一种写法:

const obj = Array.from(map.entries()).reduce((main, [key, value]) => ({...main, [key]: value}), {})

console.log(obj)  // { '🏀': 'basketball', '️⚽️': 'soccer', '⚾️': 'baseball', '🎾': 'tennis' }

这行代码乍一看完全没问题,因为使用了扩展运算符还有点优雅的感觉,并且也是一行代码解决了战斗,但是在后面的性能测试过程中,第四种方法当真是让人大跌眼镜。

性能测试

现在我把四种写法放到一起,并且我创建一个拥有 10000 个 key 的 Map 来做转换,测试一下四种写法的性能。

// 创建一个较大的 map
for (let i = 0; i < 10000; i++) {
  map.set(`a${i}`, i)
}

// MapConvertToObj1: 16.381ms
// MapConvertToObj2: 5.661ms
// MapConvertToObj3: 4.903ms
// MapConvertToObj4: 20344.747ms

看到这 4 种方式的性能输出,是不是大跌眼镜呢?并且第一种方式,果然是因为 Object.assign() 的用法存在性能开销,总体比第二种和第三种慢一点。

如果我们把 key 的数量减少到 1000 个,第四种方式会不会好一点呢?

// MapConvertToObj1: 3.742ms
// MapConvertToObj2: 1.140ms
// MapConvertToObj3: 0.874ms
// MapConvertToObj4: 185.745ms

可以看到第四种方式还是没有太多起色,而多次测试下来,第三种方式是转换速度最快的,推荐大家以后 Map 转换成对象时,使用第三种方式来转换哦,又快又优雅。

Search

    Table of Contents