一、JavaScript 简介与第一个变量先建立整体认识JS 是什么、变量又是什么再写出第一段能跑的代码。JavaScript简称 JS是一种广泛用于网页开发的编程语言。它本质上是一种脚本语言script——按一定格式编写、由运行环境浏览器 / Node逐行解释执行的可执行文件。也就是说你写的代码不需要像 Java 那样先“编译”写好就能直接在浏览器里跑。写程序离不开“存数据”。在 JS 里变量就是装数据的盒子盒子贴个名字变量名里面的值可以随时换。声明变量最常用的关键字是let。需要注意的是如果一个变量被声明了但还没有赋值它的值就是undefined未定义。▶ 示例变量先声明、后赋值、再更换let message Hello; // 声明变量并赋初值 console.log(message); // 输出: Hello message World; // 之后可以把盒子里的值换成别的 console.log(message); // 输出: World let notSet; // 只声明、不赋值 console.log(notSet); // 输出: undefined 关联提示变量是用来“装东西”的而真正把东西“显示出来”要靠输出语句。接下来就看怎么把变量的值打印到控制台。二、输出console.log学会用 console.log 把程序运行的中间结果打印出来这是初学者调试代码最重要的手段。console.log()用于向控制台显示消息、输出信息。在网页里它是开发者工具F12的 Console 面板在 Node 环境里它就是终端。它最常见的用途是调试——检查代码某一行算出来的结果到底是什么。▶ 示例console.log 的多种用法console.log(Hello); // 直接输出字符串 console.log(年龄:, 18); // 逗号分隔多个值都会依次打印 console.log(1 2); // 输出计算结果 3 console.log(姓名:, message); // 打印变量的值⚠️ 注意console.log()输出的是给开发者看的不会显示到网页界面上。想让用户看到内容需要用alert()或操作页面元素后续 DOM 章节会讲。三、变量let 与 const 的区别声明变量主要用 let 和 const它们的核心区别在于“值能不能改”。下面用对比讲清楚。在 JS 里let和const都能声明变量但语义不同let声明的变量可以稍后更新或重新赋值也可以先声明、暂不赋值。constconstant常量声明的变量不允许被更改因此必须在声明时立即赋值写成const age;会直接报错。▶ 示例let 可改const 必须初始化且不可改// —— let可以先声明不赋值也能反复改 —— let age; // ✅ let 允许先声明、暂不赋值 age 20; age 21; // ✅ 可以重新赋值 // —— const声明时必须赋值且之后不能改 —— const PI; // ❌ 报错const 声明时必须立即赋值 const PI 3.14; // ✅ 正确写法 PI 3.15; // ❌ 报错const 的值不允许被更改 教学口诀“会变用 let不变用 const”。实际开发里默认优先用const只有确定要改的时候才用let。四、数据类型与 typeof变量能装数字、文字等各种类型的数据。JS 是“动态类型”语言类型的确定方式跟 Java 这类“静态类型”语言完全不同。4.1 动态类型 vs 静态类型类型含义代表语言动态类型声明变量时无需指定数据类型类型在程序运行时根据赋给变量的值自动确定JavaScript、Python静态类型数据类型在写代码时就固定了值一旦创建通常不能随意更改类型Java、C因为 JS 是动态类型同一个变量可以先装数字、再装字符串解释器不会报错。▶ 示例同一个变量切换不同类型let value 10; console.log(typeof value); // number value hello; // 不用重新声明直接变成字符串 console.log(typeof value); // string let empty; console.log(typeof empty); // undefined声明了但没赋值4.2 typeof 工具typeof是一个运算符可以查看一个变量或值当前是什么类型返回结果是字符串形式例如number、string、undefined、boolean等。 关联提示字符串string是 JS 里最常用的数据类型之一。理解了类型之后下一节我们先看字符串怎么创建和拼接再深入它的各种处理方法。五、字符串基础与拼接字符串就是一段文字。本节讲它的创建方式、不可变性以及如何把多段文字拼到一起。5.1 创建字符串使用单引号或双引号都可以创建字符串。需要记住一个关键性质字符串一旦被创建就不能被改变不可变。你“修改”字符串本质上是让变量重新指向一个全新的字符串。▶ 示例单/双引号创建变量重新赋值let developer Jessica; // 双引号 let name Tom; // 单引号也完全可以 console.log(developer); // 输出: Jessica developer Quincy; // 不是改了原字符串而是让变量指向新字符串 console.log(developer); // 输出: Quincy5.2 拼接与追加字符串之间用连接如果想在当前字符串后面追加内容可以用运算符等价于str str 新内容。▶ 示例 拼接 与 追加let greeting Hello, developer !; console.log(greeting); // Hello, Quincy! let str Hello; str World; // 在末尾追加等价于 str str World console.log(str); // Hello World六、字符串处理常用方法光会拼接还不够实际开发要频繁“取字符、查位置、改大小写、去空格”。这一节把最常用的字符串方法一次讲清。6.1 取字符括号表示法 length可以通过方括号表示法访问字符串里的每个字符下标从 0 开始。字符串的length属性告诉你它共有多少个字符因为从 0 计数所以想拿最后一个字符要用length - 1。▶ 示例按下标取字符、取最后一个let greeting hello; console.log(greeting[1]); // e第 2 个字符 console.log(greeting.length); // 5共 5 个字符 console.log(greeting[greeting.length - 1]); // o最后一个字符 let firstTwo greeting[0] greeting[1]; // 取前两个字符 console.log(firstTwo); // he6.2 转义字符字符串里想表示“引号本身”或“换行”要用反斜杠\开头的转义字符例如\单引号、\双引号、\n换行。▶ 示例用 \ 在单引号字符串里放单引号let quote It\s a beautiful day!; // \ 表示单引号字符本身 console.log(quote); // Its a beautiful day! let multi 第一行\n第二行; // \n 表示换行 console.log(multi);6.3 查找indexOf 与 includesindexOf(子串)返回子串第一次出现的位置下标找不到就返回 -1。includes(子串)返回布尔值true/false表示是否包含该子串区分大小写。▶ 示例indexOf 找不到返回 -1includes 区分大小写let sentence JavaScript is awesome!; console.log(sentence.indexOf(JavaScript)); // 0 console.log(sentence.indexOf(fantastic)); // -1没找到 console.log(sentence.includes(awesome)); // true console.log(sentence.includes(Awesome)); // false大小写不同6.4 截取sliceslice(起始, 结束)从起始下标提取到结束下标之前不包含结束位置。省略第二个参数则截到末尾参数写负数表示从末尾倒数。▶ 示例slice 含头不含尾负数从末尾数let message Hello World; console.log(message.slice(0, 5)); // Hello从 0 到 5不含 5 console.log(message.slice(6)); // World省略结束截到末尾 console.log(message.slice(-5)); // World负数从末尾倒数 5 个6.5 大小写与去空格toUpperCase()/toLowerCase()转大写 / 转小写。trim()删除两端空白trimStart()、trimEnd()只针对某一侧。▶ 示例console.log(abc.toUpperCase()); // ABC console.log(ABC.toLowerCase()); // abc let s hi ; console.log(s.trim()); // hi去掉两端空白 console.log(s.trimStart()); // hi console.log(s.trimEnd()); // hi6.6 替换与重复replace、repeatreplace(旧, 新)把匹配到的内容替换掉只替换第一个且区分大小写。repeat(次数)把字符串重复指定次数次数必须是非负整数小数会向下取整。▶ 示例replace 只换第一个repeat 重复let text I love JavaScript!; let newText text.replace(JavaScript, coding); console.log(newText); // I love coding!只替换第一个匹配 console.log(ha.repeat(3)); // hahaha console.log(ha.repeat(2.9)); // hahaha2.9 向下取整为 26.7 获取用户输入prompt()prompt(提示语, 默认值)会弹出一个小对话框让用户输入返回值永远是字符串。它有两个参数第一个是对话框提示文字必填第二个是输入框里的默认文字可选。要注意prompt()会暂停脚本执行直到用户点确定或取消。▶ 示例let input prompt(请输入你的名字, Guest); // 弹窗输入返回字符串 console.log(你好 input);⚠️ 注意prompt()返回的是字符串。如果用户输入数字想做加法运算记得先用Number()转换类型否则会变成字符串拼接。七、函数从定义到作用域当一段逻辑需要反复执行、或需要“接收输入→处理→返回结果”时就该用函数。本节覆盖定义、参数、返回值、箭头函数与作用域。7.1 定义与调用函数是可重复使用的代码片段用来执行特定任务或计算一个值——可以理解为一台“机器”你放原料进去它产出结果。定义用function 函数名(){...}调用时写函数名加一对括号()。▶ 示例定义 greet再调用它function greet() { console.log(Hello, Jessica!); } greet(); // 调用函数 → 输出 Hello, Jessica!7.2 参数占位符参数是函数定义里的“占位符”代表调用时传进来的具体值。有了参数同一个函数就能处理不同的输入被多次调用。▶ 示例用 name 参数让函数通用function greet(name) { // name 是参数占位符 console.log(Hello, name !); } greet(Alice); // Hello, Alice! greet(Nick); // Hello, Nick!7.3 返回值 return如果函数要返回一个值给调用者需要用return语句。有 return 的函数像个计算器调用处拿到返回值继续用没有 return 的函数只是“做件事”拿不到值。▶ 示例return 把结果交回去function calculateSum(num1, num2) { return num1 num2; // 返回计算结果 } console.log(calculateSum(3, 4)); // 77.4 匿名函数与默认参数匿名函数就是“没有名字的函数”通常直接赋值给一个变量。默认参数则是在定义时给参数预设一个值调用时如果没传该参数就用默认值。▶ 示例匿名函数 默认参数// 匿名函数没有名字赋给变量 sum const sum function(num1, num2) { return num1 num2; }; console.log(sum(3, 4)); // 7 // 默认参数没传 name 时用 Guest function greetings(name Guest) { console.log(Hello, name !); } greetings(); // Hello, Guest!用了默认值 greetings(Anna); // Hello, Anna!用了传入值7.5 箭头函数箭头函数是 ES6 引入的更简洁写法。规则只有一个参数时可省略括号没有参数时必须保留空括号()。▶ 示例箭头函数的三种写法// 完整写法 const sayHi (name) { console.log(Hello, name !); }; sayHi(Tom); // Hello, Tom! // 只有一个参数可省略括号 const sayHi2 name console.log(Hello, name !); // 没有参数必须保留空括号 const sayHello () console.log(Hello!);7.6 作用域全局 / 局部 / 块“作用域”决定变量在哪能访问。全局作用域的变量任何地方都能用局部函数作用域的变量只有函数内部能用块作用域{}内如 if/for的变量只有那个块里能用。一句话记内层能读外层外层读不到内层。作用域在哪声明谁能访问活多久能用哪些关键字全局所有函数、所有 {} 之外最顶层文件里任何地方程序运行期间一直活着var / let / const 都行局部函数函数内部只有这个函数内部函数调用时创建返回就销毁var / let / const 都行块{}if / for / while 的 {} 内部只有这个 {} 内部块执行到时创建走出 } 就销毁只有 let / constvar 会“漏”出去▶ 示例作用域的访问规则var globalVar 我是全局变量; // 全局作用域 function greet() { let message Hello, local scope!; // 局部作用域 console.log(globalVar); // ✅ 内层能读外层 console.log(message); // ✅ 自己的当然能读 if (true) { let blockVar 我在块里; // 块作用域 console.log(blockVar); // ✅ 块内可读 console.log(message); // ✅ 块能读函数层的 message } console.log(blockVar); // ❌ 报错出了块就没了 } greet(); console.log(message); // ❌ 报错出了函数就没了 console.log(globalVar); // ✅ 全局的随处可读 教学建议初学者最容易犯的错就是“在函数外想用函数里的变量”。讲作用域时强调一句变量声明在哪层就只能在哪层及更里层用。八、补充运算符速查 原文件 6 为空此为补充原始笔记里“6.数据类型运算符”是空白文件。结合文件名这里补一份最常用的运算符速查方便教学时直接查阅。类别运算符作用示例算术 - * / % **加 减 乘 除 取余 幂10 % 3 → 1、2 ** 3 → 8赋值 - * /赋值 / 运算后赋值x 2即x x 2比较 ! ! 比较大小/相等返回布尔值3 3 → false逻辑 || !与 / 或 / 非true false → false三元条件 ? 值1 : 值2简化 if-elseage18 ? 成年:未成年⚠️ 重点区分会做类型转换后比较宽松严格比较类型和值。教学上建议一律用避免0 这类诡异结果。▶ 示例三元运算符let age 20; let status age 18 ? 成年 : 未成年; console.log(status); // 成年