js的基本语法和c++的很像啊，刚好我也会一点c++，准备速通js，然后入手vue3
学习视频: B站学习视频
1. 基本环境与变量
JS 代码通常写在 HTML 的 <body> 标签底部，使用 <script> 包裹，以避免阻塞页面渲染。
变量声明 (Declaration)
JS 是弱类型动态语言。除了 var 和 let，现代开发（ES6+）中还有一个极高频使用的 const。
var(老旧)：存在变量提升 (Hoisting)，且只有函数作用域，没有块级作用域。Vue3 开发中极少使用。let(推荐)：块级作用域（类似 C++ 的局部变量），解决了变量提升导致的逻辑混乱。const(核心)：声明常量（引用不可变）。默认首选，只有变量确实需要修改时才退化为let。
关于变量提升：
引擎会在执行代码前扫描变量声明，将其“提升”到作用域顶部。
console.log(num); // 输出 undefined，而不是报错（这就是提升的副作用）
var num = 10;// 相当于：
// var num;
// console.log(num);
// num = 10;
数据类型：
主要分为原始类型（Number, String, Boolean, Null, Undefined, Symbol）和引用类型（Object）。
使用 typeof 可以在运行时检查类型：
console.log(typeof 10); // "number"
console.log(typeof null); // "object" (这是 JS 的一个历史遗留 Bug，由于二进制前三位是0)
2. 输入输出 (I/O)
| 语法 | 作用 | 备注 |
|---|---|---|
console.log() |
输出到控制台 (F12) | 最常用。用于调试对象和逻辑。 |
alert() |
浏览器弹窗 | 阻塞式，影响体验，仅用于测试。 |
document.write() |
写入 HTML 文档流 | 不推荐。会导致页面重绘甚至覆盖现有内容，现代开发基本废弃。 |
3. 流程控制 (Control Flow)
C++ 程序员熟悉的 if, switch, while, break, continue 在 JS 中基本一致。
循环的坑 (Loop)
for...in，在 JS 中主要用于遍历对象的键 (Key)，而不是数组的值。
let arr = ['a', 'b'];// ❌ 不推荐用于数组：遍历的是索引 "0", "1" (字符串类型)
for (let i in arr) {console.log(i);
}// ✅ 推荐 (ES6)：for...of，遍历的是值 (类似 C++11 的 range-based for)
for (let val of arr) {console.log(val);
}
比较运算符
==(相等)：会发生隐式类型转换 (例如1 == "1"为true)。===(全等)：值和类型都必须相同。始终使用===。
4. 字符串 (String)
String 在 JS 中是原始类型，但调用方法时会临时包装成对象。
| 语法 | 示例 | 作用 | 备注 |
|---|---|---|---|
length |
str.length |
属性，返回长度 | 注意不是方法，不用加 () |
charAt() |
str.charAt(0) |
获取指定位置字符 | 也可用 str[0] |
concat() |
str1.concat(str2) |
拼接字符串 | 现代常用 + 或模板字符串 ${a}${b} |
substring() |
str.substring(0, 5) |
截取 (开始, 结束) | 推荐使用 |
slice() |
str.slice(0, 5) |
截取 (开始, 结束) | 推荐，支持负数索引 |
substr() |
str.substr(0, 5) |
截取 (开始, 长度) | ⚠️ 已废弃，避免使用 |
indexOf() |
str.indexOf('o') |
查找首次出现位置 | 找不到返回 -1 |
trim() |
str.trim() |
去除两端空格 | 表单输入处理必备 |
split() |
str.split(',') |
字符串 -> 数组 | 按指定分隔符切割 |
关于 substring 的容错性：
- 自动交换参数：
substring(10, 0)会自动变为substring(0, 10)。 - 负数处理：负数参数会被当作 0 处理。
5. 数组 (Array)
JS 数组是动态的、异构的（类似于 C++ 的 std::vector<std::any>）。
JavaScript
// 数组可以包含任意类型，且大小动态
let arr = ['1', 2, false, {name: 'obj'}, null];
常用方法：
| 语法 | 作用 | 备注 |
|---|---|---|
Array.isArray(x) |
判断是否为数组 | typeof 数组会返回 "object"，所以必须用这个 |
push() / pop() |
尾部 添加/删除 | 栈操作 (Stack) |
unshift() / shift() |
头部 添加/删除 | 队列操作 (Queue)，性能较差 |
join() |
数组 -> 字符串 | 默认用逗号连接 |
reverse() |
原地翻转数组 | 会修改原数组 |
splice() |
万能增删改 | 极其强大，建议查阅 MDN |
经典面试题：反转字符串
// 注意：split() 必须加空引号 '' 才能按字符切割
let str = "hello";
let restr = str.split('').reverse().join("");
console.log(restr); // "olleh"
6. 函数 (Function)
传统写法
JavaScript
function print(x) {console.log(x);// 无 return 默认返回 undefined
}
箭头函数 (Arrow Function) - ES6+
Vue3 高频考点。语法更简洁，且不绑定 this。
JavaScript
const add = (a, b) => {return a + b;
};// 简写：如果只有一行且是返回值，可省略 {} 和 return
const addSimple = (a, b) => a + b;
7. 对象 (Object)
类似 C++ 的 struct 或 map，键值对集合。
let obj = {name: "Geek",age: 25,// 对象方法的简写 (ES6)getAge() { return this.age;}
};
console.log(obj.name); // 访问属性
常用内置对象
-
Math: 静态工具类。
Math.max(),Math.floor(),Math.random()(0-1之间)。 -
Date: 需要实例化。
let d = new Date(); let timestamp = d.getTime(); // 时间戳 (ms) console.log(d.toLocaleString()); // 本地时间格式
⚠️ 尾声 & 下一步
下次将更新 DOM 操作与 CSS 控制。
Action Item: 建议在 Chrome 控制台 (F12 -> Console) 直接输入代码运行，体验 JS 的动态特性。