JavaScript 前端基础入门教程

// 这种是单行注释的语法

JavaScript 的结束符

• 使用英文 ; 代表语句结束。
• 实际开发中可写可不写，浏览器引擎可自动推断。
• 约定：为了风格统一，结束符要么每句都写，要么每句都不写。

JavaScript 输入输出语法

• document.write()：向 body 内输出内容，如果输出标签会被解析成网页元素。
• alert()：页面弹出警告对话框。
• console.log()：控制台打印。

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

字面量

字面量是在计算机中描述事物的值。

• 数字字面量：如 1000
• 字符串字面量：如 '黑马程序员'
• 数组字面量：[]
• 对象字面量：{}

变量

变量是什么

变量是计算机中用来存储数据的'容器'，可以让计算机变得有记忆。变量不是数据本身，而是用于存储数值的容器。

变量基本使用

1. 声明变量：使用关键字 let。

   let age;
   

2. 变量赋值：定义后初始化。

   let age = 18;
   alert(age);
   

3. 更新变量：重新赋值。

   let age = 18;
   age = 19;
   document.write(age);
   

4. 声明多个变量：逗号隔开，但不推荐，建议一行一个以提高可读性。

   let age = 18, uname = 'user';
   

变量的本质

内存是计算机中存储数据的地方。变量本质是程序在内存中申请的一块用来存放数据的小空间。

变量命名规则与规范

规则：

• 不能用关键字（如 let, var, if, for 等）
• 只能用下划线、字母、数字、$ 组成，且数字不能开头
• 区分大小写

规范：

• 起名要有意义
• 遵守小驼峰命名法（如 userName）

let 和 var 的区别

• var：较旧写法，存在变量提升、全局变量等问题，现在开发中一般不再使用。
• let：解决 var 的问题，推荐使用。
• const：声明常量，不允许重新赋值。

数组 (Array)

一种将一组数据存储在单个变量名下的优雅方式。

let arr = [];

• 数组按顺序保存，编号从 0 开始，称为索引或下标。
• 取值语法：数组名 [下标]

常量

使用 const 声明的变量称为'常量'。当某个变量永远不会改变时使用。

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

注意：常量不允许重新赋值，声明时必须赋值。

数据类型

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

基本数据类型

1. number：整数、小数、正数、负数。

   let age = 18;
   let price = 88.99;
   

   • NaN：代表计算错误或不正确的数学操作结果。

2. string：单引号、双引号或反引号包裹的数据。

   let uname = '小明';
   let goods = `小米`;
   

   • 字符串拼接：+ 运算符。
   • 模板字符串：使用反引号 `${变量}`。

3. boolean：true 或 false。

4. undefined：只声明不赋值时默认为此值。

5. null：代表'无'、'空'或'值未知'。

引用数据类型

• object：对象。

检测数据类型

使用 typeof 关键字。

typeof x; // 返回类型字符串

类型转换

隐式转换

系统内部自动转换。例如 + 号两边只要有一个是字符串，都会把另一个转成字符串。

显式转换

自己写代码告诉系统该转成什么类型。

• Number(数据)：转成数字类型。
• parseInt(数据)：只保留整数。
• parseFloat(数据)：可以保留小数。

常见错误

1. const 未赋值：声明时必须初始化。
2. 变量未定义：可能未声明或拼写错误。
3. 重复声明：let 或 const 不允许多次声明同一变量。
4. 常量重新赋值：常量不可变。
5. 字符串相加：prompt 获取的是字符串，需转换为数字型。

运算符

赋值运算符

简化代码，如 +=, -=, *=, /=, %=。

一元运算符

自增 ++，自减 --。常用于计数。

• 前置自增：++num（先加后用）
• 后置自增：num++（先用后加）

比较运算符

>, <, >=, <=, ==, ===, !==。

• 开发中判断是否相等强烈推荐使用 ===。
• NaN 不等于任何值，包括它本身。

逻辑运算符

&& (与), || (或), ! (非)。 解决多重条件判断。

运算符优先级

遵循标准优先级表，括号 () 可提升优先级。

语句

表达式和语句

• 表达式：可被求值的代码，有返回值。
• 语句：一段可执行的代码，不一定有值。

分支语句

• if 语句：单分支、双分支、多分支。
• 三元运算符：条件 ? 真值 : 假值。
• switch 语句：适合等值判断，需配合 break 防止穿透。

循环语句

• while 循环：满足条件期间重复执行。
• for 循环：最常用，结构清晰。
• continue：结束本次循环。
• break：退出整个循环。

数组进阶

数组操作

• 查：数组 [下标]
• 改：数组 [下标] = 新值
• 增：arr.push(), arr.unshift()
• 删：arr.pop(), arr.shift(), arr.splice()

遍历数组

使用 for 循环遍历。

排序

• 冒泡排序：简单排序算法。
• sort()：数组自带排序方法。

函数

为什么需要函数

实现代码复用，提高开发效率。

函数使用

• 声明：function 函数名 () {}
• 调用：函数名 ()
• 命名：动词前缀，小驼峰。

函数传参

• 形参：声明时的参数。
• 实参：调用时传递的参数。
• 默认值：function fn(x = 0) {}

函数返回值

使用 return 关键字返回结果。没有 return 默认返回 undefined。

作用域

• 全局作用域：script 标签或独立 js 文件外层。
• 局部作用域：函数内部或代码块 {} 内。
• 访问原则：就近原则，先局部后全局。

匿名函数与立即执行函数

• 函数表达式：let fn = function() {}
• 立即执行函数：(function(){})()，防止变量污染。

this 指向

• 普通函数：谁调用指向谁。
• 箭头函数：继承外层作用域的 this。

对象

什么是对象

无序的数据集合，用来详细描述某个事物。

let obj = { uname: '老师', age: 18 };

对象使用

• 属性：信息或特征（名词）。
• 方法：功能或行为（动词）。
• 操作：增删改查。

遍历对象

使用 for...in 循环。

内置对象

• Math：数学运算对象。
• Date：日期时间对象。

DOM 操作

DOM 简介

Document Object Model，用来呈现以及与 HTML 文档交互的 API。

获取元素

• document.querySelector('css 选择器')：获取第一个匹配元素。
• document.querySelectorAll('css 选择器')：获取所有匹配元素（伪数组）。

操作元素内容

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

操作元素属性

• 常用属性：src, href, title 等。
• 样式属性：element.style.property。
• 类名操作：className, classList.add/remove/toggle。

事件基础

• 事件监听：addEventListener。
• 事件类型：鼠标、焦点、键盘、文本等。
• 事件对象：包含触发时的相关信息（如 e.target, e.clientX）。
• this 指向：取决于调用方式。

事件进阶

• 事件流：捕获阶段、冒泡阶段。
• 阻止冒泡：e.stopPropagation()。
• 事件委托：利用冒泡特性，减少注册次数。

页面事件

• load：资源加载完毕。
• DOMContentLoaded：DOM 加载完毕。
• scroll：滚动事件。
• resize：窗口尺寸改变。

BOM 操作

• Window 对象：全局对象。
• 定时器：setTimeout, setInterval。
• Location 对象：URL 地址相关。
• History 对象：历史记录。

本地存储

• localStorage：永久存储，关闭页面不丢失。
• sessionStorage：会话存储，关闭窗口清除。
• JSON 处理：复杂数据类型需 JSON.stringify 和 JSON.parse。

正则表达式

介绍

用于匹配字符串中字符组合的模式。

• test()：判断是否匹配。
• exec()：检索符合规则的字符串。

元字符

• 边界符：^, $
• 量词：*, +, ?, {n,m}
• 字符类：[abc], [a-z]

修饰符

• i：忽略大小写。
• g：全局匹配。

进阶概念

作用域链

嵌套关系的作用域串联起来形成查找机制。

垃圾回收机制

JS 内存分配和回收自动完成。标记清除法是主流算法。

闭包

内层函数访问外层函数的变量。用于封闭数据和创建私有变量。

原型与继承

• 构造函数：new 关键字实例化。
• prototype：原型对象，共享方法。
• proto：实例对象指向原型对象。
• 原型链：对象成员查找机制。

深浅拷贝

• 浅拷贝：拷贝地址，多层对象仍相互影响。
• 深拷贝：递归拷贝对象，完全独立。

异常处理

• try/catch/finally：捕获和处理错误。
• throw：抛出异常。

性能优化

• 防抖 (Debounce)：n 秒内只执行一次，重置计时器。
• 节流 (Throttle)：n 秒内只执行一次，固定间隔。

本文涵盖了 JavaScript 从基础语法到 DOM/BOM 编程及进阶概念的完整知识体系，适合初学者系统学习。