前端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 的问题。

javascript 复制代码

// 暂时性死区
// 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 用于声明常量。

声明后不能重新赋值。

javascript 复制代码

const PI = 3.14159;

// PI = 3.14; // 报错

演示案例：

演示效果：

注意事项

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

javascript 复制代码

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 特殊值

javascript 复制代码

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

console.log(typeof NaN); // number

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

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

演示案例：

演示效果：

String 字符串

javascript 复制代码

const str1 = '单引号';

const str2 = "双引号";

const str3 = `模板字符串`;

演示案例：

演示效果：

Undefined 与 Null

javascript 复制代码

let a;

console.log(a); // undefined

const b = null;

演示案例：

演示效果：

区别：

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

2.2 引用类型

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

常见引用类型：

类型
Object
Array
Function
Date
RegExp

原始类型与引用类型区别

javascript 复制代码

// 原始类型
let a = 10;

let b = a;

b = 20;

console.log(a); // 10

javascript 复制代码

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

let obj2 = obj1;

obj2.name = "李四";

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

2.3 类型判断方法

typeof

javascript 复制代码

console.log(typeof 123); // number

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

console.log(typeof true); // boolean

typeof 的问题

javascript 复制代码

console.log(typeof null); // object

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

Object.prototype.toString.call()

这是最准确的方式。

javascript 复制代码

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

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

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

2.4 类型转换

显式转换

javascript 复制代码

Number("123");

String(123);

Boolean(1);

隐式转换

javascript 复制代码

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 == 与 ===

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

javascript 复制代码

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

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

开发建议

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

3.2 逻辑运算符短路

javascript 复制代码

console.log(false && 100);

console.log(true || 100);

默认值写法

javascript 复制代码

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

3.3 三元运算符

javascript 复制代码

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

四、流程控制

4.1 条件语句

if...else

javascript 复制代码

const score = 85;

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

switch

javascript 复制代码

const day = 3;

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

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

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

4.2 循环语句

for

javascript 复制代码

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

while

javascript 复制代码

let i = 0;

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

    i++;
}

for...of

javascript 复制代码

const arr = [1,2,3];

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

4.3 跳转语句

break

javascript 复制代码

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

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

    console.log(i);
}

continue

javascript 复制代码

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

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

    console.log(i);
}

演示案例：

五、函数

5.1 函数定义方式

函数声明

javascript 复制代码

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

函数表达式

javascript 复制代码

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

箭头函数

javascript 复制代码

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

简写形式：

javascript 复制代码

const square = x => x * x;

5.2 参数处理

默认参数

javascript 复制代码

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

剩余参数

javascript 复制代码

function sum(...numbers) {

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

5.3 函数提升

javascript 复制代码

sayHello();

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

函数声明存在提升。

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

演示案例：

六、数组

6.1 常用增删改查方法

javascript 复制代码

const arr = [1,2,3];

arr.push(4);

arr.pop();

arr.unshift(0);

arr.shift();

arr.splice(1,1);

6.2 数组遍历方法

forEach

javascript 复制代码

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

map

javascript 复制代码

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

filter

javascript 复制代码

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

reduce

javascript 复制代码

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

6.3 查找与判断

javascript 复制代码

arr.includes(2);

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

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

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

七、对象

7.1 对象创建方式

javascript 复制代码

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

7.2 属性操作

javascript 复制代码

console.log(person.name);

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

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

delete person.age;

7.3 Object 常用方法

javascript 复制代码

Object.keys(person);

Object.values(person);

Object.entries(person);

八、DOM 操作

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

8.1 获取元素

javascript 复制代码

document.getElementById("box");

document.querySelector(".btn");

document.querySelectorAll(".item");

演示案例：

8.2 内容操作

javascript 复制代码

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

div.innerText = "文本内容";

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

演示案例：

演示效果：

innerText 与 innerHTML 区别

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

DOM 内容操作案例

javascript 复制代码

<!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

javascript 复制代码

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 操作类名（推荐）

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

javascript 复制代码

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

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

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

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

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

示例：点击切换颜色

javascript 复制代码

<!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 操作中，节点的增删改查是核心内容。

创建节点

javascript 复制代码

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

div.innerText = "新节点";

插入节点

javascript 复制代码

document.body.appendChild(div);

也可以插入到指定位置：

javascript 复制代码

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

box.appendChild(div);

删除节点

javascript 复制代码

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

box.remove();

传统写法：

javascript 复制代码

box.parentNode.removeChild(box);

替换节点

javascript 复制代码

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

newNode.innerText = "新标题";

document.body.replaceChild(
    newNode,
    oldNode
);

克隆节点

javascript 复制代码

const copy =
    box.cloneNode(true);

document.body.appendChild(copy);

参数说明：

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

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

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

比如：

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

本质上都属于事件。

9.1 事件绑定的三种方式

HTML 内联绑定（不推荐）

javascript 复制代码

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

复制代码

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

缺点：

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

DOM0 级事件

javascript 复制代码

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

btn.onclick = function(){

    console.log("点击");
}

缺点：

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

addEventListener（推荐）

javascript 复制代码

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。

javascript 复制代码

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

btn.onclick = function(e){

    console.log(e);
}

常用属性

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

示例：获取鼠标坐标

javascript 复制代码

document.onclick = function(e){

    console.log(e.clientX);

    console.log(e.clientY);
}

阻止默认行为

javascript 复制代码

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

a.onclick = function(e){

    e.preventDefault();
}

例如：

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

阻止事件冒泡

javascript 复制代码

child.onclick = function(e){

    e.stopPropagation();
}

9.4 事件委托：优化技巧

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

核心思想：

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

普通写法

javascript 复制代码

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

for(let li of lis){

    li.onclick = function(){

        console.log(this.innerText);
    }
}

问题：

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

事件委托写法（推荐）

javascript 复制代码

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 提示框

javascript 复制代码

alert("操作成功");

confirm 确认框

javascript 复制代码

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

console.log(result);

返回值：

true
false

prompt 输入框

javascript 复制代码

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

console.log(name);

定时器

setTimeout

延迟执行一次。

javascript 复制代码

setTimeout(function(){

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

},3000);

setInterval

循环执行。

javascript 复制代码

setInterval(function(){

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

},1000);

清除定时器

javascript 复制代码

const timer =
    setInterval(function(){

        console.log("执行中");

},1000);

clearInterval(timer);

10.2 location 对象

location 用于获取地址栏信息。

常用属性

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

获取当前地址

javascript 复制代码

console.log(location.href);

页面跳转

javascript 复制代码

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

刷新页面

javascript 复制代码

location.reload();

10.3 localStorage 与 sessionStorage

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

localStorage

特点：

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

sessionStorage

特点：

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

localStorage 常用方法

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

存储数据

javascript 复制代码

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

获取数据

javascript 复制代码

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

console.log(name);

删除数据

javascript 复制代码

localStorage.removeItem("name");

清空数据

javascript 复制代码

localStorage.clear();

对象存储问题

localStorage 只能存字符串。

对象需要先转 JSON。

存储对象

javascript 复制代码

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

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

读取对象

javascript 复制代码

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

console.log(user);

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

每日励志文案：

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

---《火影忍者》