JS入门学习疑问：两段本地存储分数的代码对比分析、心态困惑及入门建议

完全正常！刚学JavaScript三天，能写出可运行、还能实现本地存储分数的代码已经超棒了，千万别给自己贴“stupid”的标签——新手阶段的这种心态太常见啦，我当初学第一门语言的时候也一模一样！

先说说你的心态：为什么觉得自己的“长代码”更易理解？ #

这太正常了！你写的代码是自己一步步思考、拆解逻辑出来的，每一行都对应着你当时的思考过程，比如先声明result变量，再判断随机数赋值，再对比用户选择和结果……逻辑完全是线性的，对你来说当然“更全面、更易懂”。而所谓的“更好的代码”是把逻辑做了压缩和优化，用了更简洁的语法（比如三元运算符、短路赋值），这些写法对新手来说相当于把好几步逻辑揉成了一步，大脑需要额外的时间去拆解适应，所以一开始接受不了太正常了。

两段代码的具体对比&优化点拆解 #

先把两段代码放出来方便对比：

你的代码（功能完整，逻辑清晰）

<button onclick="playGame('tails');">tails</button>
<button onclick="playGame('heads')">heads</button>

<script>
let result = '';
let score = {
    wins: 0,
    losses: 0
}
let scoresFromLocalStorage = localStorage.getItem('scores');
if (scoresFromLocalStorage) {
    score = JSON.parse(scoresFromLocalStorage);
}

function playGame(choice) {
    const randomNumber = Math.random();
    if (randomNumber < 0.5) {
        result = 'heads';
    } else {
        result = 'tails';
    }
    console.log('Computer: ' + result);
    console.log('You: ' + choice);
    if (choice === result) {
        console.log('You win');
        score.wins += 1;
    } else {
        console.log('You lost');
        score.losses += 1;
    }
    let jsonScore = JSON.stringify(score);
    localStorage.setItem('scores', jsonScore);
    score = JSON.parse(localStorage.getItem('scores'));
    console.log(score);
}
</script>

优化后的代码（更简洁高效）

<button onclick="playGame('heads');">heads</button>
<button onclick="playGame('tails');">tails</button>

<script>
// We can use const here since score is a reference
// so we can modify it even if it uses const.
const score = JSON.parse(localStorage.getItem('score')) || {
    wins: 0,
    losses: 0
};

function playGame(guess) {
    const randomNumber = Math.random();
    const result = randomNumber < 0.5 ? 'heads' : 'tails';
    console.log(guess === result ? 'You win!' : 'You lose!');
    if (guess === result) {
        score.wins++;
    } else {
        score.losses++;
    }
    console.log(score);
    localStorage.setItem('score', JSON.stringify(score));
}
</script>

下面拆解优化点：

• 分数初始化的简化：
  你是先声明默认分数对象，再从localStorage取值、判断后覆盖；优化后的代码用了JSON.parse(localStorage.getItem('score')) || { wins:0, losses:0 }——这里的||是短路逻辑：如果localStorage里没有存储过分数（getItem返回null），null在逻辑判断里是“假值”，就会用后面的默认对象。另外用const是因为对象是引用类型，我们修改的是对象里的wins/losses属性，不是重新赋值整个对象，所以const完全没问题，还能避免不小心把score改成其他类型，更安全。
• 结果赋值的简化：
  你用if-else给result赋值，优化后的用了三元运算符randomNumber < 0.5 ? 'heads' : 'tails'，它和你的if-else功能完全一样，就是把“判断条件 ? 条件为真时的值 : 条件为假时的值”压缩成了一行，写多了就会觉得很顺手。
• 本地存储的冗余优化：
  你在更新分数后，先把score转成JSON存到localStorage，又立刻取出来再parse赋值给score——其实完全没必要！因为内存里的score对象已经是最新的了，存完之后直接用就行，不需要再取一遍，优化后的代码去掉了这步冗余操作，更高效。

给你这个三天新手的小建议 #

• 先以实现功能为核心：别一开始就追求“简洁优雅”，能写出可运行的代码就是胜利，你的代码已经完美实现了游戏逻辑+本地存储，这已经很棒了！
• 循序渐进适应简洁语法：比如三元运算符，你可以先写自己的if-else，然后试着改成三元写法，每次改一行，慢慢熟悉；短路赋值也是一样，先理解逻辑再用。
• 逐行拆解别人的代码：看不懂优化后的代码时，把它拆成小部分，比如先查||在JS里的用法，再看三元运算符的规则，逐行分析，很快就能懂。
• 多写多复盘：写完代码后，隔几个小时再回看，试着想想“这里能不能简化？”，慢慢培养优化的思维。
• 别自我否定：编程是个循序渐进的过程，三天能做到这个程度已经远超很多新手了，给自己多点耐心～

备注：内容来源于stack exchange，提问作者MobinAskari