我目前正在为我在 Vue.js 2.x(工作演示)中所做的扫雷实现开发个人高分功能。
截至目前,我计划为这些个人记录创建一个本地存储项
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 }]
现在我当然可以迭代这个数组并创建我想要的对象,但这感觉很复杂,我希望有人有一种更优雅的双向转换方式。
也许有人会立即看到解决方案?
第二个问题:是否有一种更适合、更易于使用的方式来使用单个存储项目来存储所有四个难度级别的个人记录?
您需要稍微修改原始项目才能使用 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}
}
您可以使用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}
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(":"))));
}
或使用减少:
getLocalRecords(){
return localStorage.getItem('defuse-records')
.split(",")
.map(pair => pair.split(":"))
.reduce((result, [key, val]) => {
result[key] = val;
return result;
}, {});
}
但是,我宁愿简单地使用JSON.stringify
和parse
:
function store(settings){
localStorage.setItem('defuse-records', settings);
}
function load(){
return JSON.parse(localStorage.getItem('defuse-records'));
}