[js速通#1]HTML Learn Data Day 5

js的基本语法和c++的很像啊，刚好我也会一点c++，准备速通js，然后入手vue3

学习视频: B站学习视频

1. 基本环境与变量

JS 代码通常写在 HTML 的 <body> 标签底部，使用 <script> 包裹，以避免阻塞页面渲染。

变量声明 (Declaration)

JS 是弱类型动态语言。除了 var 和 let，现代开发（ES6+）中还有一个极高频使用的 const。

var (老旧) ：存在变量提升 (Hoisting)，且只有函数作用域，没有块级作用域。Vue3 开发中极少使用。
let (推荐)：块级作用域（类似 C++ 的局部变量），解决了变量提升导致的逻辑混乱。
const (核心) ：声明常量（引用不可变）。默认首选 ，只有变量确实需要修改时才退化为 let。

关于变量提升：

引擎会在执行代码前扫描变量声明，将其"提升"到作用域顶部。

js 复制代码

console.log(num); // 输出 undefined，而不是报错（这就是提升的副作用）
var num = 10;

// 相当于：
// var num;
// console.log(num);
// num = 10;

数据类型：

主要分为原始类型（Number, String, Boolean, Null, Undefined, Symbol）和引用类型（Object）。

使用 typeof 可以在运行时检查类型：

js 复制代码

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)，而不是数组的值。

js 复制代码

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

经典面试题：反转字符串

js 复制代码

// 注意：split() 必须加空引号 '' 才能按字符切割
let str = "hello";
let restr = str.split('').reverse().join(""); 
console.log(restr); // "olleh"

6. 函数 (Function)

传统写法

JavaScript

js 复制代码

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，键值对集合。

js 复制代码

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: 需要实例化。

js 复制代码

let d = new Date();
let timestamp = d.getTime(); // 时间戳 (ms)
console.log(d.toLocaleString()); // 本地时间格式

⚠️ 尾声 & 下一步

下次将更新 DOM 操作与 CSS 控制。

Action Item: 建议在 Chrome 控制台 (F12 -> Console) 直接输入代码运行，体验 JS 的动态特性。