Javascript 初学者如何思考才可以把脑中的东西转换成代码写出来？

想象一下，你脑子里有一个非常棒的点子，比如想做一个能给你的宠物猫拍有趣照片的小程序，或者一个能帮你计算日常开销的小工具。要把这个“脑中的东西”变成电脑能理解的代码，就像是你要给一个不太懂你的朋友解释清楚，让他一步一步地照着你的指示去做。

首先，别急着往代码编辑器里敲键盘。先停下来，像个侦探一样，把你的想法拆解开。问自己几个关键问题：

1. 我到底想让这个东西做什么？（功能定位）

这听起来很简单，但很重要。你想要的是一个展示效果的页面？还是需要和用户互动？是不是需要从外面获取一些信息，比如天气预报？还是需要存储一些数据？就像你给朋友解释如何做饭，你得先告诉他“我们要做一个番茄炒蛋”，而不是“你先把鸡蛋打散”。

2. 用户（或者你自己）需要怎么操作？（用户交互）

如果你的程序需要用户输入，那么用户会输入什么？在哪里输入？是点击一个按钮？还是填写一个表单？是拖拽一个图片？你的“脑中的东西”在这一步需要变成用户能看到的、能操作的界面元素。比如，你想让用户给猫拍照，那么就得有一个“拍照”按钮。想计算开销，就得有输入金额和类别的地方。

3. 内部是怎么运作的？（逻辑流程）

这是最核心的部分，也是最需要“思考”的地方。当用户做了某个操作后，你的程序会发生什么？

数据的获取与处理： 如果你要计算开销，那么用户输入的金额和类别是什么样的“数据”？这些数据需要以什么样的方式存储在程序内部？是数字？是文本？
条件的判断： 你的程序有没有什么“如果……那么……”的逻辑？比如，如果用户输入的金额大于 100 元，就标记为“大额消费”。
循环的运用： 如果你需要重复做某件事情，比如遍历一个列表来显示所有的开销记录，这时候就要想到循环。
功能的组合： 很多时候，一个复杂的功能是由几个小功能组合而成的。你想做个照片应用，可能就需要“拍摄”、“展示”、“添加滤镜”等几个小步骤。

4. 需要展示什么样的结果？（输出与展示）

用户操作之后，你希望看到什么？是屏幕上显示计算好的总金额？是弹出一个友好的提示框？是给猫咪的照片加上一个有趣的边框？这些“结果”需要用什么方式呈现出来？是文字？是图片？是动画？

把这些想法“翻译”成代码

一旦你把你的想法拆解成这样一层一层的问题，你就可以开始把这些“思考”变成代码了。

HTML： 它是骨架，负责搭建你的页面结构。你想让用户看到一个按钮？一个输入框？一个展示图片的区域？这些都用 HTML 来定义。
CSS： 它是衣服，负责美化你的页面。按钮是什么颜色？输入框是什么形状？图片有多大？一切关于“样子”的问题，都交给 CSS。
JavaScript： 它是大脑和神经系统，负责让你的页面“活”起来，实现交互和逻辑。

当你思考“用户点击拍照按钮会发生什么？”的时候，你就知道你需要用 JavaScript 来“监听”这个按钮的点击事件。当这个事件发生时，你就要写 JavaScript 代码来执行“拍照”这个动作。

逐步构建，小步快跑

别指望一次就能把所有东西都想清楚。编程是一个不断试错和优化的过程。

先从最核心、最简单的事情开始。 比如，先做一个能让用户输入金额的输入框，然后把它显示在页面上。
然后慢慢增加复杂性。 比如，再加入一个“计算总计”的按钮，让它能把输入的金额加起来。
遇到问题，查资料。 没人能记住所有代码。遇到不明白的地方，搜索引擎是你最好的朋友。搜索你遇到的错误信息，或者你想实现的功能的关键词，你会发现很多前人的经验和解决方案。
多写，多练。 就像学说话一样，你写得越多，你的“代码思维”就越清晰，就越能顺畅地把脑中的想法转换成代码。

最重要的是，享受这个过程。把编程想象成一个创造的过程，你是在用代码把你的创意变成现实。不要害怕犯错，错误是学习的一部分。当你能够清晰地描述你的想法，并一步步地将这些想法翻译成电脑能理解的指令时，你就已经掌握了从“脑中的东西”到“代码”的转换之道。

网友意见

@vczh

轮子哥时间宝贵。我就来详细的讲一下这个穷举法的意思。

想当初旁听人工智能课程的时候就是讲的井字棋的AI实现。对一般人来说，实现井字棋最难的地方就是这里的这个AI算法了吧。

）——课件找不到了，好在我是认真听课了的！——（

下图这个就是所谓的穷举法的前两层。

……

实际情况下，完全遍历一颗博弈树的层级的节点数是指数级递增的：

层数 节点数

0 1

1 9

2 72

3 504

4 3024

5 15120

6 60480

7 181440

8 362880

那么实际的层数可以不要那么多就好了。

然后你就会问了，就算遍历了，怎么知道要怎样走呢。我们的Minimax算法就在这里出现了，具体介绍可以移步维基

Minimax

。我就简单的说一下，在井字棋的游戏里面，两个人博弈，一个是用X，一个是用O，这里的X是Max，O就是这里的Min。X的策略就是让这个Max-Min的值尽可能的大，而O的策略就是让这个Max-Min的值尽可能的小。Max-Min的这个值就是我们要的分数值。

那么下一个问题，这个分数要怎么就算呢。其实这个也是可以自己总结出来的，数字也可以改，下面是NTU的网站上给的记分方法：

• 己方在同一条线上有三子，记+100分;
  
• 己方在同一条线上有二子，记+10分;
  
• 己方在同一条线上有一子，记+1分;
  
• 同理，对方在同一条线上有三子，二子，一子，分别记-100, -10, -1分;
  
• 其余情况记0分。（在线上没有任一子或者同时有两方的子数）

然后就可以得到下面的遍历的记分。（这个是4层遍历的情况）

这样一个简单的AI就实现了，接下来我们还可以把这个AI再完善一些，加上剪枝，加上一些经验的规则，一些经验的走法，再给AI加上开局库等等。

-----------

@vczh

轮子哥简单一句穷举就把上面这些给带过了，也真是醉了-----------

接下来就是代码层面的具体实现了，这里的话就是要把js具体用进去了。前面的前辈们也说到了，真正学写代码还是要自己一个字母一个字母的敲进去才行，用代码实现我给几个简单的hint。

比如每一个棋位用什么表示，用数字，还是用一个矩阵。至于显示的话，比较直观的就是用Canvas来画。比方说对于计算机来说数组[1,4,9]就可以表示获胜。

另外一个小建议，这样的项目可以不用什么lib来实现，这样比较直观，Angular本身也不适合处理这个项目。它本身就是设计来收发json到页面的。

当然如果是要Hack，用什么lib都没有关系。

最后说一句，Codeacademy上的Javascript的课程并不好，我大概两年前就做过了，学完了不过是熟悉了JS的语法而已，真正JS里的重要的地方都没有提到，比如像什么bind, apply, call, __proto__这些特别容易混淆的地方，都是需要重新去看书。如果是学诚心想学Javascript的话，推荐看 《Javascript: The Good Parts》 这本书，不容错过。

以上，抛砖引玉，还望指正。

参考拓展：

Tic-tac-toe AI Cut & Paste Tic Tac Toe with AI

（具体的JS实现，其实可以在这个基础上做得更漂亮的）

Minimax算法研究（TicTacToe）

——————————————

P.S. 除去机器人的实现，剩余的部分有好的范例啦，参见

@Jasin Yip

，代码很干净漂亮^^

类似的话题

• 

  Javascript 初学者如何思考才可以把脑中的东西转换成代码写出来？

  

  想象一下，你脑子里有一个非常棒的点子，比如想做一个能给你的宠物猫拍有趣照片的小程序，或者一个能帮你计算日常开销的小工具。要把这个“脑中的东西”变成电脑能理解的代码，就像是你要给一个不太懂你的朋友解释清楚，让他一步一步地照着你的指示去做。首先，别急着往代码编辑器里敲键盘。先停下来，像个侦探一样，把你的.............
• 

  JavaScript 中，定义函数时用 var foo = function () {} 和 function foo() 有什么区别？

  

  在 JavaScript 中，定义函数的方式有两种非常常见：一种是函数声明（`function foo() {}`），另一种是函数表达式（`var foo = function() {}`）。虽然它们最终都能创建一个函数对象并赋值给变量 `foo`，但在一些关键的方面，它们有着本质的区别。理解这些区.............
• 

  JavaScript、jQuery、AJAX、JSON 这四个之间的关系？

  

  好的，我们来好好梳理一下 JavaScript、jQuery、AJAX 和 JSON 这四个在 Web 开发中经常一起出现的概念，并尽可能讲得透彻一些，让它们之间的联系一目了然。咱们就抛开那些写出来就感觉是“机器在说话”的套话，用一种更接地气的方式来聊聊。想象一下咱们在盖房子，JavaScript .............
• 

  JavaScript凭什么不是面向对象的语言？

  

  JavaScript 凭什么不是面向对象的语言？ 这句话本身就有点像个钓鱼标题，故意激化矛盾，引人入胜。但说 JavaScript “不是”面向对象的，这绝对是站不住脚的，而且会引来一堆懂行的人跟你理论。不过，我们可以这么理解：JavaScript 的“面向对象”方式，和很多传统意义上、大家更熟悉的.............
• 

  JavaScript里面有什么是不用刻意学的？

  

  JavaScript 的博大精深，很多东西其实当你用到的时候，自然而然就会去了解，无需特意去“背诵”或者“啃书”。 就像我们学习骑自行车，一开始可能需要有人扶着，但一旦掌握了平衡的诀窍，后面就不需要别人时刻提醒你的姿势了。比如说，JavaScript 中的“作用域”这个概念。初学者可能会觉得“作用.............
• 

  JavaScript能否能实现所有函数调用时的钩子函数？

  

  JavaScript 的确提供了强大的机制，可以让你在函数被调用时进行干预，几乎能够实现对所有函数调用的“钩子”操作。这并不是一个简单的“列表”式的功能，而是一种通过语言特性和设计模式组合而成的能力。想象一下，你有一个庞大的 JavaScript 程序，里面充满了各种各样的函数。你希望在你执行任何一.............
• 

  JavaScript 最失败的设计是 arguments 吗？

  

  javascript 的 arguments 对象，可以说是语言设计中一个颇具争议的存在。从最初的设计意图来看，arguments 似乎是为了方便开发者在函数中访问所有传入的参数，无论函数声明时指定了多少个参数。这在一些其他语言中也是常见的做法，比如 C 语言的可变参数函数。但是，arguments.............
• 

  JavaScript(V8，Node) 的开发效率比 Java(JVM，Vert.x) 高在哪里？

  

  JavaScript 在 V8 引擎和 Node.js 环境下的开发效率，相比于 Java 在 JVM 和 Vert.x 组合下的确有其独到之处，这主要体现在几个关键的维度上，而不是简单的功能堆砌。首先，JavaScript 的“一次编写，到处运行”的理念在 Web 开发这个根深蒂固的领域带来了巨大.............
• 

  JavaScript 如果拥有多线程能力会怎样？

  

  如果JavaScript具备了真正意义上的多线程能力，那它在处理并发和复杂任务时，无疑会迎来一场翻天覆地的变革。想象一下，我们不再需要依赖那些精巧的、基于事件循环的模拟多线程方案，比如Web Workers，而是能够像许多其他成熟的后端语言一样，直接创建和管理多个独立的执行线程。这会带来什么？首先，.............
• 

  JavaScript 关于 if…else if…else 的疑问？

  

  很多初学 JavaScript 的朋友，在使用 `if...else if...else` 语句的时候，会遇到一些似是而非的困惑，总觉得哪里不对劲，但又说不清楚。今天我们就来聊聊这个最基础，也最容易被忽视的知识点，希望能让大家彻底弄明白它。我们先抛开那些花哨的术语，直接从实际应用出发。想象一下，你要.............
• 

  JavaScript 有必要缓存 for 循环中的 Array.length 吗？

  

  在 JavaScript 中，对于 `for` 循环中的 `array.length` 进行缓存，究竟有没有必要？这是一个在许多 JavaScript 开发者中都存在讨论的话题，尤其是在追求极致性能的场景下。要弄清楚这个问题，我们需要深入理解 JavaScript 引擎如何处理数组以及循环的执行过程.............
• 

  JavaScript中对 function 的参数进行重新赋值的影响?

  

  在JavaScript这门语言里，函数参数的处理方式，尤其是对它们的“重新赋值”行为，其实是一个挺有意思的话题，涉及到变量作用域、值传递以及JavaScript内部的一些特性。我们得深入聊聊这个，而不是简单地列几个点。首先，理解JavaScript函数参数传递的本质非常重要。不同于某些强类型语言直接.............
• 

  JavaScript一个疑问，[ ] （空数组）== true ，具体如下，请问这是为何？

  

  你提出的这个问题非常有意思，它涉及到 JavaScript 中一个非常有趣的特性——类型转换，特别是涉及到布尔值比较时。要理解为什么 `[] == true` 会是 `true`，我们需要深入了解 JavaScript 在执行相等性比较（`==`，也叫宽松相等或松弛相等）时是如何工作的。不同于严格相.............
• 

  JavaScript 是什么？

  

  JavaScript，这门被广泛使用的编程语言，你可以把它想象成网站的“灵魂”。当你在浏览器中浏览一个网页时，你看到的美观的布局、流畅的动画、可交互的按钮，还有那些在你点击后弹出信息或者动态加载内容的精彩表现，很大一部分都离不开JavaScript的功劳。它不像HTML那样是网站的“骨架”，勾勒出页.............
• 

  JavaScript处理一个100M的超大xml，跑不出来以至于IE未响应怎么办？

  

  遇到处理100MB这种规模的XML文件导致IE未响应的情况，这在客户端JavaScript处理中确实是个棘手的难题。直接在浏览器端一股脑地加载、解析和处理如此庞大的数据，几乎是注定失败的。浏览器有限的内存和CPU资源，以及单线程的JavaScript执行模型，都会成为巨大的瓶颈。首先，我们得明白为什.............
• 

  javascript 上传文件到阿里云的oss，上传文件成功后怎么获取文件的真实路径？

  

  .......
• 

  随着 JavaScript 越来越完善，还有必要学习 TypeScript 吗？

  

  随着 JavaScript 的生态系统不断成熟，它的功能也日益丰富，这自然会让人产生疑问：在这个日新月异的世界里，学习 TypeScript 还有那么必要吗？毕竟，JavaScript 本身已经足够强大，能够胜任各种复杂的开发任务。然而，答案依然是肯定的，而且我认为，对于任何认真对待 JavaScr.............
• 

  为什么JavaScript不能成为自己的标准，非得冒出ES6成为JavaScript的标准呢？

  

  这个问题，其实得从“标准”这个词本身说起。要理解为什么 JavaScript 需要 ES6 这样的“标准”，我们首先得明白，任何一门编程语言，要能被广泛接受、可靠地使用，并且持续发展，都需要一个清晰、稳定、被普遍认可的规范。你可以把 JavaScript 想象成一门正在不断成长、变化的孩子。一开始，.............
• 

  用JavaScript做其他语言擅长的事情“好”么？

  

  当我们在讨论“用JavaScript做其他语言擅长的事情”这个话题时，其实就是在探讨一种技术选择的“适性”与“效率”。就像我们不会用锤子去拧螺丝，虽然理论上你可能砸开螺丝，但绝非明智之举。JavaScript，这个曾经主要活跃于浏览器前端的语言，如今触角早已延伸到了服务器端、移动端，甚至桌面端。那么.............
• 

  为何浏览器控制台的JavaScript引擎性能这么差？

  

  您好！看到您提出“浏览器控制台的JavaScript引擎性能这么差”这个问题，这其实是一个常见的误解。事实上，现代浏览器中的JavaScript引擎（例如Chrome的V8、Firefox的SpiderMonkey、Safari的JavaScriptCore等）在执行JavaScript代码方面拥有.............