03JavaScript预备知识

程序员小羊！2026-06-08 17:03

✨博客主页： https://blog.csdn.net/m0_63815035?type=blog

💗《博客内容》：大数据、Java、测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识
📢博客专栏： https://blog.csdn.net/m0_63815035/category_11954877.html
📢欢迎点赞 👍 收藏 ⭐留言 📝
📢本文为学习笔记资料，如有侵权，请联系我删除，疏漏之处还请指正🙉
📢大厦之成，非一木之材也；大海之阔，非一流之归也✨

目录

一、JavaScript 概述

JavaScript 是一种运行在浏览器中的脚本语言，用于实现网页的交互行为。它与 Java 没有直接关系。

主要用途：

  • 操作 DOM（修改页面内容、样式）
  • 响应用户事件（点击、输入、滚动等）
  • 与服务器通信（发送请求、获取数据）
  • 处理数据与逻辑

JavaScript 代码通常写在 <script> 标签中，或保存在单独的 .js 文件中，通过 <script src="..."> 引入。

二、变量声明

JavaScript 中有三种声明变量的方式：var、let、const。

  • let：声明一个可以重新赋值的变量。
  • const：声明一个常量，声明时必须赋值，之后不可更改。
  • var：旧语法，存在作用域问题，现代开发中已不推荐使用。
js 复制代码 
let age = 25;
age = 26;   // 允许

const PI = 3.14;
PI = 3.1415;   // 报错

// 变量命名规则：
// - 只能包含字母、数字、下划线、美元符号
// - 不能以数字开头
// - 区分大小写
// - 推荐使用驼峰命名法，如 userName

三、数据类型

JavaScript 中的数据类型分为两类：原始类型和引用类型。

原始类型（存储值本身）：

  • number：整数和浮点数，例如 10、3.14
  • string：文本，可用单引号、双引号或反引号（模板字符串）
  • boolean：true 或 false
  • undefined：已声明但未赋值的变量
  • null：表示"空值"

引用类型：

  • object：键值对集合
  • array：有序列表，本质也是对象
  • function：可执行的代码块

使用 typeof 运算符可以查看类型：

js 复制代码 
typeof 123;       // "number"
typeof "hello";   // "string"
typeof true;      // "boolean"
typeof undefined; // "undefined"
typeof null;      // "object"  （这是历史遗留问题）

四、运算符

类别 运算符 说明
算术 + - * / % 加减乘除取余
赋值 = += -= *= /= ++ -- 赋值与复合运算
比较 == === != !== < > <= >= 比较两个值
逻辑 && `
字符串 + 拼接字符串

重要 ：建议始终使用 === 和 !==，因为它们不进行类型转换，结果更可预测。

js 复制代码 
5 == "5";   // true
5 === "5";  // false

五、条件语句

if...else if...else

js 复制代码 
if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch

适用于一个变量与多个固定值比较的情况。

js 复制代码 
let grade = "B";
switch (grade) {
    case "A":
        console.log("90分以上");
        break;
    case "B":
        console.log("80-89分");
        break;
    default:
        console.log("其他");
}

三元运算符

简单的条件赋值可以使用三元表达式。

js 复制代码 
let canVote = age >= 18 ? "可以投票" : "不能投票";

六、循环

for 循环

js 复制代码 
for (let i = 0; i < 10; i++) {
    console.log(i);
}

while 循环

js 复制代码 
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

for...of 循环（遍历数组或可迭代对象）

js 复制代码 
let fruits = ["苹果", "香蕉", "橘子"];
for (let fruit of fruits) {
    console.log(fruit);
}

for...in 循环（遍历对象属性）

js 复制代码 
let person = { name: "张三", age: 20 };
for (let key in person) {
    console.log(key + ":" + person[key]);
}

七、函数

函数声明

js 复制代码 
function add(a, b) {
    return a + b;
}

函数表达式

js 复制代码 
const subtract = function(a, b) {
    return a - b;
};

箭头函数（ES6）

js 复制代码 
const multiply = (a, b) => {
    return a * b;
};

// 如果只有一条 return 语句，可以简写
const divide = (a, b) => a / b;

默认参数

js 复制代码 
function greet(name = "访客") {
    console.log("你好，" + name);
}

八、数组

创建与访问

js 复制代码 
let arr = [10, 20, 30];
console.log(arr[0]);   // 10
arr[1] = 25;           // 修改

常用方法

方法 作用
push(x) 在末尾添加元素
pop() 删除并返回末尾元素
unshift(x) 在开头添加元素
shift() 删除并返回开头元素
indexOf(x) 查找元素的索引，找不到返回 -1
includes(x) 判断是否包含某元素
forEach(cb) 遍历数组
map(cb) 映射为新数组
filter(cb) 过滤返回新数组
find(cb) 查找第一个匹配的元素

示例

js 复制代码 
let nums = [1, 2, 3, 4];
let doubled = nums.map(n => n * 2);   // [2,4,6,8]
let evens = nums.filter(n => n % 2 === 0); // [2,4]

九、对象

对象由一组键值对组成，键是字符串（或 Symbol），值可以是任意类型。

js 复制代码 
let student = {
    name: "李华",
    age: 18,
    grade: "高三",
    sayHello: function() {
        console.log("我叫" + this.name);
    }
};

// 访问属性
console.log(student.name);
console.log(student["age"]);

// 调用方法
student.sayHello();

// 添加或修改属性
student.city = "北京";

this 在对象方法中指向调用该方法的对象。

十、DOM 操作

DOM（Document Object Model）将 HTML 文档表示为树形结构，JavaScript 可以对其进行操作。

获取元素

js 复制代码 
// 通过 id
let title = document.getElementById("main-title");

// 通过 CSS 选择器（返回第一个）
let box = document.querySelector(".box");

// 通过 CSS 选择器（返回所有）
let items = document.querySelectorAll("li");
// NodeList，可用 forEach 遍历

修改内容和属性

js 复制代码 
// 文本内容
div.innerText = "新文本";

// HTML 内容
div.innerHTML = "<strong>加粗</strong>";

// 属性
img.src = "photo.jpg";
input.value = "默认值";

修改样式

js 复制代码 
element.style.backgroundColor = "red";
element.style.fontSize = "16px";

创建与删除元素

js 复制代码 
// 创建
let newDiv = document.createElement("div");
newDiv.innerText = "我是新元素";

// 添加
parentElement.appendChild(newDiv);

// 删除
oldElement.remove();

十一、事件处理

事件表示用户在页面上的操作（如点击、鼠标移动、键盘输入等）。

添加事件监听

js 复制代码 
let btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
    alert("按钮被点击了");
});

常用事件

事件 触发时机
click 单击
dblclick 双击
mouseenter 鼠标进入元素
mouseleave 鼠标离开元素
input 输入框内容变化（实时）
change 表单元素值改变（通常失焦后）
submit 表单提交
load 页面或资源加载完成

事件对象

事件处理函数的第一个参数是事件对象，包含事件相关信息。

js 复制代码 
btn.addEventListener("click", function(e) {
    console.log(e.target);        // 实际被点击的元素
    e.preventDefault();           // 阻止默认行为，如链接跳转、表单提交
});

十二、常见内置函数

类型转换

js 复制代码 
Number("123");    // 123
parseInt("3.14"); // 3
parseFloat("3.14"); // 3.14
String(456);      // "456"
Boolean(0);       // false

定时器

js 复制代码 
// 延迟执行（仅一次）
setTimeout(function() {
    console.log("1秒后执行");
}, 1000);

// 间隔执行
let timer = setInterval(function() {
    console.log("每秒一次");
}, 1000);

// 停止间隔
clearInterval(timer);

控制台输出

js 复制代码 
console.log("普通日志");
console.error("错误信息");
console.warn("警告信息");

十三、注意事项与常见错误

  1. 变量提升 ：使用 var 声明的变量会被提升到作用域顶部，但值为 undefined，容易导致意外。建议统一使用 let 和 const。

  2. 相等比较 ：== 会进行类型转换，例如 0 == false 结果为 true。应使用 ===。

  3. 分号：JavaScript 可以自动插入分号，但某些情况下会产生歧义。建议手动加上语句末尾的分号。

  4. 作用域 ：let 和 const 是块级作用域（{} 内有效），var 是函数作用域。

  5. 异步问题 ：setTimeout、事件监听、网络请求都是异步操作，不会阻塞后续代码执行。不要期望它们在后续代码之前完成。

    js 复制代码 
    let data = "初始";
setTimeout(() => { data = "已更新"; }, 1000);
console.log(data); // 仍然是 "初始"

    解决这类问题需要学习 Promise、async/await。

  6. 加载时机 ：如果 <script> 放在 <head> 中且没有 defer 或 async 属性，执行时 DOM 尚未加载完成，无法获取到页面元素。解决方案：

    • 将 <script> 放在 </body> 之前
    • 使用 defer 属性
    • 监听 DOMContentLoaded 事件

十四、简单示例：计数器

html 复制代码 
<button id="increment">增加</button>
<span id="count">0</span>

<script>
    let count = 0;
    const btn = document.getElementById("increment");
    const span = document.getElementById("count");

    btn.addEventListener("click", function() {
        count++;
        span.innerText = count;
    });
</script>

这份文档可以作为入门阶段的参考材料。建议配合实际编码练习，并养成阅读错误信息、使用开发者工具的习惯。

csharp 复制代码 
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文
相关推荐
前端的阶梯1 小时前
Cursor 开发 Python 项目完全指南
前端·人工智能·后端
艾伦野鸽ggg1 小时前
JavaScript 基础语法速通
前端·javascript
不懂的浪漫1 小时前
AI 时代还需要买课吗？我用 Skills + Markdown + HTML 搭了一套自学系统
前端·人工智能·html·skill
前端的阶梯1 小时前
Conda 开发 Python 程序完全指南
前端·人工智能·后端
zhengfei6111 小时前
第2章 Agent 核心组件深度解析
前端·javascript·react.js
Linsk2 小时前
前端代码压缩对浏览器兼容性的影响
前端
yingyima2 小时前
凌晨3点的闹钟：分布式定时任务设计实战
前端
用户81423861188412 小时前
iOS ObjectC棕地应用集成Expo(React Native)的过程及踩坑
前端
lichenyang4532 小时前
HMRouter 完整能力清单：从初始化到拦截器/对话框/生命周期/转场动画一站式查阅
前端
热门推荐
01【AI】2026 年具身智能模型和世界模型总结02GitHub 镜像站点032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载05CC-Switch & Claude 基于 Linux 服务器安装使用指南06Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08CC-Switch 下载、安装与使用配置指南【2026.5.29】092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？10Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试