如果你正打算学一门编程语言或者已经在前端门口徘徊了一段时间那JavaScript大概率是你绕不过去的那一站。这篇是JavaScript系列教程的第1篇咱们先把基础中的基础聊透这门语言到底是什么、为什么全世界有一大堆人在用它、以及你该从哪里开始动手。文章尽量不整那些高高在上的术语能说大白话就说大白话能举例子就举例子让你端着咖啡就能读完。在这篇文章里你会看到三样东西第一JavaScript的“身世”和定位帮你搞明白它和Java、和网页之间到底是什么关系第二一套零基础也能跟着做的本地开发环境搭建步骤从浏览器控制台到命令行让你亲手把第一行代码跑起来第三一些常见误区和调试技巧都是新手期最容易踩的坑我会教你怎么绕过去。作为一个系列的第一篇我会把篇幅控制在“够用但不啰嗦”把语法细节留给后续文章慢慢展开这一篇重点解决“它是什么”和“我怎么开始”。1. 先说清楚JavaScript到底是门什么语言1.1 别被名字带偏JavaScript和Java不是一回事很多人第一次听到JavaScript第一反应都是“是不是Java的简化版”我当年也这么以为后来才知道这俩的关系就像“Car”和“Carpet”名字里有相似的字母但本质八竿子打不着。JavaScript是一门运行在浏览器里的脚本语言它最原始、最核心的职责就是让网页“活”起来。你看到的轮播图、下拉菜单、表单校验、地图拖拽背后几乎都是JavaScript在操纵浏览器里的页面元素。打个比方一个网页可以拆成三部分HTML是骨架决定了页面上有哪些文字和图片CSS是衣服负责排版、颜色、尺寸这些外观而JavaScript就是肌肉和神经让页面能对用户的操作做出反应。这门语言诞生于1995年。当时一位工程师想给浏览器加一点交互能力因为时间很紧前后只花了大约十天就敲定了语言雏形。早期它叫过别的名字后来因为当时Java非常热门为了借势才改名为JavaScript。这直接埋下了一个让所有新手困惑的历史包袱——大家最常问的“JavaScript和Java什么关系”答案就是名字像而已技术上几乎没关系。1.2 从网页小工具到全栈通用语言如果说最初的JavaScript只是网页里负责表单校验的小工具那今天它的范围已经远远超出了浏览器。它被标准化以后有了一个正式的名字叫ECMAScript各浏览器都按照这个标准来实现自己的JavaScript引擎。随着时间推移开发者发现一个尴尬的事情这么好的语言凭什么只能待在浏览器里于是后来出现了让JavaScript在浏览器之外运行的环境也就是我们常说的Node环境。装上它之后JavaScript就能在电脑本地跑起来处理文件、读写数据库、提供网页接口像其他后端语言一样干活。再往后移动端应用、桌面软件、物联网设备脚本、自动化办公工具都开始有JavaScript的身影。一套语言前端能用后端能用爬虫能用自动化能用这在编程语言里是很少见的高覆盖度。所以现在再问“JavaScript是什么”最简单的回答是它是一门让程序在网页、服务器和各种终端上运行的通用语言但它的起点和主战场仍然是Web浏览器。1.3 需要先有的几个概念解释执行、动态类型和单线程在开始动手之前我建议你先接受三个关于JavaScript的底层事实它们会帮你理解后面所有代码行为。第一它是解释执行的语言。所谓解释执行通俗说就是代码不需要预先编译成一份独立的二进制文件而是由引擎边读边跑。坏处是运行前的错误检查比较弱有时候要跑起来才发现问题好处是上手门槛低改完代码刷新一下页面就能看到效果。第二它是动态类型语言。变量的类型不是写死在代码里的一个变量今天存数字明天存字符串后天塞个对象语法上都不算错。这个特性很灵活但也要求你养成自查的习惯不然很容易在传参时把类型搞混。第三它在浏览器里是单线程的。也就是说主线程同一时刻只能干一件事。但这不是说它不能处理耗时操作它有一套自己的调度机制也就是后面会提到的事件循环。这个概念初学阶段不用太深究先记住“单线程”这三个字就够了后面用到异步时会非常关键。2. 为什么到了现在JavaScript依然值得学2.1 Web开发避不开的底座如果你对做网站、做网页感兴趣那HTML、CSS、JavaScript这三大件就是地基。到现在为止全世界几乎所有网站的前端交互逻辑最终都会被浏览器翻译成JavaScript来执行。哪怕你日后用各种框架写界面框架只是帮你把代码组织得更高效底层跑的还是JavaScript。这就引出一个很现实的问题想搞Web开发不懂JavaScript是行不通的。你会被迫去抄代码、复制粘贴一旦中间出了错完全看不明白问题在哪。反过来只要你掌握了JavaScript的基本功再看那些花哨的框架就能一眼看穿它们只是“换一种写法来操作页面”心智负担会小很多。2.2 前端之外还有更大的空间JavaScript值得学的第二个原因是它的适用范围实在很广。掌握了浏览器端的基础之后你只要补一点Node环境的模块系统知识就能转身写服务端接口实现“一口气全栈”的效果。这对个人开发者、自由职业者和小团队来说性价比非常高。再往外延伸一点做桌面应用可以用它的相关技术栈做手机App也有对应框架写一些自动化脚本、处理表格数据、抓取网页信息更是信手拈来。我自己的体会是很多需求你说“用程序处理一下”别人可能要先装环境、写界面而如果你熟练JavaScript浏览器一开就是一个能跑的开发环境那效率完全是两码事。2.3 生态和社区带来的红利编程语言的价值很大程度上取决于“有没有人用它解决问题”。JavaScript的社区规模在编程语言里一直排在最前列这意味着你遇到任何问题搜索一下基本都能找到现成的方案也能找到海量的开源代码可以学习和复用。这种生态红利对新人是极其友好的。其他语言想实现一个功能可能要从头写一堆底层逻辑而JavaScript世界里往往已经有现成的轮子你只需要学会怎么“装”和“调”就能快速搭出原型。我经常跟新同学说学JavaScript不是要你背语法而是要你慢慢学会“找工具、看文档、接API”的能力。懂得站在生态的肩上比会背十行代码重要得多。3. 动手前准备30分钟搭好一个本地开发环境3.1 最省事的起步方式浏览器控制台很多人以为写代码一定要装一堆软件其实对于JavaScript新手你手头正在用的浏览器就是最好的开发环境。所有现代浏览器都自带开发者工具操控入口大同小异在页面上右键找到“检查”或“审查元素”会弹出一个面板里面有一个“控制台”Console标签页。这个控制台有两个能帮你学基础的事第一你可以在里面直接输入JavaScript代码按回车立刻看到结果停留在页面上的所有变量和数据也都能翻阅第二它会显示网页运行时的错误信息代码一旦报错红字会出现在这里。我的建议是初期学语法完全可以直接在控制台里敲代码既不需要额外装环境又能第一时间看到运行效果特别顺手。3.2 写代码的编辑器怎么选浏览器控制台适合做小实验但要是写一个稍长的项目你就需要装一个专门的代码编辑器。新手选编辑器的标准就三条免费、好用、插件多。市面上的主流编辑器基本都满足我个人比较喜欢那种界面干净、启动速度快、通过装插件就能扩展功能的类型。这里我不推荐你一开始就折腾各种复杂的IDE因为新手阶段最重要的是把注意力放在语言本身而不是花一晚上研究工具配置。一个能写代码、能识别语法高亮、能帮你自动补全括号的编辑器完全够用了。等以后写项目了再根据需求去调整主题、快捷键、代码检查这些锦上添花的配置。3.3 装一个Node环境让JavaScript跑在本地如果你想脱离浏览器在电脑上像运行普通程序一样运行JavaScript就需要安装Node环境。它是目前最主流的JavaScript本地运行环境装好之后你会得到一个命令行工具。安装过程其实不复杂去官网下载对应你操作系统的安装包一路点下一步就行。装完后打开命令行窗口输入node -v能显示出版本号就说明安装成功了。这一步的目的不是让你马上写后端而是让你知道JavaScript有两种常见的运行方式一种是在浏览器里跑主要处理页面交互另一种是在本地的命令行里跑适合做脚本和工具。两条腿走路学起来更踏实。3.4 跑起你的第一段JavaScript代码为了让你对“写代码”有一种真实手感我建议你按这个顺序做一次三步练习。第一步在浏览器控制台里输入这样一行然后按回车console.log(Hello, JavaScript!);你会看到控制台打印出一行字。这里的console.log是JavaScript里最常见的输出方法作用就是把括号里的内容显示到控制台。它就是我们调试时最爱用的“小喇叭”。第二步用编辑器创建一个后缀为.html的文件内容很简单!DOCTYPE html html head meta charsetutf-8 title我的第一个页面/title /head body h1这里的文字由JavaScript控制/h1 script // 这是一条注释不会被执行 document.title 被JS改过的标题; let name 新人; console.log(你好 name); /script /body /html然后用浏览器打开这个文件按F12打开控制台你会看到“你好新人”被打印出来浏览器顶部的页面标题也被JavaScript修改了。这一步能让你直观感受到“JavaScript可以操作页面内容”这件事。第三步如果你安装了Node环境就在命令行里进入文件所在目录运行node 你的文件名.js也会看到同样的输出。到这一步浏览器和本地两种运行方式你就都亲手验证过了。4. 语法速览变量、数据类型和函数一口吃透4.1 变量声明var、let、const怎么选变量在编程里就是“给数据起个名字”方便我们反复使用和修改。JavaScript里声明变量有三种关键词新手最容易困惑的是它们到底有什么区别。我直接给你一个简单的选择标准默认用const需要改的时候用letvar能不用就不用。关键词能否重新赋值作用域特点我的建议var能函数级作用域容易产生变量提升问题新手尽量别用let能块级作用域更符合直觉需要改值时用它const不能块级作用域声明时必须赋值大多数场合用它举个例子const PI 3.14; let count 0; count count 1; console.log(PI, count); // 输出3.14 1这里PI是恒定不变的所以用constcount后面要累加所以用let。你可能会问var既然存在为什么不让用因为它作用域规则比较老旧写了容易埋下莫名其妙的坑。我见过不少老代码里var引发的变量覆盖问题排查的时候特别痛苦。从新学开始就用规范习惯后面省事很多。4.2 数据类型先记住这七种JavaScript的数据类型基础阶段你只需记住这几大类Number数字包括整数和小数比如42、3.14String字符串文本内容用引号包起来比如你好或你好Boolean布尔值只有两个取值true或falsenull空值表示“这里故意什么都没有”undefined未定义表示“声明了变量但没给值”Object对象用来存键值对比如{ name: 张三, age: 18 }Array数组对象的一个特殊形式用来存有序列表比如[1, 2, 3]这里有个新手很容易问的点null和undefined不都是表示“没有”吗区分在于null通常是你自己主动设置“没有值”而undefined是JavaScript告诉你“这个变量没有被赋值”。举一个日常类比你约朋友吃饭订了个空位这是“null”你根本没订位置系统返回你没订这是“undefined”。写代码时判断类型最常用的方式是typeof操作符console.log(typeof 42); // number console.log(typeof 你好); // string console.log(typeof true); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object这是历史遗留的著名坑 console.log(typeof { name: 李四 }); // object这个结果里typeof null返回object是JavaScript一个著名的历史遗留bug但既然规范是这么定的初学阶段就当作一个知识点记住不用过于纠结。4.3 函数把代码打包成可以反复调用的工具函数是JavaScript里组织代码的核心方式。你可以把一段需要重复使用的逻辑装进一个函数给它起个名字以后想用的时候直接调用。最基本的定义方式是这样的function greet(name) { return 你好 name; } console.log(greet(小红)); // 输出你好小红这里greet是函数名括号里的name叫参数return后面的内容是这个函数的返回值。调用时传入不同的name函数就会返回不同的问候语。除了这种方式你还会经常看到箭头函数的写法const add (a, b) a b; console.log(add(3, 5)); // 输出8箭头函数是ES6之后出现的更简洁的写法尤其在处理数组和异步时会大量出现。你现在只需知道它能实现和普通函数类似的功能写法更紧凑至于两者在this绑定等高级细节上的区别后续文章我会专门展开。4.4 一个能顺手练手的完整小Demo说一百遍不如手敲一遍。我建议你打开编辑器把下面这个小功能敲一遍给定一组学生的成绩筛选出及格线以上的名单。const students [ { name: 张三, score: 85 }, { name: 李四, score: 59 }, { name: 王五, score: 72 }, { name: 赵六, score: 48 } ]; function filterPassed(list, passScore) { return list.filter(function(item) { return item.score passScore; }); } console.log(filterPassed(students, 60)); // 输出[{ name: 张三, score: 85 }, { name: 王五, score: 72 }]这个代码虽然短但包含了对象、数组、函数、参数、方法调用、控制台输出等最基础的知识点。你需要做的是先完整抄一遍再尝试把及格线从60改成70看看结果怎么变化然后试着用箭头函数改写下过滤逻辑感受两种写法的差异。这样一遍练下来你对语法的记误解会从“眼睛会了”变成“手里也会了”。5. 语言底层机制单线程、异步和事件循环初步理解5.1 单线程为什么还能不卡顿前面说过JavaScript在浏览器里是单线程的主线程一次只能执行一个任务。这在别的语言里听起来像灾难但你打开任何现代网页动画还在播放点击还有反馈好像同时干了很多事。原因在于真正耗时的事情并不长期霸占主线程。我举一个生活里的例子你去小吃店点餐厨师只有一个人这就是主线程他不可能同时炒好几个菜。但老板会在你点完菜后告诉你“稍等马上做”然后继续接待下一位顾客。这期间不是所有事都让厨师停下等待而是“先记录需求等你需要出锅时再通知”。对应到JavaScript里像倒计时、网络请求、文件读取这类操作会被交给浏览器的其他工作模块去处理主线程则继续往下跑等那些模块完成后再把结果送回主线程执行。这种“先干别的完了再回来”的机制就是异步。5.2 从回调到Promise再到async/await异步编程是JavaScript新手翻车的重灾区我先在这里给你一个宏观印象细节留给后续专篇。最原始的异步写法叫回调函数把“做完之后要干什么”作为函数传进去。比如setTimeout(function() { console.log(2秒时间到了); }, 2000);这行代码的意思是等2秒然后执行括号里传进去的那个函数。你会注意到JavaScript不会傻等这2秒它登记完“2秒后要做的事”就立刻继续往后执行了。但回调有个问题如果异步任务一个接着一个就会嵌套很深代码写得像一座歪歪斜斜的塔这就是所谓的“回调地狱”。为了解决嵌套问题后来有了Promise把层层嵌套拍平成一串.then(...).then(...)。再后来async/await更彻底你可以在函数里用await关键字让代码看起来像同步的阅读起来特别舒服。5.3 事件循环JavaScript的调度员驱动异步机制的核心是一个叫“事件循环”的机制。它的工作逻辑可以用一句话概括主线程先把手上的任务执行完然后去任务队列里看一眼如果有排队的回调任务就拿出来执行。我们来看这个经典例子console.log(开始); setTimeout(() { console.log(定时器回调); }, 0); console.log(结束);你可能会觉得延迟时间设成0那三个输出应该按“开始、定时器回调、结束”的顺序出现但实际结果是“开始”、“结束”、“定时器回调”。因为即便延迟是0定时器回调也会先被注册到任务队列里要等当前这一段代码全部执行完事件循环才会去取它。理解了这个顺序你对JavaScript的运行方式就有了一个非常重要的底层认知。以后写代码时遇到“为什么这个输出在后”“为什么变量变了没生效”这类问题往事件循环上想想往往能找到答案。6. 新手最常踩的坑与浏览器调试实用技巧6.1 等价判断的坑和和新手最容易写错的就是等号。单个是赋值表示“把右边的值放进左边的变量”和才是比较表示“左右两边是否相等”。问题出在上它会做隐式类型转换于是出现了很多离谱结果。比如1 1返回true因为两个值在比较时被强行转成同一类型。这种规则对新手很不友好一不小心就出错。我的建议是从第一天起就只用和!它们会同时比较值与类型逻辑更严谨不会出现上面那种意外。6.2 看不见的错误中文符号和大小写问题还有两类错误排查起来特别让人抓狂但原因其实简单到让人哭笑不得。第一类是输入法问题。JavaScript里的括号、引号、分号全部要求用英文半角符号如果你在中文输入法状态下写代码很容易打出中文全角括号浏览器就会报语法错误。这个错误提示还特别不好懂因为它指向的位置有时离真正的“元凶”很远。我自己排查过不止一次最后发现就是多了一个全角分号。第二类是大小写问题。JavaScript是区分大小写的let Name 张三和let name 李四是两个完全不同的变量。所以如果你声明了一个userName后面用username去取值控制台会明确告诉你“username is not defined”但你可能盯着代码看半天都找不到原因因为你心里想的是同一个东西。我的排查经验是遇到这种报错先检查拼写大小写再检查括号引号至少能解决一半问题。6.3 拿到浏览器控制台就能做的排查调试JavaScript最常用的工具还是浏览器控制台。除了输入代码做实验外你还可以用它做两件正经事。第一打印变量。你可以在代码任意位置插入console.log(变量名)运行后在控制台查看变量的真实值。如果数据是对象或数组还可以用console.table(变量名)浏览器会渲染成一个表格结构一目了然比我盯着对象结构硬看舒服太多。第二打断点。在浏览器开发者工具的“源代码”Sources面板里找到你的脚本文件点击行号那一列就加了一个断点。代码运行到那一行时会停下这时你可以在面板里查看当前所有变量的值、逐行单步执行追踪每一行代码是怎么改变状态的。断点调试看起来比console.log高级一些但原理不复杂多试几次就会爱上。下面是一个常见报错速查表建议你保存在手边报错信息大概意思常见原因xxx is not defined某个变量或函数没定义拼写错误、变量名大小写不对、忘记声明Unexpected token语法符号不符合预期中文符号、多逗号少括号、引号不匹配Cannot read property ... of undefined从“未定义”的值上取属性数据还没返回就用了对象里没有对应字段NaN计算结果不是有效数字把字符串当数字运算、除数为0之类7. 从入门到上手一张可执行的学习路线图7.1 分阶段目标别想一口吃成胖子很多人学编程失败不是不够聪明而是目标定得太飘。一上来就想着“做一个完整的网站”结果被各种框架和概念淹没。我更建议你把学习JavaScript拆成几个小阶段每个阶段都完成一个明确的闭环。第一阶段是语法打底大概花两到四周熟悉我前面提到的变量、数据类型、函数和基本运算。这个阶段的验收标准不是“看完教材”而是能不看笔记独立写出筛选数据、计算总分这样的小函数。第二阶段是学会操作页面也就是所谓的DOM操作。它让JavaScript有了“看得见”的效果点击按钮、修改文字、动态添加列表项练到这一步你会特别有成就感因为你写的代码开始影响真实页面了。第三阶段是异步编程和网络请求。这时你可以尝试调用公开的数据接口把返回的数据渲染到页面上。只要能把这一步走通你已经能做一个很实用的小工具了比如一个实时天气展示页、一个榜单数据列表。第四阶段才是框架和工程化。在你对原生JavaScript有了基本把握后再去看主流框架、构建工具就不会被各种概念吓到了因为你已经知道它们解决的是什么问题。7.2 保持手感的三条经验第一每学一个新语法都立刻在浏览器控制台里敲几遍。敲和看完全不是一回事指尖的记忆比眼睛的记忆可靠得多。第二准备一个“错题本”。不需要很精美就用一个文本文件记下你踩过的坑、报错信息和解决办法。这个习惯听起来土但我每次带新人都会强烈推荐。因为编程中遇到的大部分错误都是重复出现的有本子在第二次遇到五分钟就能解决。第三学完一个知识点就造一个小项目。哪怕项目再小比如一个能换算单位的工具、一个随机抽签器都值得做完。真刀真枪地用代码解决一个完整问题和看十个教程视频是完全不同的体验。我个人的体会是JavaScript的语法复杂度在主流语言里算很友好的真正劝退新人的往往是一次没跑通之后的挫败感。所以每次遇到报错先别急着把“这行代码”删掉停下来读一遍错误信息再想想刚才说的调试方法把排查问题本身当成一次练习。这个系列后续会一点点深入语法、函数、对象、异步等各个模块每篇文章我都会尽量让内容可以直接上手。只要你今天把环境搭好跑通第一段代码就算正式上路了剩下的事情就是按部就班地往前走。