何雨果的知识库

Appearance

JavaScript 语言基础 ​

核心基础 JavaScript ES6

一、JavaScript 的诞生与定位 ​

1.1 历史背景 ​

1995 年，Netscape 团队希望让 Web 更加 动态化 ——支持动画和实时用户交互。在此之前，所有计算和业务逻辑都在 服务器端 完成，浏览器仅负责展示静态 HTML。

关键人物 Brendan Eich 被委托创建一门新语言，传说他仅用 10 天 就完成了 JavaScript 的初始设计。

命名趣事

JavaScript 最初叫 LiveScript。改名为 JavaScript 纯粹是营销策略——90 年代 "Java" 这个词就像今天的 "AI" 一样火热。实际上，Java 和 JavaScript 的关系就像 car 和 carpet 一样 ——几乎没有关系。

1.2 ECMAScript 标准 ​

由于各浏览器实现不一致（微软逆向工程出了 JScript），ECMA（欧洲计算机制造商协会）对语言进行了 标准化，这就是 ECMAScript 的由来。

  • ES5、ES6 中的 ES = ECMAScript
  • ES6（2015 年发布）是一次重大更新，引入了大量现代特性

1.3 解释型 vs 编译型 ​

特性JavaScript（解释型）Java（编译型）
执行方式逐行解释执行先编译为字节码再执行
速度现代引擎（V8）已非常快传统上更快
使用场景前端 + 后端 + 移动端企业应用、Android

1.4 脚本语言的含义 ​

"Script" 的含义与戏剧中的 剧本 类似——告诉演员（HTML 元素）该做什么：

javascript
// 1秒后显示 h1，再1秒后显示 p
// h1 的文字变为 "Hello"
// p 的文字变为 "World"

JavaScript 就是 Web 页面的 导演剧本，HTML 元素就是 演员。

二、Alert 与基本语法 ​

2.1 alert() 弹窗 ​

javascript
alert("Hello");  // 弹出包含 "Hello" 的对话框

语法解析：

组成部分作用
alert关键字（函数名），浏览器认识的指令
(...)圆括号，包裹要传入的内容
"Hello"字符串，显示在弹窗中的消息
;分号，标记语句结束（类似英文的句号）

2.2 Chrome 开发工具 ​

两种编写 JavaScript 的方式：

  1. Console：逐行执行，适合快速测试
    • 多行输入：按住 Shift + Enter 换行
  2. Sources > Snippets：编写完整脚本后一次执行
    • 创建 index.js 文件
    • Cmd + Enter（Mac）或 Ctrl + Enter（Win）运行

2.3 引号与分号规范 ​

注意事项

  • 编程引号 "..." 与文字处理器引号 "..." 是 不同的符号，从 Word 复制代码可能导致错误
  • JavaScript 中 单引号和双引号功能相同，但字符串推荐使用 双引号 "..."
  • 每条语句以 分号 ; 结尾
  • 关键字与圆括号之间 不加空格：alert("Hi") ✅ vs alert ("Hi") ❌

三、数据类型（Data Types） ​

JavaScript 有三种 基本数据类型（Primitive Types）：

3.1 String（字符串） ​

一串字符，用引号包裹。引号告诉计算机"这不是代码，是文本"。

javascript
"Hello World"    // 字符串
'Hello World'    // 也是字符串（单引号亦可）

3.2 Number（数字） ​

不需要引号，直接书写。

javascript
123              // 整数
3.14             // 浮点数
2 + 3            // 运算结果为 5

3.3 Boolean（布尔） ​

只有两个值：true 或 false。

javascript
true             // 真
false            // 假

3.4 typeof 操作符 ​

用于检测数据类型：

javascript
typeof 23;        // "number"
typeof "Angela";  // "string"
typeof true;      // "boolean"

四、变量（Variables） ​

4.1 变量声明 ​

变量就像一个 带标签的盒子，用于存储数据：

javascript
var myName = "Angela";

解构：

  1. var — 关键字，创建一个新容器（盒子）
  2. myName — 变量名（盒子的标签）
  3. = — 赋值运算符（把东西放进盒子）
  4. "Angela" — 值（盒子里的内容）

4.2 变量的可变性 ​

var 代表 variable（可变的），存储的值可以修改：

javascript
var myName = "Angela";
myName = "Jack";        // 修改值时不需要再写 var

关键规则

var 关键字只在 创建 变量时使用一次。后续 修改 或 使用 变量时不需要再写 var。

4.3 prompt() 输入 ​

javascript
var yourName = prompt("What is your name?");
// 用户输入的值被保存到 yourName 变量中

4.4 字符串拼接与变量 ​

javascript
var message = "My name is " + myName + ", welcome " + yourName + "!";
alert(message);

4.5 变量交换（经典面试题） ​

javascript
var a = 3;
var b = 8;

// 使用临时变量交换
var c = a;   // c = 3
a = b;       // a = 8
b = c;       // b = 3

💡 思考方式：想象两个水桶——要交换内容，需要第三个空桶做中转。

五、变量命名规范 ​

5.1 命名规则（语言强制） ​

规则正确 ✅错误 ❌
不能使用关键字myVarvar
不能以数字开头my123123my
不能包含空格myNamemy name
只能含字母、数字、$、_my_namemy-name

5.2 命名约定（社区最佳实践） ​

为什么驼峰命名很重要

没有驼峰的 therapistfinder 可能被读成 the rapist finder 😱

使用驼峰：therapistFinder — 清晰明了。

六、字符串操作 ​

6.1 字符串拼接（Concatenation） ​

使用 + 号连接字符串：

javascript
"Hello" + " " + "World"   // "Hello World"

⚠️ 注意手动添加 空格字符串 " "，否则会紧贴在一起。

6.2 字符串长度（.length） ​

javascript
var name = "Angela";
name.length;             // 6

实战：Twitter 字数统计器

javascript
var tweet = prompt("Compose your tweet:");
alert("You have written " + tweet.length +
      " characters, you have " +
      (140 - tweet.length) + " characters remaining.");

6.3 字符串切片（.slice()） ​

javascript
var name = "Angela";
name.slice(0, 1);    // "A"    — 位置 0 到（不含）位置 1
name.slice(1, 5);    // "ngel" — 位置 1 到（不含）位置 5
name.slice(0, 3);    // "Ang"  — 快捷计算：3 - 0 = 3 个字符

程序员从 0 开始计数

第一个字符在 位置 0，第六个字符在 位置 5。

字符数 = 上界 - 下界（如 slice(1, 5) 返回 5 - 1 = 4 个字符）

实战：强制 140 字符限制

javascript
var tweet = prompt("Compose your tweet:");
alert(tweet.slice(0, 140));

6.4 大小写转换 ​

javascript
var name = "Angela";
name.toUpperCase();   // "ANGELA"
name.toLowerCase();   // "angela"

实战：名字首字母大写

javascript
var name = prompt("What is your name?");

// 1. 取首字母并大写
var firstChar = name.slice(0, 1).toUpperCase();
// 2. 取剩余部分并小写
var restOfName = name.slice(1, name.length).toLowerCase();
// 3. 拼接
var capitalisedName = firstChar + restOfName;

alert("Hello, " + capitalisedName);

七、算术运算 ​

7.1 基本运算符 ​

运算符功能示例
+加法2 + 3 → 5
-减法5 - 2 → 3
*乘法3 * 4 → 12
/除法10 / 3 → 3.333...
%取模（余数）9 % 6 → 3

7.2 模运算（Modulo）的用途 ​

javascript
// 判断奇偶数
45 % 2;   // 1 → 奇数（余数非 0）
44 % 2;   // 0 → 偶数（余数为 0）

7.3 运算优先级 ​

与数学一致：先乘除，后加减。使用 括号 明确优先级：

javascript
var cost = 3 + 5 * 2;       // 13 (先算 5*2)
var cost = (3 + 5) * 2;     // 16 (先算 3+5)

最佳实践

即使知道优先级规则，也推荐使用 括号 让代码意图一目了然。

7.4 自增与自减 ​

javascript
var x = 5;
x++;         // x = 6  (等同于 x = x + 1)
x--;         // x = 5  (等同于 x = x - 1)

x += 2;      // x = 7  (等同于 x = x + 2)
x -= 3;      // x = 4  (等同于 x = x - 3)
x *= 2;      // x = 8  (等同于 x = x * 2)
x /= 4;      // x = 2  (等同于 x = x / 4)

💡 C++ 这个名字就是程序员的冷笑话——意思是 "C 语言的升级版"（C + 1）。

八、实用数学函数 ​

8.1 Math.floor() — 向下取整 ​

javascript
Math.floor(3.9);    // 3
Math.floor(4.1);    // 4

8.2 Math.round() — 四舍五入 ​

javascript
Math.round(3.5);    // 4
Math.round(3.4);    // 3

8.3 Math.pow() — 幂运算 ​

javascript
Math.pow(2, 3);     // 8  (2 的 3 次方)
Math.pow(1.8, 2);   // 3.24

8.4 实战练习 ​

Dog Age 转换器：

javascript
var dogAge = prompt("How old is your dog?");
var humanAge = ((dogAge - 2) * 4) + 21;
alert("Your dog is " + humanAge + " years old in human years.");

BMI 计算器：

javascript
function bmiCalculator(weight, height) {
  var bmi = weight / Math.pow(height, 2);
  return Math.round(bmi);
}

← 返回 Web 开发研究