JavaScript 从零基础到精通系列：前世今生与编程启蒙

摘要 本文是 JavaScript 从零到精通系列的开篇。我们将追溯 JavaScript 从 1995 年诞生至今的传奇历史理清它与 ECMAScript 的关系并一览各重要版本带来的变化。接着我们会搭建学习环境写下第一行代码然后详细学习变量、数据类型、运算符和类型转换。读完这篇你不仅知道这门语言从何而来还能写出简单的计算器程序为后续学习打好基础。一、诞生故事浏览器大战的产物1995 年互联网世界正处在第一次浏览器大战的风口浪尖。网景公司Netscape的 Navigator 浏览器占据主导地位而微软的 Internet Explorer 也开始崭露头角。网景公司意识到网页需要一种脚本语言让静态的 HTML 页面“动”起来于是他们聘请了 Brendan Eich。Brendan Eich 在 1995 年 5 月仅用了10 天就完成了这门语言的第一个版本。最初它叫做Mocha很快改名为LiveScript。为了蹭当时 Java 语言的热度网景公司与 Sun 公司合作在发布前又将它重新命名为JavaScript。必须说清楚JavaScript 和 Java 基本上没有任何关系这个命名纯粹是市场营销的产物就像“雷锋”和“雷峰塔”的区别。JavaScript 出世之后微软很快在 IE 中实现了自己的版本JScript。两种实现的不一致给开发者带来巨大痛苦因此标准化势在必行。1996 年 11 月网景公司将 JavaScript 提交给欧洲计算机制造商协会ECMA进行标准化这就有了ECMAScript这个名字通常简称ES。JavaScript 是 ECMAScript 标准最著名的实现除此之外还有 ActionScript已消亡等。二、ECMAScript 版本演进从 ES1 到 ES2024了解版本演变能让你明白为什么教程里会有多种写法以及怎样写出更现代化的代码。ES1 – ES3 (1997-1999)奠定了语言基础包括语法、类型、对象、异常处理等。ES3 是很多年的稳定基础。ES4 (放弃)过于激进的改革因各方分歧太大而流产。ES5 (2009)重要的里程碑。“严格模式”use strict出现新增了 JSON 支持、数组的forEach/map/filter/reduce等实用方法让开发体验大幅改善。ES6 / ES2015 (2015)划时代的巨变。从此每年发布一个新版本命名规则改为 ES 年份。ES6 带来了let/const、箭头函数、类class、模块import/export、Promise、解构赋值、模板字符串等无数现代 JavaScript 的核心特性。这是我们这个系列重点学习的内容。ES2016 – ES2024逐年演进加入async/awaitES2017颠覆异步编程、可选链操作符?.ES2020、逻辑赋值运算符ES2021、类私有字段#等。目前所有主流浏览器都已全面支持 ES6 及后续大部分特性因此我们完全可以直接学习现代 JavaScript不用再走一遍过时写法的弯路。三、为什么学习 JavaScript一句话JavaScript 是 Web 的“世界语”。它能做什么前端交互在浏览器里操作 HTML/CSS实现动画、表单验证、动态加载数据等它是唯一的原生语言。后端开发有了 Node.jsJavaScript 可以写服务器处理高并发、实时应用如聊天室。移动应用使用 React Native、FlutterDart但概念相近或 Weex 等可以开发安卓和 iOS App。桌面应用Electron 让 JavaScript 能构建 VS Code、Slack 等桌面软件。小程序与游戏微信小程序、H5 游戏引擎如 Cocos、Phaser都离不开它。无论你想专攻哪个方向JavaScript 都是一把金钥匙。四、环境搭建无需安装任何复杂软件作为零基础小白开始学习只需要两样东西一个现代浏览器Chrome、Edge 或 Firefox。按下F12或CtrlShiftI打开“开发者工具”切换到Console标签。这就是我们的 JavaScript 即时交互环境。一个代码编辑器推荐Visual Studio Code简称 VS Code免费且强大。下载安装后新建一个文件后缀名保存为.html或.js即可。对于写好的.js文件你可以在 HTML 中通过script srcapp.js/script引入然后在浏览器中打开 HTML 页面查看效果在 Console 中看到输出。当然也可以安装 Node.js直接在终端运行node app.js。我们将在后续篇目中逐步引导。五、第一个程序Hello, World!打开 Chrome 的 Console输入以下内容并回车console.log(Hello, World!);你会看到控制台打印出了Hello, World!。console.log()是最基本、最常用的调试方法它可以把任何内容“印”出来。现在在 VS Code 中创建一个文件01_hello.html写入!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的第一个 JavaScript 程序/title /head body script // 这是一个单行注释 /* 这是一个多行注释 */ alert(欢迎来到 JavaScript 的世界); // 弹出对话框 console.log(我在控制台悄悄说话); /script /body /html用浏览器打开这个文件你会看到一个弹出框控制台里也有输出。//和/* */是注释浏览器会完全忽略它们只为了给开发者做笔记。写好注释是非常好的习惯。六、变量存储数据的容器变量就是一个有名字的盒子用来存放数据。在现代 JavaScript 中我们用let和const来声明变量。// let 声明的变量值可以改变 let myName 小白; console.log(myName); // 输出: 小白 myName JavaScript Master; console.log(myName); // 输出: JavaScript Master ​ // const 声明的常量一旦赋值就不能再改 const birthYear 2000; // birthYear 2020; // ❌ 这行会报错Assignment to constant variable console.log(birthYear); ​ // 古老的方式 var有缺陷现在不推荐但你需要能看懂旧代码 var oldSchool 这是旧写法;let和const的好处拥有块级作用域避免了很多奇奇怪怪的问题。一般原则先用const如果确定变量的值需要改变再改成let。变量命名规则只能包含字母、数字、下划线_和美元符号$且不能以数字开头。区分大小写myName和myname是两个不同的变量。建议使用“驼峰命名法”myFirstName。七、数据类型JavaScript 世界的居民JavaScript 是动态类型语言同一个变量可以随时存放不同类型的值。它的数据类型分为两大类基本类型和引用类型。我们先拿下基本类型。7.1 Number数值不分整数和浮点数统一为 64 位浮点数。let age 25; let price 99.99; let infinity 1 / 0; // Infinity 正无穷 let notANumber hello * 3; // NaN (Not a Number)但类型依然是 number console.log(typeof age); // number console.log(typeof price); // number console.log(typeof infinity); // number console.log(typeof notANumber); // number注意NaN是一个特殊值表示“不是一个数字”但它属于数字类型。判断一个值是不是NaN要使用Number.isNaN()而不是。7.2 String字符串用单引号、双引号或反引号包裹的内容。let firstName 小明; let saying 他常说学无止境; let age 25; // ES6 模板字符串可以嵌入变量和表达式 let greeting 大家好我是${firstName}${saying}今年${age}岁; console.log(greeting);反引号支持的“字符串插值”功能强大可以多行且可以放入任何有效的 JavaScript 表达式。7.3 Boolean布尔值只有true和false两个值用于逻辑判断。let isLoggedIn true; let isMember false; console.log(5 3); // true7.4 Undefined 和 Nullundefined变量声明了但未赋值就是undefined。let x; console.log(x); // undefinednull表示一个空值或不存在的对象引用一般需要手动设置。let emptyValue null;typeof null会返回object这是 JavaScript 诞生时就存在的著名 bug但一直保留至今记住就好。7.5 Symbol 和 BigInt了解SymbolES6创建唯一的标识符用于对象属性名等高级场景。BigIntES2020用于表示大于 2^53-1 的整数在普通数字后加n例如9007199254740993n。八、运算符执行运算和判断8.1 算术运算符-*/%取余**指数 ES7console.log(10 / 3); // 3.3333333333333335 console.log(10 % 3); // 1 (求余数) console.log(2 ** 10); // 1024 (2的10次方) // 字符串拼接当 的一边是字符串时会进行拼接 console.log(5 3); // 53 console.log(5 - 3); // 2 (减号会尝试将字符串转为数字)8.2 赋值运算符-*等。let num 10; num 5; // 相当于 num num 5现在 num 为 158.3 比较运算符!!重点尽量使用严格相等和严格不等!它会同时比较值和类型。console.log(5 5); // true (会发生类型转换) console.log(5 5); // false (类型不同直接 false) console.log(null undefined); // true console.log(null undefined); // false为了避免 bug在任何情况下都优先使用只在你真的需要类型转换时使用。8.4 逻辑运算符逻辑与||逻辑或!逻辑非let a true, b false; console.log(a b); // false (两者都真才真) console.log(a || b); // true (一真即真) console.log(!a); // false // 短路运算常用于设置默认值 let userName ; let displayName userName || 匿名用户; // 匿名用户8.5 自增/自减和--有前置和后置的区别初学阶段建议拆分步骤写得更明确避免混淆。let counter 0; counter; // counter 变为 1九、类型转换数据变形记JavaScript 会自动进行类型转换隐式转换但作为开发者最好掌握显式转换。转为字符串String()或toString()方法。let num 100; let str String(num); // 100 let str2 num ; // 隐式转换也成100转为数字Number()、parseInt()、parseFloat()。console.log(Number(123)); // 123 console.log(Number(123abc)); // NaN console.log(parseInt(123abc)); // 123它会尽量解析 console.log(parseFloat(3.14.15)); // 3.14 console.log(45); // 一元 可转为数字 45转为布尔值Boolean()。以下为“假值”falsy会被转为false0、、null、undefined、NaN、false。其余全是true。console.log(Boolean(0)); // false console.log(Boolean( )); // true (空格字符串非空)十、实战编写一个简单的控制台计算器我们已经具备了最基础的知识现在来把它们用起来。在 Console 或 Node.js 环境中我们可以通过prompt浏览器或固定的变量来模拟输入。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title简易计算器/title style /* 页面样式美化 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f2f5; } .calculator { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.1); width: 350px; } h2 { text-align: center; margin-bottom: 20px; color: #333; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; color: #666; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; } button { width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; margin: 10px 0; } button:hover { background-color: #0056b3; } .result { margin-top: 20px; padding: 15px; background-color: #e9f7fe; border-radius: 6px; text-align: center; font-size: 18px; color: #333; font-weight: bold; } /style /head body div classcalculator h2简易计算器/h2 !-- 输入框1 -- div classinput-group label数字1/label input typenumber idnum1 placeholder请输入数字 required /div !-- 运算符选择 -- div classinput-group label运算符/label select idoperation option value 加法/option option value-- 减法/option option value*× 乘法/option option value/÷ 除法/option /select /div !-- 输入框2 -- div classinput-group label数字2/label input typenumber idnum2 placeholder请输入数字 required /div !-- 计算按钮 -- button onclickcalculate()开始计算/button !-- 结果显示区域 -- div classresult idresult/div /div script // 计算器核心计算函数 function calculate() { // 获取用户输入的值 const num1 parseFloat(document.getElementById(num1).value); const num2 parseFloat(document.getElementById(num2).value); const operation document.getElementById(operation).value; let result; // 校验输入是否为有效数字 if (isNaN(num1) || isNaN(num2)) { result 请输入有效的数字; } else { // switch 运算逻辑 switch (operation) { case : result num1 num2; break; case -: result num1 - num2; break; case *: result num1 * num2; break; case /: // 除数不能为0判断 if (num2 ! 0) { result num1 / num2; } else { result 错误除数不能为0; } break; default: result 不支持的运算; } } // 把结果显示在页面上 控制台打印 const resultDom document.getElementById(result); resultDom.innerText ${num1} ${operation} ${num2} ${result}; console.log(${num1} ${operation} ${num2} ${result}); } /script /body /html总结 我们走过了 JavaScript 从 1995 年匆匆诞生到现代 ES 规范演进的风雨之路清楚了它和 ECMAScript 的关系。搭建好了最简开发环境写出了第一行console.log。随后详细学习了let/const变量声明、七大数据类型、运算符以及类型转换。这些看似枯燥的基础正是构筑万丈高楼的坚实砖石。如果这篇文章帮你解决了实操上的困惑别忘记点击点赞、分享也可以留言告诉我你遇到的其它问题我会尽快回复。动手练习是掌握编程最快的方法请务必亲手敲一遍本文的所有示例代码并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源谢谢大家。