当前位置：首页 > news >正文

Javascript大致框架

news 来源：原创 2025/5/6 9:00:11

一、JavaScript简介

JavaScript，简称JS，是一种高级的、解释型的编程语言，主要用于为网页添加动态功能。它最初由Netscape公司于1995年推出，最早名为LiveScript，后更名为JavaScript。尽管名字中带有“Java”，但它与Java语言没有直接关系。

JavaScript最初的使命是作为浏览器中的脚本语言运行，为网页提供动态交互功能，例如响应用户点击、验证表单、动态加载内容等。随着时间推移，JavaScript发展为一门完整的编程语言，并通过Node.js扩展到服务器端开发领域。

二、JavaScript的特点

解释性语言：JS由浏览器实时解释执行，不需要编译。
弱类型语言：变量不需要声明类型，运行时可动态转换。
基于对象：万物皆对象，支持面向对象编程。
事件驱动：特别适合处理用户交互。
跨平台：JS能在几乎所有现代浏览器上运行。

三、基本语法与数据类型

变量声明
使用var、let、const声明变量。

var a = 10; // 传统方式，作用域为函数
let b = 20; // 块级作用域
const PI = 3.14; // 常量，不能被重新赋值

数据类型
JS的基本数据类型包括：Number、String、Boolean、Null、Undefined、Symbol、BigInt。
引用数据类型包括：Object、Array、Function。
运算符
包括算术运算符（+ - * / %）、比较运算符（== === != !== > < >= <=）、逻辑运算符（&& || !）、赋值运算符（= += -=）。

四、流程控制

条件语句

if (a > b) {console.log("a is greater");
} else {console.log("b is greater");
}

switch语句

switch(day) {case 1:console.log("Monday");break;default:console.log("Other day");
}

循环语句
for、while、do...while、for...in、for...of
```
for (let i = 0; i < 5; i++) {console.log(i);
}
```

五、函数

JavaScript中的函数是“一等公民”，意味着函数可以赋值给变量、作为参数传递、从函数中返回。

function add(x, y) {return x + y;
}const sum = function(a, b) {return a + b;
};const arrow = (a, b) => a + b;

支持默认参数、剩余参数、展开运算符：

function greet(name = "老六") {console.log("Hello, " + name);
}

六、对象与原型

JavaScript中对象可以通过字面量或构造函数创建。

let person = {name: "张三",age: 30,greet: function() {console.log("Hi, I'm " + this.name);}
};

JS使用原型继承，每个对象都有一个内部链接指向其原型对象（[[Prototype]]），可以通过Object.create或class语法创建继承关系。

七、数组与高级方法

let arr = [1, 2, 3, 4, 5];
arr.push(6);
arr.pop();let doubled = arr.map(x => x * 2);
let filtered = arr.filter(x => x > 2);
let sum = arr.reduce((acc, val) => acc + val, 0);

八、异步编程

回调函数（Callback）

function fetchData(callback) {setTimeout(() => {callback("数据来了！");}, 1000);
}

Promise

let promise = new Promise((resolve, reject) => {setTimeout(() => resolve("成功！"), 1000);
});promise.then(data => console.log(data));

async/await

async function getData() {let result = await promise;console.log(result);
}

九、DOM操作

DOM（Document Object Model）是网页的结构化表示，JS可以用它来操作网页内容。

let element = document.getElementById("myDiv");
element.innerHTML = "新的内容";
element.style.color = "red";

事件监听：

document.querySelector("button").addEventListener("click", () => {alert("你点我干嘛？试试就逝世！");
});

十、ES6及之后的新特性

let、const 替代 var
箭头函数

模板字符串

let name = "二龙";
console.log(`你好，${name}`);

解构赋值
模块化（import/export）
类（class）语法
Promise、async/await

十一、模块化开发

在现代JS开发中，代码被拆分为多个模块：

// module.js
export function greet() {console.log("你好，世界！");
}// main.js
import { greet } from './module.js';
greet();

十二、Node.js与服务器开发

Node.js使得JS可以运行在服务器上。常用于搭建API、处理文件、网络通信等。

const http = require('http');
http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('你好，Node.js！');
}).listen(3000);

十三、常用库与框架