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

JavaScript语言基础教程笔记

news 2025/5/17 12:24:38

JavaScript语言基础教程笔记

下面是一个全面的 JavaScript 教程，适合初学者和有一定编程经验的人士。JavaScript 是一种广泛用于网页开发的脚本语言，支持事件驱动、函数式以及基于原型的编程风格。

JavaScript 入门教程

1. 简介

定义：JavaScript（简称 JS）是一种高级编程语言，主要用于网页浏览器中实现复杂的交互功能。
用途：
- 前端开发：网页上的动态内容和用户交互。
- 后端开发：使用 Node.js 进行服务器端编程。
- 移动应用开发：React Native、Ionic 等框架。
- 游戏开发：使用 Phaser 等游戏引擎。
特点：
- 解释型语言，不需要编译。
- 动态类型，变量类型在运行时确定。
- 基于原型的继承。
- 异步编程模型（回调、Promise、async/await）。

2. 开发环境设置

浏览器

你可以在任何现代浏览器（如 Chrome、Firefox、Safari）中直接运行 JavaScript 代码。
打开浏览器的开发者工具（通常按 F12 或 Ctrl+Shift+I），选择“Console”标签页，就可以输入和运行 JavaScript 代码。

本地开发

文本编辑器：安装一个代码编辑器，如 Visual Studio Code (VSCode)、Sublime Text 或 Atom。

Node.js：如果你打算进行后端开发或使用 npm 包管理器，可以安装 Node.js。

# 安装 Node.js 和 npm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install node

3. 基础语法

注释

单行注释使用 //。
多行注释使用 /* ... */。

// 这是单行注释
/*
这是多行注释
可以跨越多行
*/

变量

使用 let 和 const 声明变量。
var 已经不推荐使用。

let name = "Alice";
const age = 30;

数据类型

基本类型：number, string, boolean, null, undefined, symbol（ES6 新增）。
引用类型：object, array, function。

let num = 42;         // number
let str = "Hello";    // string
let isTrue = true;    // boolean
let obj = {};         // object
let arr = [];         // array
let func = function() {}; // function

字符串

使用单引号或双引号定义字符串。
模板字符串使用反引号 `，支持内嵌表达式 ${expression}。

let name = "Alice";
let greeting = `Hello, ${name}!`; // 输出: Hello, Alice!

数组

使用方括号 [] 定义数组。
提供多种方法进行操作：push, pop, shift, unshift, slice, splice 等。

let fruits = ["apple", "banana", "cherry"];
fruits.push("date"); // 添加元素
console.log(fruits); // 输出: ["apple", "banana", "cherry", "date"]

对象

使用花括号 {} 定义对象。
属性访问方式：点操作符 . 或方括号 []。

let person = {name: "Alice",age: 30,sayHello: function() {console.log(`Hello, my name is ${this.name}`);}
};person.sayHello(); // 输出: Hello, my name is Alice

4. 控制结构

条件语句

if...else 语句

let age = 18;if (age >= 18) {console.log("You are an adult.");
} else {console.log("You are a minor.");
}

switch 语句

let day = "Monday";switch (day) {case "Monday":console.log("It's Monday");break;case "Tuesday":case "Wednesday":console.log("It's midweek");break;default:console.log("It's the weekend");
}

循环

for 循环

for (let i = 0; i < 5; i++) {console.log(i); // 输出: 0, 1, 2, 3, 4
}

while 循环

let i = 0;
while (i < 5) {console.log(i); // 输出: 0, 1, 2, 3, 4i++;
}

do...while 循环

let j = 0;
do {console.log(j); // 输出: 0, 1, 2, 3, 4j++;
} while (j < 5);

for...of 循环（用于迭代可迭代对象）

let colors = ["red", "green", "blue"];
for (let color of colors) {console.log(color); // 输出: red, green, blue
}

for...in 循环（用于迭代对象的属性）

let person = { name: "Alice", age: 30 };
for (let key in person) {console.log(key, person[key]); // 输出: name Alice, age 30
}

5. 函数

定义函数

使用 function 关键字定义函数。
使用箭头函数简化函数定义。

// 普通函数
function greet(name) {return `Hello, ${name}!`;
}// 箭头函数
const greetArrow = (name) => `Hello, ${name}!`;console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greetArrow("Bob")); // 输出: Hello, Bob!

默认参数

ES6 引入了默认参数。

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

闭包

内部函数可以访问外部函数的作用域。

function createCounter() {let count = 0;return function() {count++;return count;};
}const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

6. 面向对象编程

对象创建

使用对象字面量创建对象。
使用构造函数创建对象。
使用 class 语法（ES6 新增）。

// 对象字面量
let person = {name: "Alice",age: 30,sayHello: function() {console.log(`Hello, my name is ${this.name}`);}
};// 构造函数
function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log(`Hello, my name is ${this.name}`);};
}const alice = new Person("Alice", 30);
alice.sayHello(); // 输出: Hello, my name is Alice// 类
class PersonClass {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}const bob = new PersonClass("Bob", 25);
bob.sayHello(); // 输出: Hello, my name is Bob

继承

使用 extends 关键字实现类的继承。

class Animal {constructor(name) {this.name = name;}makeSound() {console.log("Some generic animal sound");}
}class Dog extends Animal {constructor(name) {super(name); // 调用父类构造函数}makeSound() {console.log("Woof!");}
}const dog = new Dog("Buddy");
dog.makeSound(); // 输出: Woof!

7. 异步编程

回调函数

回调函数用于处理异步操作的结果。

function fetchData(callback) {setTimeout(() => {callback("Data fetched successfully");}, 1000);
}fetchData((result) => {console.log(result); // 输出: Data fetched successfully
});

Promise

Promise 用于处理异步操作，并提供更清晰的错误处理机制。

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve("Data fetched successfully");}, 1000);});
}fetchData().then((result) => {console.log(result); // 输出: Data fetched successfully}).catch((error) => {console.error(error);});

async/await

async/await 语法糖使异步代码看起来像同步代码。

async function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve("Data fetched successfully");}, 1000);});
}async function main() {try {const result = await fetchData();console.log(result); // 输出: Data fetched successfully} catch (error) {console.error(error);}
}main();

8. DOM 操作

获取元素

使用 document.querySelector 和 document.querySelectorAll 获取元素。

const element = document.querySelector("#myElement");
const elements = document.querySelectorAll(".myClass");

修改元素

修改元素的内容和属性。

element.textContent = "New content";
element.style.color = "red";
element.classList.add("new-class");

事件处理

为元素添加事件监听器。

element.addEventListener("click", () => {console.log("Element was clicked!");
});// 移除事件监听器
element.removeEventListener("click", handlerFunction);

9. AJAX 和 Fetch API

XMLHttpRequest

传统的 AJAX 请求方式。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(JSON.parse(xhr.responseText));}
};
xhr.send();

Fetch API

现代的 AJAX 请求方式，基于 Promise。

fetch("https://api.example.com/data").then((response) => response.json()).then((data) => {console.log(data);}).catch((error) => {console.error(error);});// 使用 async/await
async function fetchData() {try {const response = await fetch("https://api.example.com/data");const data = await response.json();console.log(data);} catch (error) {console.error(error);}
}fetchData();