javascript - 从字符串创建对象并反转

Question

我目前正在为我在 Vue.js 2.x 中进行的扫雷实现开发个人高分功能 ( working demo )。

到目前为止，我计划为这些个人记录创建一个 localStorage 项目

localStorage.setItem('defuse-records', 'easy:121,medium:455,hard:781,insane:')

这些数字代表该人解决不同难度预设所花费的秒数。在这个例子中，这个人还没有解决insane问题。

我想从这个字符串创建一个如下所示的对象:

{ easy: 121, medium: 455, hard: 781, insane: null }

这是我到目前为止所做的:

getLocalRecords() {
  let localRecords = localStorage.getItem('defuse-records')
  if(!localRecords) {
    return { easy: null, medium: null, hard: null, insane: null }
  }  
  let strArray = localRecords.split(',')
  let recordsObj = strArray.map(function (str) {
    let rObj = {}
    rObj[str.split(':')[0]] = str.split(':')[1] || null
    return rObj
  })

  return recordsObj
}

但是，由于 Array.prototype.map 的性质，它返回一个 Array 而不是 Object:

[{ easy: 121}, { medium: 455 }, { hard: 781 }, { insane: null }]

现在我当然可以迭代这个数组并创建我想要的对象，但这感觉很复杂，我希望有人有一种更优雅的双向转换方式。

也许有人立即看到解决方案？

第二个问题:是否有一种更适合、更易于使用的方式来使用单个存储项来存储所有四个难度级别的个人记录？

Answer 1

您需要稍微修改原始项目才能使用 JSON 解析，这将是我认为最简单的方法

localStorage.setItem('defuse-records', '{"easy":121,"medium":455,"hard":781,"insane":null}');

然后你可以这样做:

getLocalRecords(){
    return JSON.parse(localStorage.getItem('defuse-records') || '{"easy":null,"medium":null,"hard":null,"insane":null}');
    // {easy: 121, medium: 455, hard: 781, insane: null}
}