前端HTML编程5：JavaScript完全指南

// 问题1：变量提升
console.log(a); // undefined
var a = 10;

// 问题2：没有块级作用域
for (var i = 0; i < 3; i++) {

}
console.log(i); // 3

// 问题3：允许重复声明
var b = 1;
var b = 2;

console.log(b); // 2

演示案例：

var 的问题总结

存在变量提升
没有块级作用域
可以重复声明变量
容易产生作用域污染

因此，现代开发中一般不推荐继续使用 var。

1.2 let - ES6 推荐写法

let 是 ES6 新增的变量声明方式，用来解决 var 的问题。

// 暂时性死区
// console.log(a); // 报错

let a = 10;

// 块级作用域
for (let i = 0; i < 3; i++) {

}

// console.log(i); // 报错

// 不允许重复声明
let b = 1;

// let b = 2; // 报错

演示案例：

效果演示：

let 的特点

支持块级作用域
不允许重复声明
不存在变量提升问题
更符合现代开发规范

1.3 const - 常量声明

const 用于声明常量。

声明后不能重新赋值。

const PI = 3.14159;

// PI = 3.14; // 报错

演示案例：

演示效果：

注意事项

const 保证的是引用地址不变，而不是对象内容不可修改。

const obj = {
    name: "张三"
};

obj.name = "李四";

console.log(obj);

演示案例：

演示效果：

企业开发建议

默认优先使用 const
需要修改时再使用 let
尽量避免使用 var

1.4 三者对比

关键词	作用域	可重复声明	可重新赋值	变量提升
var	函数作用域	✅	✅	✅
let	块级作用域	❌	✅	❌
const	块级作用域	❌	❌	❌

二、数据类型

JavaScript 是弱类型语言，变量的数据类型可以动态变化。

2.1 原始数据类型

ES6 后共有 7 种原始类型。

类型	示例
Number	1、3.14、NaN
String	"hello"
Boolean	true、false
Undefined	undefined
Null	null
Symbol	Symbol()
BigInt	123n

Number 特殊值

console.log(0 / 0); // NaN

console.log(typeof NaN); // number

console.log(1 / 0); // Infinity

console.log(NaN === NaN); // false

演示案例：

演示效果：

String 字符串

const str1 = '单引号';

const str2 = "双引号";

const str3 = `模板字符串`;

演示案例：

演示效果：

Undefined 与 Null

let a;

console.log(a); // undefined

const b = null;

演示案例：

演示效果：

区别：

undefined：声明但未赋值
null：开发者主动赋值为空

2.2 引用类型

除了原始类型，其余基本都属于引用类型。

常见引用类型：

类型
Object
Array
Function
Date
RegExp

原始类型与引用类型区别

// 原始类型
let a = 10;

let b = a;

b = 20;

console.log(a); // 10

// 引用类型
let obj1 = {
    name: "张三"
};

let obj2 = obj1;

obj2.name = "李四";

console.log(obj1.name); // 李四

2.3 类型判断方法

typeof

console.log(typeof 123); // number

console.log(typeof "hello"); // string

console.log(typeof true); // boolean

typeof 的问题

console.log(typeof null); // object

console.log(typeof []); // object

Object.prototype.toString.call()

这是最准确的方式。

function getType(value) {
    return Object.prototype.toString
        .call(value)
        .slice(8, -1)
        .toLowerCase();
}

console.log(getType([])); // array

console.log(getType(null)); // null

2.4 类型转换

显式转换

Number("123");

String(123);

Boolean(1);

隐式转换

console.log(1 + "2"); // 12

console.log(1 - "2"); // -1

console.log(true + 1); // 2

console.log(1 + null); // 1

console.log(1 + undefined); // NaN

三、运算符

3.1 == 与 ===

运算符	说明
==	会进行类型转换
===	严格比较，不会类型转换

console.log(5 == "5"); // true

console.log(5 === "5"); // false

开发建议

企业开发中建议优先使用 ===。

3.2 逻辑运算符短路

console.log(false && 100);

console.log(true || 100);

默认值写法

const name = userInput || "默认值";

3.3 三元运算符

const result = age >= 18
    ? "成年人"
    : "未成年人";

四、流程控制

4.1 条件语句

if...else

const score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else {
    console.log("继续努力");
}

switch

const day = 3;

switch(day) {
    case 1:
        console.log("星期一");
        break;

    case 2:
        console.log("星期二");
        break;

    default:
        console.log("其他");
}

4.2 循环语句

for

for(let i = 0; i < 5; i++) {
    console.log(i);
}

while

let i = 0;

while(i < 5) {
    console.log(i);

    i++;
}

for...of

const arr = [1,2,3];

for(let item of arr) {
    console.log(item);
}

4.3 跳转语句

break

for(let i = 1; i <= 10; i++) {

    if(i === 5) {
        break;
    }

    console.log(i);
}

continue

for(let i = 1; i <= 5; i++) {

    if(i === 3) {
        continue;
    }

    console.log(i);
}

演示案例：

五、函数

5.1 函数定义方式

函数声明

function add(a, b) {
    return a + b;
}

函数表达式

const fn = function() {
    console.log("hello");
};

箭头函数

const sum = (a, b) => {
    return a + b;
};

简写形式：

const square = x => x * x;

5.2 参数处理

默认参数

function greet(name = "访客") {
    return `你好，${name}`;
}

剩余参数

function sum(...numbers) {

    return numbers.reduce((a, b) => a + b);
}

5.3 函数提升

sayHello();

function sayHello() {
    console.log("hello");
}

函数声明存在提升。

但函数表达式不存在提升。

演示案例：

六、数组

6.1 常用增删改查方法

const arr = [1,2,3];

arr.push(4);

arr.pop();

arr.unshift(0);

arr.shift();

arr.splice(1,1);

6.2 数组遍历方法

forEach

arr.forEach(item => {
    console.log(item);
});

map

const result = arr.map(item => item * 2);

filter

const result = arr.filter(item => item > 2);

reduce

const sum = arr.reduce((a,b) => a + b, 0);

6.3 查找与判断

arr.includes(2);

arr.find(item => item > 2);

arr.some(item => item > 2);

arr.every(item => item > 0);

七、对象

7.1 对象创建方式

const person = {
    name: "张三",
    age: 18
};

7.2 属性操作

console.log(person.name);

console.log(person["age"]);

person.email = "123@qq.com";

delete person.age;

7.3 Object 常用方法

Object.keys(person);

Object.values(person);

Object.entries(person);

八、DOM 操作

DOM 是 JavaScript 操作网页的核心部分。

8.1 获取元素

document.getElementById("box");

document.querySelector(".btn");

document.querySelectorAll(".item");

演示案例：

8.2 内容操作

const div = document.getElementById("content");

div.innerText = "文本内容";

div.innerHTML = "<h1>标题</h1>";

演示案例：

演示效果：

innerText 与 innerHTML 区别

属性	说明
innerText	纯文本
innerHTML	可解析 HTML 标签

DOM 内容操作案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM内容操作演示</title>
</head>

<body>

<div id="content">原始内容</div>

<button onclick="changeText()">
    修改文本
</button>

<button onclick="changeHTML()">
    修改HTML
</button>

<script>

function changeText() {

    const div =
        document.getElementById("content");

    div.innerText =
        "<strong>这是纯文本</strong>";
}

function changeHTML() {

    const div =
        document.getElementById("content");

    div.innerHTML =
        "<strong>这是HTML</strong>";
}

</script>

</body>
</html>

演示效果：

8.3 样式操作：CSS 的 JS 写法

JavaScript 可以直接修改元素样式，也可以通过操作 class 类名实现样式切换。

直接操作 style

const box = document.getElementById("box");

box.style.width = "200px";
box.style.height = "200px";

box.style.backgroundColor = "skyblue";

box.style.borderRadius = "10px";

需要注意：

多个单词的 CSS 属性需要改成驼峰命名
background-color → backgroundColor
font-size → fontSize

classList 操作类名（推荐）

企业开发中更推荐使用类名控制样式。

const box = document.querySelector(".box");

// 添加类名
box.classList.add("active");

// 删除类名
box.classList.remove("active");

// 切换类名
box.classList.toggle("active");

// 判断类名是否存在
console.log(
    box.classList.contains("active")
);

示例：点击切换颜色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <style>

        .box{
            width:200px;
            height:200px;
            background:#ccc;
            transition:0.3s;
        }

        .active{
            background:tomato;
            transform:rotate(10deg);
        }

    </style>
</head>

<body>

<div class="box"></div>

<button id="btn">
    切换样式
</button>

<script>

const box =
    document.querySelector(".box");

const btn =
    document.querySelector("#btn");

btn.onclick = function(){

    box.classList.toggle("active");
}

</script>

</body>
</html>

演示效果：

8.4 节点操作：增删改查

DOM 操作中，节点的增删改查是核心内容。

创建节点

const div =
    document.createElement("div");

div.innerText = "新节点";

插入节点

document.body.appendChild(div);

也可以插入到指定位置：

const box =
    document.querySelector(".box");

box.appendChild(div);

删除节点

const box =
    document.querySelector(".box");

box.remove();

传统写法：

box.parentNode.removeChild(box);

替换节点

const newNode =
    document.createElement("h1");

newNode.innerText = "新标题";

document.body.replaceChild(
    newNode,
    oldNode
);

克隆节点

const copy =
    box.cloneNode(true);

document.body.appendChild(copy);

参数说明：

参数	说明
true	深拷贝（包含子元素）
false	浅拷贝（不包含子元素）

九、事件处理：用户交互的桥梁

事件是 JS 实现交互功能的重要部分。

比如：

点击按钮
输入内容
鼠标移动
页面滚动

本质上都属于事件。

9.1 事件绑定的三种方式

HTML 内联绑定（不推荐）

<button onclick="test()">
    点击
</button>

function test(){
    console.log("点击事件");
}

缺点：

HTML 与 JS 耦合严重
不利于维护

DOM0 级事件

const btn =
    document.querySelector("button");

btn.onclick = function(){

    console.log("点击");
}

缺点：

同一个事件只能绑定一个函数

addEventListener（推荐）

const btn =
    document.querySelector("button");

btn.addEventListener("click", function(){

    console.log("点击1");
});

btn.addEventListener("click", function(){

    console.log("点击2");
});

优点：

可绑定多个事件
企业开发最常用

9.2 常见事件类型速查表

事件	说明
click	点击
dblclick	双击
mouseenter	鼠标移入
mouseleave	鼠标移出
mousemove	鼠标移动
keydown	键盘按下
keyup	键盘抬起
focus	获取焦点
blur	失去焦点
input	输入框内容变化
change	内容改变
submit	表单提交

9.3 事件对象详解

事件触发后，会自动生成一个事件对象。

通常写作 event 或 e。

const btn =
    document.querySelector("button");

btn.onclick = function(e){

    console.log(e);
}

常用属性

属性	说明
target	触发事件的元素
type	事件类型
clientX	鼠标 X 坐标
clientY	鼠标 Y 坐标
key	键盘按键

示例：获取鼠标坐标

document.onclick = function(e){

    console.log(e.clientX);

    console.log(e.clientY);
}

阻止默认行为

const a =
    document.querySelector("a");

a.onclick = function(e){

    e.preventDefault();
}

例如：

阻止链接跳转
阻止表单提交

阻止事件冒泡

child.onclick = function(e){

    e.stopPropagation();
}

9.4 事件委托：优化技巧

事件委托利用了事件冒泡机制。

核心思想：

不给子元素绑定事件，而是给父元素绑定。

普通写法

const lis =
    document.querySelectorAll("li");

for(let li of lis){

    li.onclick = function(){

        console.log(this.innerText);
    }
}

问题：

元素过多时性能差
动态新增元素无法绑定

事件委托写法（推荐）

const ul =
    document.querySelector("ul");

ul.onclick = function(e){

    if(e.target.tagName === "LI"){

        console.log(
            e.target.innerText
        );
    }
}

事件委托的优点

减少事件绑定数量
提高性能
动态元素自动生效
企业开发常用

十、BOM 浏览器对象模型

BOM 用来操作浏览器。

最核心的对象：

window

浏览器中的所有全局对象，其实都属于 window。

继续

10.1 window 对象常用 API

window 是 BOM 的核心对象。

常见 API 如下：

方法	说明
alert()	弹出警告框
confirm()	确认框
prompt()	输入框
setTimeout()	延时执行
setInterval()	定时循环执行
clearTimeout()	清除延时器
clearInterval()	清除定时器

alert 提示框

alert("操作成功");

confirm 确认框

const result =
    confirm("确定删除吗？");

console.log(result);

返回值：

true
false

prompt 输入框

const name =
    prompt("请输入姓名");

console.log(name);

定时器

setTimeout

延迟执行一次。

setTimeout(function(){

    console.log("3秒后执行");

},3000);

setInterval

循环执行。

setInterval(function(){

    console.log("每隔1秒执行");

},1000);

清除定时器

const timer =
    setInterval(function(){

        console.log("执行中");

},1000);

clearInterval(timer);

10.2 location 对象

location 用于获取地址栏信息。

常用属性

属性	说明
href	完整地址
hostname	域名
pathname	路径
search	参数
hash	哈希值

获取当前地址

console.log(location.href);

页面跳转

location.href =
    "https://www.baidu.com";

刷新页面

location.reload();

10.3 localStorage 与 sessionStorage

浏览器提供了本地存储功能。

localStorage

特点：

永久保存
关闭浏览器不会消失

sessionStorage

特点：

会话级存储
浏览器关闭后清空

localStorage 常用方法

方法	说明
setItem()	存储数据
getItem()	获取数据
removeItem()	删除数据
clear()	清空数据

存储数据

localStorage.setItem(
    "name",
    "张三"
);

获取数据

const name =
    localStorage.getItem("name");

console.log(name);

删除数据

localStorage.removeItem("name");

清空数据

localStorage.clear();

对象存储问题

localStorage 只能存字符串。

对象需要先转 JSON。

存储对象

const user = {
    name:"张三",
    age:18
};

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

读取对象

const user =
    JSON.parse(
        localStorage.getItem("user")
    );

console.log(user);

本文新增了演示案例和演示效果，可以更清楚的知道每一段代码的实现效果，如果对你的学习道路有帮助的话，可以点点免费的赞赞支持一下小生，谢谢各位义父！！！

每日励志文案：

我害怕失败，但我更害怕自己内心的屈服

---《火影忍者》

亚马逊云科技技术品牌专区

更多推荐

Arm Ethos-U65解析(1) 架构、数据格式与算子

亚马逊云科技技术品牌专区

【硬核干货】从单片机到AI智能体：嵌入式AI开发实战技巧与趋势深度解读

嵌入式AI智能体开发：技术趋势与实战指南随着大语言模型（LLM）和边缘计算的兴起，嵌入式开发正从传统的硬件驱动转向构建具备感知与决策能力的智能体。嵌入式AI智能体凭借低延迟（端侧推理<10ms）、数据隐私（端侧处理）、低功耗（mW级）和成本优势（端云协同），成为物联网和智能硬件的关键技术。核心开发技术包括： TinyML部署：通过模型量化（如INT8）和内存优化，将AI模型压缩至KB级M

亚马逊云科技技术品牌专区

Larfe拉孚智慧能源监测解决方案｜数智赋能节能降碳，精益管控助力企业降本增效

上海拉孚智能依托物联网、数字孪生、云计算、AI 算法，打造全场景智慧能源监测解决方案，覆盖工厂、产业园区、商业楼宇、高校、轨道交通等场景，统一管控电、水、燃气、热力、压缩空气、光伏、储能各类能源，实现能耗监测、智能分析、故障预警、运维闭环、政府合规上报一体化，帮助企业完成节能、降本、减碳、合规数字化升级。接入电表、水表、蒸汽表、热量表、流量计、DDC 控制器、空调末端、环境传感器，7×24 小时采