JavaScript 前端基础核心知识梳理

注意：<script> 标签内无需再写代码，否则会被忽略。

注释与结束符

注释：

• 单行：//，快捷键 Ctrl+/
• 块注释：/* ... */，快捷键 Shift+Alt+A

结束符：

• 英文分号 ; 代表语句结束。
• 虽然浏览器可自动推断，但为了团队风格统一，建议要么每句都写，要么都不写。

输入输出

理解人与计算机的交互规则：

// 向 body 输出内容（标签会被解析）
document.write('要出的内容');

// 弹出警告对话框
alert('要出的内容');

// 控制台打印
console.log('控制台打印');

执行顺序：按 HTML 文档流顺序执行。alert() 和 prompt() 会跳过页面渲染先执行。

字面量与变量

字面量：描述事物的值，如数字 1000、字符串 '黑马程序员'、数组 []、对象 {}。

变量本质：内存中存储数据的容器。

声明与赋值：

let age;
age = 18;
alert(age);

更新变量：

let age = 18;
age = 19; // 重新赋值
document.write(age); // 输出 19

多变量声明：

let age = 18, uname = 'pink';
// 建议一行一个，可读性更好

let vs var：

• var：旧写法，存在变量提升、重复声明等问题，现已不推荐使用。
• let：ES6 引入，解决 var 的问题，支持块级作用域，推荐作为默认选择。

常量

使用 const 声明永不改变的变量。

const G = 9.8;
console.log(G);

注意：常量必须初始化，且不允许重新赋值。

数据类型

JS 分为两大类：基本类型 和 引用类型。

1. Number（数字）：整数、小数、正负数。

   • JS 是弱类型语言，只有赋值后才知道具体类型。
   • NaN：表示计算错误或非数字结果，任何涉及 NaN 的操作仍返回 NaN。

2. String（字符串）：单引号、双引号或反引号包裹。

   • 拼接：'我叫' + '刘德华'
   • 模板字符串：使用反引号 `${name}今年${age}岁` 更方便。

3. Boolean（布尔）：true 或 false。

4. Undefined（未定义）：声明但未赋值，默认为 undefined。

5. Null（空）：代表'无'或'空'，通常用于对象占位。

检测类型： 使用 typeof 关键字。

typeof 123; // "number"
typeof 'abc'; // "string"

类型转换

隐式转换： 系统自动进行，规律不明确（如 + 号两边有字符串则转字符串）。

显式转换： 主动指定，更安全。

• 转数字：Number(), parseInt(), parseFloat()
• 转字符串：String()
• 转布尔：Boolean()

运算符

算术运算符： + - * / %

• 优先级：乘除取余 > 加减，括号优先。

一元运算符： ++ --（自增自减）

• 前置 ++i：先加后用。
• 后置 i++：先用后加。

比较运算符： == === != !== >= <=

• 开发中强烈推荐使用 === 和 !==，确保类型和值都相等。

逻辑运算符： && || !

• 短路特性：&& 一假则假，|| 一真则真。

流程控制

分支语句：

• if...else：单分支、双分支、多分支。
• switch：适合等值判断，需配合 break 防止穿透。
• 三元表达式：条件 ? 真值 : 假值，简洁取值。

循环语句：

• while：满足条件即执行。
• for：最常用，结构清晰（初始值、条件、变化量）。
• break：退出整个循环。
• continue：跳过本次循环。

数组

数组是有序的数据集合，索引从 0 开始。

声明与访问：

let arr = ['小明', '小刚'];
arr[0]; // '小明'

常用方法：

• 查询：arr[index]
• 修改：arr[index] = '新值'
• 新增：push() (末尾), unshift() (开头)
• 删除：pop() (末尾), shift() (开头), splice() (指定位置)
• 遍历：for...in 或 forEach

排序：

let arr = [4, 2, 5];
arr.sort((a, b) => a - b); // 升序
arr.sort((a, b) => b - a); // 降序

函数

函数用于封装代码，提高复用性。

声明与调用：

function sayHi() {
  console.log('嗨~');
}
sayHi();

参数与返回值：

• 形参：声明时的参数。
• 实参：调用时传入的值。
• return：返回结果，遇到 return 立即结束函数。

箭头函数：

const fn = (x, y) => x + y;

• 语法更简洁，this 指向外层作用域。

作用域：

• 全局：脚本顶层，随处可访问。
• 局部：函数内部，仅内部可访问。
• 闭包：函数访问外部变量的能力，常用于私有变量。

DOM 操作

DOM（文档对象模型）用于操作网页元素。

获取元素：

// 单个元素
const box = document.querySelector('.box');
// 多个元素（伪数组）
const items = document.querySelectorAll('li');

修改内容：

• innerText：纯文本。
• innerHTML：解析 HTML 标签。

修改样式：

box.style.width = '200px';
box.className = 'active'; // 替换类名
box.classList.add('active'); // 追加类名

事件处理：

btn.addEventListener('click', function(e) {
  console.log(e.target); // 触发元素
});

• 事件冒泡：子元素事件向上触发父元素。
• 阻止冒泡：e.stopPropagation()。
• 事件委托：将事件绑定到父元素，利用冒泡机制，减少注册次数。

BOM 与本地存储

定时器：

• setTimeout：延时执行一次。
• setInterval：间隔重复执行。

本地存储：

• localStorage：永久存储，关闭页面不丢失。
• sessionStorage：会话存储，关闭页面清除。
• 注意：只能存字符串，复杂对象需用 JSON.stringify 序列化。

进阶概念

原型与继承： 构造函数通过 prototype 共享方法，节省内存。实例对象通过 __proto__ 链接到原型链。

深拷贝与浅拷贝：

• 浅拷贝：只复制第一层，深层对象仍共享地址（如 Object.assign）。
• 深拷贝：完全独立复制（如 JSON.parse(JSON.stringify()) 或递归）。

异常处理：

try {
  // 可能出错的代码
} catch (error) {
  console.error(error.message);
} finally {
  // 无论是否出错都会执行
}

性能优化：

• 防抖（Debounce）：高频触发事件中，n 秒内只执行最后一次。
• 节流（Throttle）：连续触发事件中，n 秒内只执行一次。

掌握这些核心知识点，就能构建稳健的前端应用。