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

您可以使用reduce执行此任务：

'easy:121,medium:455,hard:781,insane:'
    .split(",")
    .reduce((obj, item)=>{ 
        let [key, value] = item.split(':'); 
        obj[key] = +value || null; 
        return obj;
    }, {})
//evaluates to {easy: 121, medium: 455, hard: 781, insane: null}

Answer 2

您需要稍微修改原始项目才能使用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}
}

Answer 3

 getLocalRecords(){
    const localRecords = localStorage.getItem('defuse-records').split(",");
    const result = {};
    for(const pair of localRecords){
       const [key, val] = pair.split(":");
       result[key] = +val;
    }
    return result;
 }

或功能性：

  getLocalRecords(){
    return Object.assign({}, ...localStorage.getItem('defuse-records').split(",").map(pair => (([key, val]) => ({[key]: val}))(pair.split(":"))));
 }

或使用reduce：

 getLocalRecords(){
   return localStorage.getItem('defuse-records')
         .split(",")
         .map(pair => pair.split(":"))
         .reduce((result, [key, val]) => {
             result[key] = val;
             return result;
         }, {});
 }

但我宁愿简单地使用JSON.stringify＆amp; parse：

 function store(settings){
   localStorage.setItem('defuse-records', settings);
 }

 function load(){
    return JSON.parse(localStorage.getItem('defuse-records'));
 }

从String创建对象并反向

3 个答案: