JavaScript必学知识，从基础到进阶js

JavaScript必学知识，从基础到进阶js，

本文目录导读：

1. JavaScript是什么？
2. JavaScript基础语法
3. JavaScript数据类型
4. JavaScript函数与DOM操作
5. JavaScript事件处理
6. JavaScript异步编程
7. JavaScript进阶知识

JavaScript是现代Web开发中最重要的编程语言之一，它以其灵活的语法和强大的功能深受开发者喜爱，无论是前端开发、后端开发，还是系统脚本编写，JavaScript都是不可或缺的工具，本文将从基础到进阶，全面介绍JavaScript的关键知识点,帮助你快速掌握这一编程语言。

---

JavaScript是什么？

JavaScript（JavaScript）是一种基于 ECMAScript 标准的脚本语言，广泛应用于Web开发，它允许在网页上添加交互功能，动态更新页面内容，以及与后端服务进行通信，JavaScript 是一种弱类型语言,这意味着变量的类型可以在运行时进行动态调整。

1 JavaScript的用途

• 网页开发：用于创建和动态更新网页内容。
• 前后端开发：可以将前端和后端功能结合,实现端到端的开发。
• 服务器端开发：虽然 JavaScript 本身不是 server-side 语言，但可以通过 Node.js 运行。
• 工具链：常用于构建前端框架（如 React、Vue、Angular 等）、后端框架（如 Express、Django.js）以及 API 服务。

2 JavaScript的特点

• 动态语言：开发人员不需要预先声明变量类型。
• 弱类型：变量可以存储任何数据类型，包括数字、字符串、布尔值、对象、数组、null 和 undefined。
• 支持DOM操作：可以轻松修改网页结构,实现动态交互。
• 事件驱动：基于事件的编程模式是Web开发的核心。
• 跨平台：可以轻松在不同操作系统和浏览器之间运行。

---

JavaScript基础语法

1 变量声明

在 JavaScript 中，变量不需要声明类型，直接使用 let、const 或 var 宣告变量，建议使用 const 和 let,因为它们更安全且不易混淆。

let greeting = "Hello, World!";
const MAX = 100;
var pi = 3.14159; // 不建议使用 var

2 运算符

JavaScript 提供丰富的运算符，包括算术运算符、比较运算符、逻辑运算符、位运算符和赋值运算符。

// 算术运算符
let a = 5 + 3; // 8
let b = 5 * 3; // 15
let c = 5 - 3; // 2
// 比较运算符
let d = 5 > 3; // true
let e = 5 < 3; // false
// 逻辑运算符
let f = true && false; // false
let g = true || false; // true
// 位运算符
let h = 5 >> 2; // 1
let i = 5 << 2; // 20
// 赋值运算符
let j = a = 10; // a = 10

3 条件判断

JavaScript 提供 if、else、switch 语句来处理条件判断。

if (a > b) {
    console.log("a is greater than b");
} else {
    console.log("a is less than or equal to b");
}
switch (day) {
    case 1: console.log("Monday"); break;
    case 2: console.log("Tuesday"); break;
    default: console.log("Other days");
}

4 循环语句

JavaScript 提供 for、while、do...while 三种循环语句。

// for循环
for (let i = 0; i < 10; i++) {
    console.log(i);
}
// while循环
let j = 0;
while (j < 10) {
    console.log(j);
    j++;
}
// do...while循环
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 10);

5 函数定义

JavaScript 函数用于组织代码,执行特定操作。

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("Alice"); // 输出：Hello, Alice!

---

JavaScript数据类型

JavaScript 的数据类型主要包括数字、字符串、布尔值、null、undefined 和符号。

1 数字

JavaScript 支持整数和浮点数。

let num1 = 100; // 整数
let num2 = 100.5; // 浮点数

2 字符串

字符串是表示文本的数据类型。

let str = "Hello, World!";
console.log(str.length); // 输出：12

3 布尔值

布尔值表示逻辑值，true 和 false。

let isTrue = true;
let isFalse = false;

4 null和undefined

null 表示无值，undefined 表示变量未定义。

let x = null; // x 的值为 null
let y = undefined; // y 未定义

5 符号

符号是表示左移操作后的值。

let z = +new Number("123"); // z = 123

---

JavaScript函数与DOM操作

1 获取DOM元素

通过 document 对象获取 DOM 元素。

let header = document.getElementById("header");
let paragraph = document.querySelector("p");

2 设置DOM属性

可以修改元素的属性值。

header.textContent = "Hello, World!"; // 修改文本内容
header.style.backgroundColor = "#f0f0f0"; // 修改背景颜色

3 事件绑定

绑定事件到元素,实现交互功能。

header.addEventListener("click", () => {
    console.log("Header被点击了！");
});

---

JavaScript事件处理

1 鼠标事件

JavaScript 支持多种鼠标事件，如 mousedown、mouseup、mouseleave。

onMouseDown = e => {
    console.log("鼠标左键按下");
};
window.addEventListener("mousedown", onMouseDown);

2 表单事件

处理表单事件，如 keydown、keyup、submit。

document.addEventListener("keydown", e => {
    console.log("按下键盘：" + e.key);
});
document.getElementById("email").addEventListener("input", e => {
    console.log("输入的 email 是：" + e.target.value);
});

3 事件对象

事件对象 e 提供了事件的基本信息。

console.log(e.target); // 被绑定的元素
console.log(e.target.name); // 元素的名称
console.log(e.target.result); // 操作结果
console.log(e.target.type); // 事件类型
console.log(e.target shifted); // 是否有位移

---

JavaScript异步编程

1 Promises

Promise 是处理异步操作的标准工具。

let future = new Promise(resolve => {
    setTimeout(() => {
        resolve("成功");
    }, 1000);
});
future.then(value => {
    console.log(value); // 输出：成功
});

2 Async/await

async 和 await 提高代码可读性和可维护性。

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        return response.json();
    } catch (error) {
        console.error("错误:", error);
        return null;
    }
}
const data = await fetchData();

3 Callable API

Callable API 提供更灵活的异步操作。

const { call } = Promise;
call("操作", success => {
    console.log("操作成功");
}, error => {
    console.log("操作失败");
});
call("操作").then(value => {
    console.log("操作成功:", value);
});

---

JavaScript进阶知识

1 正则表达式

正则表达式用于模式匹配和字符串操作。

const re = /pattern/g;
const matches = str.match(re); // 匹配所有匹配项

2 DOM爬虫

构建简单的爬虫工具。

function scrapeHTML() {
    const parser = new DOMParser();
    const doc = parser.parseFromString(
        '<!DOCTYPE html><html><head><title>Test</title></head><body><h1>Hello World</h1></body></html>',
        "text/html"
    );
    const elements = doc.querySelectorAll("h1");
    elements.forEach(element => {
        console.log(element.textContent); // 输出：Hello World
    });
}
scrapeHTML();

3 网络通信

使用 fetch 和 response 对接网络服务。

const response = await fetch("https://api.example.com/data");
const data = await response.json();

---

JavaScript 是现代Web开发的核心语言，掌握它的语法、数据类型、函数、DOM操作和异步编程是开发者的必备技能，通过不断练习和实践,你可以熟练使用JavaScript构建复杂的Web应用。

JavaScript必学知识，从基础到进阶js，