内容大纲

• 1. JavaScript简介
• 2. JavaScript基本语法
• 3. JavaScript数据类型
• 4. JavaScript控制流程
• 5. JavaScript函数
• 6. JavaScript对象
• 7. DOM操作
• 8. JavaScript最佳实践

1. JavaScript简介

JavaScript是一种高级编程语言，主要用于网页交互和前端开发。它是Web开发的三大核心技术之一（HTML、CSS、JavaScript）。JavaScript可以在浏览器中运行，也可以在服务器端通过Node.js运行。

JavaScript的主要特点包括：

• 脚本语言：不需要编译，直接由浏览器解释执行
• 面向对象：支持面向对象编程
• 动态类型：变量类型在运行时确定
• 事件驱动：可以响应用户交互事件
• 跨平台：可以在不同浏览器和环境中运行

学习交流加群风哥QQ113257174

2. JavaScript基本语法

2.1 变量声明

// 使用var声明变量（ES5及之前）
var name = "John";

// 使用let声明变量（ES6+）
let age = 30;

// 使用const声明常量（ES6+）
const PI = 3.14159;

2.2 数据类型

// 基本数据类型
let str = "Hello";
// 字符串
let num = 123;
// 数字
let bool = true;
// 布尔值
let n = null;
// 空值
let undef = undefined;
// 未定义
let sym = Symbol("id");
// 符号（ES6+）

// 引用数据类型
let obj = { name: "John", age: 30 };
// 对象
let arr = [1, 2, 3, 4, 5];
// 数组
let func = function() { console.log("Hello"); };
// 函数

2.3 运算符

// 算术运算符
let a = 10, b = 5;
console.log(a + b);
// 15
console.log(a - b);
// 5
console.log(a * b);
// 50
console.log(a / b);
// 2
console.log(a % b);
// 0
console.log(a ** b);
// 100000（ES6+）

// 比较运算符
console.log(a > b);
// true
console.log(a < b);
// false
console.log(a >= b);
// true
console.log(a <= b);
// false
console.log(a == b);
// false（类型转换）
console.log(a === b);
// false（严格比较）
console.log(a != b);
// true（类型转换）
console.log(a !== b);
// true（严格比较）

// 逻辑运算符
console.log(true && false);
// false
console.log(true || false);
// true
console.log(!true);
// false

3. JavaScript数据类型

3.1 字符串

let str = "Hello, World!";
console.log(str.length);
// 13
console.log(str.charAt(0));
// "H"
console.log(str.substring(0, 5));
// "Hello"
console.log(str.split(", "));
// ["Hello", "World!"]
console.log(str.toLowerCase());
// "hello, world!"
console.log(str.toUpperCase());
// "HELLO, WORLD!"
console.log(str.includes("World"));
// true

3.2 数字

let num = 123.45;
console.log(Math.round(num));
// 123
console.log(Math.floor(num));
// 123
console.log(Math.ceil(num));
// 124
console.log(Math.abs(-num));
// 123.45
console.log(Math.sqrt(16));
// 4
console.log(Math.pow(2, 3));
// 8
console.log(Math.random());
// 0-1之间的随机数

3.3 数组

let arr = [1, 2, 3, 4, 5];
console.log(arr.length);
// 5
console.log(arr.push(6));
// 6（新长度）
console.log(arr.pop());
// 6（移除的元素）
console.log(arr.shift());
// 1（移除的元素）
console.log(arr.unshift(0));
// 5（新长度）
console.log(arr.slice(1, 3));
// [2, 3]
console.log(arr.splice(1, 1, 10));
// [2]（移除的元素）
console.log(arr);
// [0, 10, 3, 4]
console.log(arr.join(", "));
// "0, 10, 3, 4"
console.log(arr.sort());
// [0, 3, 4, 10]
console.log(arr.reverse());
// [10, 4, 3, 0]

3.4 对象

let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

console.log(person.name);
// "John"
console.log(person["age"]);
// 30
person.greet();
// "Hello, my name is John"

// 添加新属性
person.email = "john@fgedu.net.cn";

// 删除属性
delete person.age;

// 遍历对象属性
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

4. JavaScript控制流程

4.1 条件语句

// if语句
let age = 18;
if (age >= 18) {
    console.log("成年人");
} else if (age >= 13) {
    console.log("青少年");
} else {
    console.log("儿童");
}

// switch语句
let day = 1;
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);
}

// for...in循环
let person = { name: "John", age: 30 };
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// for...of循环（ES6+）
let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value);
}

// while循环
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// do...while循环
let j = 0;
do {
    console.log(j);
    j++;
} while (j < 5);

5. JavaScript函数

5.1 函数声明

// 函数声明
function add(a, b) {
    return a + b;
}

console.log(add(1, 2));
// 3

// 函数表达式
let multiply = function(a, b) {
    return a * b;
};

console.log(multiply(2, 3));
// 6

// 箭头函数（ES6+）
let divide = (a, b) => a / b;

console.log(divide(6, 2));
// 3

5.2 函数参数

// 默认参数（ES6+）
function greet(name = "World") {
    console.log(`Hello, ${name}!`);
}

greet();
// "Hello, World!"
greet("John");
// "Hello, John!"

// 剩余参数（ES6+）
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5));
// 15

5.3 函数作用域

// 全局作用域
let globalVar = "global";

function test() {
    // 函数作用域
    let localVar = "local";
    console.log(globalVar);
    // "global"
    console.log(localVar);
    // "local"
}

test();
console.log(globalVar);
// "global"
// console.log(localVar); // 错误：localVar is not defined

// 块级作用域（ES6+）
if (true) {
    let blockVar = "block";
    console.log(blockVar);
    // "block"
}
// console.log(blockVar); // 错误：blockVar is not defined

6. JavaScript对象

6.1 对象创建

// 对象字面量
let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

// Object.create()
let personProto = {}
greet: function() {
    console.log(`Hello, my name is ${this.name}`);
};

let person3 = Object.create(personProto);
person3.name = "John";
person3.age = 30;

6.2 原型和继承

// 原型
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在原型上添加方法
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

let person = new Person("John", 30);
person.greet();
// "Hello, my name is John"

// 继承
function Student(name, age, grade) {
    Person.call(this, name, age);
    this.grade = grade;
}

// 设置原型链
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 添加子类方法
Student.prototype.study = function() {
    console.log(`${this.name} is studying`);
};

let student = new Student("John", 15, 9);
student.greet();
// "Hello, my name is John"
student.study();
// "John is studying"

7. DOM操作

7.1 DOM选择

// 通过ID选择元素
let elementById = document.getElementById("id");

// 通过类名选择元素
let elementsByClass = document.getElementsByClassName("class");

// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName("tag");

// 通过CSS选择器选择元素（ES5+）
let elementBySelector = document.querySelector("#id");
let elementsBySelector = document.querySelectorAll(".class");

7.2 DOM修改

// 修改内容
let element = document.getElementById("id");
element.textContent = "新内容";
element.innerHTML = "新内容";

// 修改属性
element.setAttribute("class", "new-class");
element.removeAttribute("class");

// 修改样式
element.style.color = "red";
element.style.fontSize = "16px";

// 添加/移除类
element.classList.add("class");
element.classList.remove("class");
element.classList.toggle("class");

// 创建和添加元素
let newElement = document.createElement("div");
newElement.textContent = "新元素";
document.body.appendChild(newElement);

// 移除元素
element.remove();

// 事件监听
element.addEventListener("click", function() {
    console.log("元素被点击");
});

8. JavaScript最佳实践